nuxt-og-image 3.0.0-rc.66 → 3.0.0-rc.68

package/dist/module.mjs

@@ -1,20 +1,25 @@
 import * as fs from 'node:fs';
 import { existsSync } from 'node:fs';
 import { readFile, writeFile } from 'node:fs/promises';
-import { useNuxt, tryResolveModule, addTemplate, loadNuxtModuleInstance, createResolver, resolvePath, defineNuxtModule, useLogger, addImports, hasNuxtModule, addServerPlugin, addServerHandler, addComponentsDir, addComponent, addPlugin } from '@nuxt/kit';
+import { useNuxt, tryResolveModule, addTemplate, useLogger, resolvePath, loadNuxtModuleInstance, createResolver, defineNuxtModule, addImports, addBuildPlugin, hasNuxtModule, addServerPlugin, addServerHandler, addComponentsDir, addComponent, addPlugin } from '@nuxt/kit';
+import { defu } from 'defu';
 import { assertSiteConfig, installNuxtSiteConfig } from 'nuxt-site-config-kit';
-import { provider, env, isCI, isDevelopment } from 'std-env';
 import { hash } from 'ohash';
-import { relative, dirname, isAbsolute, basename } from 'pathe';
-import { defu } from 'defu';
+import { dirname, relative as relative$1, isAbsolute, basename } from 'pathe';
 import { readPackageJSON } from 'pkg-types';
+import { provider, env, isCI, isDevelopment } from 'std-env';
+import { parseURL, parseQuery, withoutLeadingSlash } from 'ufo';
 import { createStorage } from 'unstorage';
 import fsDriver from 'unstorage/drivers/fs';
-import { withoutLeadingSlash } from 'ufo';
+import { createHash } from 'node:crypto';
 import { ensureDependencyInstalled } from 'nypm';
-import { relative as relative$1 } from 'node:path';
+import { colorize } from 'consola/utils';
+import { relative } from 'node:path';
 import { onDevToolsInitialized, extendServerRpc } from '@nuxt/devtools-kit';
-import { createHash } from 'node:crypto';
+import { pathToFileURL } from 'node:url';
+import MagicString from 'magic-string';
+import { stripLiteral } from 'strip-literal';
+import { createUnplugin } from 'unplugin';
 import { Launcher } from 'chrome-launcher';
 import { $fetch } from 'ofetch';
 
@@ -148,8 +153,8 @@ async function applyNitroPresetCompatibility(nitroConfig, options) {
       binding = compatibility[key];
     if (key === "chromium" && binding === "node")
       binding = "playwright";
-    if (key === "css-inline") {
-      if (binding === "node" && !hasCssInlineNode || binding === "wasm" && !hasCssInlineWasm) {
+    if (key === "css-inline" && typeof binding === "string") {
+      if (binding === "node" && !hasCssInlineNode || ["wasm", "wasm-fs"].includes(binding) && !hasCssInlineWasm) {
         binding = false;
       }
     }
@@ -191,51 +196,66 @@ function ensureDependencies(dep, nuxt = useNuxt()) {
   }));
 }
 
-async function getNuxtModuleOptions(module, nuxt = useNuxt()) {
-  const moduleMeta = (typeof module === "string" ? { name: module } : await module.getMeta?.()) || {};
-  const { nuxtModule } = await loadNuxtModuleInstance(module, nuxt);
-  let moduleEntry;
-  for (const m of nuxt.options.modules) {
-    if (Array.isArray(m) && m.length >= 2) {
-      const _module = m[0];
-      const _moduleEntryName = typeof _module === "string" ? _module : (await _module.getMeta?.())?.name || "";
-      if (_moduleEntryName === moduleMeta.name)
-        moduleEntry = m;
-    }
-  }
-  let inlineOptions = {};
-  if (moduleEntry)
-    inlineOptions = moduleEntry[1];
-  if (nuxtModule.getOptions)
-    return nuxtModule.getOptions(inlineOptions, nuxt);
-  return inlineOptions;
-}
-function extendTypes(module, template) {
-  const nuxt = useNuxt();
-  const { resolve } = createResolver(import.meta.url);
-  addTemplate({
-    filename: `module/${module}.d.ts`,
-    getContents: async () => {
-      const typesPath = relative(resolve(nuxt.options.rootDir, nuxt.options.buildDir, "module"), resolve("runtime/types"));
-      const s = await template({ typesPath });
-      return `// Generated by ${module}
-${s}
-export {}
-`;
-    }
-  });
-  nuxt.hooks.hook("prepare:types", ({ references }) => {
-    references.push({ path: resolve(nuxt.options.buildDir, `module/${module}.d.ts`) });
+const logger = useLogger("@nuxtjs/og-image");
+const gray = (s) => colorize("gray", s);
+
+async function setupBuildHandler(config, resolve, nuxt = useNuxt()) {
+  nuxt.options.nitro.storage = nuxt.options.nitro.storage || {};
+  if (typeof config.runtimeCacheStorage === "object")
+    nuxt.options.nitro.storage["og-image"] = config.runtimeCacheStorage;
+  nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
+    await applyNitroPresetCompatibility(nitroConfig, { compatibility: config.compatibility?.runtime, resolve });
+    nitroConfig.alias.electron = "unenv/runtime/mock/proxy-cjs";
+    nitroConfig.alias.bufferutil = "unenv/runtime/mock/proxy-cjs";
+    nitroConfig.alias["utf-8-validate"] = "unenv/runtime/mock/proxy-cjs";
+    nitroConfig.alias.queue = "unenv/runtime/mock/proxy-cjs";
   });
-  nuxt.hooks.hook("nitro:config", (config) => {
-    config.typescript = config.typescript || {};
-    config.typescript.tsConfig = config.typescript.tsConfig || {};
-    config.typescript.tsConfig.include = config.typescript.tsConfig.include || [];
-    config.typescript.tsConfig.include.push(`./module/${module}.d.ts`);
+  nuxt.hooks.hook("nitro:init", async (nitro) => {
+    nitro.hooks.hook("compiled", async (_nitro) => {
+      const target = resolveNitroPreset(_nitro.options);
+      const compatibility = getPresetNitroPresetCompatibility(target);
+      if (compatibility.wasm?.esmImport !== true)
+        return;
+      const configuredEntry = nitro.options.rollupConfig?.output.entryFileNames;
+      let serverEntry = resolve(_nitro.options.output.serverDir, typeof configuredEntry === "string" ? configuredEntry : "index.mjs");
+      const isCloudflarePagesOrModule = target === "cloudflare-pages" || target === "cloudflare-module";
+      if (isCloudflarePagesOrModule) {
+        serverEntry = [
+          resolve(dirname(serverEntry), "./chunks/wasm.mjs"),
+          resolve(dirname(serverEntry), "./chunks/_/wasm.mjs")
+        ].filter(existsSync)[0] || serverEntry;
+        const routesPath = resolve(nitro.options.output.publicDir, "_routes.json");
+        const routes = await readFile(routesPath).then((buffer) => JSON.parse(buffer.toString()));
+        const preSize = routes.exclude.length;
+        routes.exclude = routes.exclude.filter((path2) => !path2.startsWith("/__og-image__/static"));
+        routes.exclude.push("/__og-image__/static/*");
+        if (preSize !== routes.exclude.length) {
+          logger.info(`Optimizing CloudFlare \`_routes.json\` for prerendered OG Images ${gray(`(${100 - Math.round(routes.exclude.length / preSize * 100)}% smaller)`)}`);
+        }
+        await writeFile(routesPath, JSON.stringify(routes, void 0, 2));
+      }
+      const contents = await readFile(serverEntry, "utf-8");
+      const resvgHash = await resolveFilePathSha1("@resvg/resvg-wasm/index_bg.wasm");
+      const yogaHash = await resolveFilePathSha1("yoga-wasm-web/dist/yoga.wasm");
+      const cssInlineHash = await resolveFilePathSha1("@css-inline/css-inline-wasm/index_bg.wasm");
+      const postfix = target === "vercel-edge" ? "?module" : "";
+      const path = isCloudflarePagesOrModule ? `../wasm/` : `./wasm/`;
+      await writeFile(serverEntry, contents.replaceAll('"@resvg/resvg-wasm/index_bg.wasm?module"', `"${path}index_bg-${resvgHash}.wasm${postfix}"`).replaceAll('"@css-inline/css-inline-wasm/index_bg.wasm?module"', `"${path}index_bg-${cssInlineHash}.wasm${postfix}"`).replaceAll('"yoga-wasm-web/dist/yoga.wasm?module"', `"${path}yoga-${yogaHash}.wasm${postfix}"`), { encoding: "utf-8" });
+    });
   });
 }
-function isNuxtGenerate(nuxt = useNuxt()) {
-  return nuxt.options._generate || nuxt.options.nitro.static || nuxt.options.nitro.preset === "static";
+async function resolveFilePathSha1(path) {
+  const _path = await resolvePath(path);
+  return sha1(existsSync(_path) ? await readFile(_path) : path);
+}
+function sha1(source) {
+  return createHash("sha1").update(source).digest("hex").slice(0, 16);
+}
+
+function setupDevHandler(options, resolve, nuxt = useNuxt()) {
+  nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
+    await applyNitroPresetCompatibility(nitroConfig, { compatibility: options.compatibility?.dev, resolve });
+  });
 }
 
 const DEVTOOLS_UI_ROUTE = "/__nuxt-og-image";
@@ -266,7 +286,7 @@ function setupDevToolsUI(options, resolve, nuxt = useNuxt()) {
   onDevToolsInitialized(async () => {
     const rpc = extendServerRpc("nuxt-og-image", {});
     nuxt.hook("builder:watch", (e, path) => {
-      path = relative$1(nuxt.options.srcDir, resolve(nuxt.options.srcDir, path));
+      path = relative(nuxt.options.srcDir, resolve(nuxt.options.srcDir, path));
       if ((e === "change" || e.includes("link")) && path.startsWith("pages")) {
         rpc.broadcast.refreshRouteData(path).catch(() => {
         });
@@ -299,12 +319,6 @@ function setupDevToolsUI(options, resolve, nuxt = useNuxt()) {
   });
 }
 
-function setupDevHandler(options, resolve, nuxt = useNuxt()) {
-  nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
-    await applyNitroPresetCompatibility(nitroConfig, { compatibility: options.compatibility?.dev, resolve });
-  });
-}
-
 function setupGenerateHandler(options, resolve, nuxt = useNuxt()) {
   nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
     await applyNitroPresetCompatibility(nitroConfig, {
@@ -343,48 +357,138 @@ function setupPrerenderHandler(options, resolve, nuxt = useNuxt()) {
   });
 }
 
-async function setupBuildHandler(config, resolve, nuxt = useNuxt()) {
-  nuxt.options.nitro.storage = nuxt.options.nitro.storage || {};
-  if (typeof config.runtimeCacheStorage === "object")
-    nuxt.options.nitro.storage["og-image"] = config.runtimeCacheStorage;
-  nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
-    await applyNitroPresetCompatibility(nitroConfig, { compatibility: config.compatibility?.runtime, resolve });
-    nitroConfig.alias.electron = "unenv/runtime/mock/proxy-cjs";
-    nitroConfig.alias.bufferutil = "unenv/runtime/mock/proxy-cjs";
-    nitroConfig.alias["utf-8-validate"] = "unenv/runtime/mock/proxy-cjs";
-    nitroConfig.alias.queue = "unenv/runtime/mock/proxy-cjs";
-  });
-  nuxt.hooks.hook("nitro:init", async (nitro) => {
-    nitro.hooks.hook("compiled", async (_nitro) => {
-      const target = resolveNitroPreset(_nitro.options);
-      const compatibility = getPresetNitroPresetCompatibility(target);
-      if (compatibility.wasm?.esmImport !== true)
-        return;
-      const configuredEntry = nitro.options.rollupConfig?.output.entryFileNames;
-      let serverEntry = resolve(_nitro.options.output.serverDir, typeof configuredEntry === "string" ? configuredEntry : "index.mjs");
-      const isCloudflarePagesOrModule = target === "cloudflare-pages" || target === "cloudflare-module";
-      if (isCloudflarePagesOrModule) {
-        serverEntry = [
-          resolve(dirname(serverEntry), "./chunks/wasm.mjs"),
-          resolve(dirname(serverEntry), "./chunks/_/wasm.mjs")
-        ].filter(existsSync)[0] || serverEntry;
+function isVue(id, opts = {}) {
+  const { search } = parseURL(decodeURIComponent(pathToFileURL(id).href));
+  if (id.endsWith(".vue") && !search) {
+    return true;
+  }
+  if (!search) {
+    return false;
+  }
+  const query = parseQuery(search);
+  if (query.nuxt_component) {
+    return false;
+  }
+  if (query.macro && (search === "?macro=true" || !opts.type || opts.type.includes("script"))) {
+    return true;
+  }
+  const type = "setup" in query ? "script" : query.type;
+  if (!("vue" in query) || opts.type && !opts.type.includes(type)) {
+    return false;
+  }
+  return true;
+}
+const JS_RE = /\.(?:[cm]?j|t)sx?$/;
+function isJS(id) {
+  const { pathname } = parseURL(decodeURIComponent(pathToFileURL(id).href));
+  return JS_RE.test(pathname);
+}
+const TreeShakeComposablesPlugin = createUnplugin(() => {
+  const composableNames = [
+    "defineOgImage",
+    "defineOgImageComponent",
+    "defineOgImageScreenshot"
+  ];
+  const regexp = `(^\\s*)(${composableNames.join("|")})(?=\\((?!\\) \\{))`;
+  const COMPOSABLE_RE = new RegExp(regexp, "m");
+  const COMPOSABLE_RE_GLOBAL = new RegExp(regexp, "gm");
+  return {
+    name: "nuxt-og-image:zero-runtime:transform",
+    enforce: "pre",
+    transformInclude(id) {
+      return isVue(id, { type: ["script"] }) || isJS(id);
+    },
+    transform(code, id) {
+      const s = new MagicString(code);
+      if (id.endsWith("components.islands.mjs")) {
+        for (const match of code.matchAll(/"OgImage.*": defineAsyncComponent\(.*\),?/g)) {
+          s.overwrite(match.index, match.index + match[0].length, "");
+        }
+      } else {
+        const strippedCode = stripLiteral(code);
+        if (!COMPOSABLE_RE.test(code)) {
+          return;
+        }
+        for (const match of strippedCode.matchAll(COMPOSABLE_RE_GLOBAL)) {
+          s.overwrite(match.index, match.index + match[0].length, `${match[1]} import.meta.prerender && ${match[2]}`);
+        }
       }
-      const contents = await readFile(serverEntry, "utf-8");
-      const resvgHash = await resolveFilePathSha1("@resvg/resvg-wasm/index_bg.wasm");
-      const yogaHash = await resolveFilePathSha1("yoga-wasm-web/dist/yoga.wasm");
-      const cssInlineHash = await resolveFilePathSha1("@css-inline/css-inline-wasm/index_bg.wasm");
-      const postfix = target === "vercel-edge" ? "?module" : "";
-      const path = isCloudflarePagesOrModule ? `../wasm/` : `./wasm/`;
-      await writeFile(serverEntry, contents.replaceAll('"@resvg/resvg-wasm/index_bg.wasm?module"', `"${path}index_bg-${resvgHash}.wasm${postfix}"`).replaceAll('"@css-inline/css-inline-wasm/index_bg.wasm?module"', `"${path}index_bg-${cssInlineHash}.wasm${postfix}"`).replaceAll('"yoga-wasm-web/dist/yoga.wasm?module"', `"${path}yoga-${yogaHash}.wasm${postfix}"`), { encoding: "utf-8" });
-    });
+      if (s.hasChanged()) {
+        return {
+          code: s.toString(),
+          map: s.generateMap({ hires: true })
+        };
+      }
+    }
+  };
+});
+
+async function getNuxtModuleOptions(module, nuxt = useNuxt()) {
+  const moduleMeta = (typeof module === "string" ? { name: module } : await module.getMeta?.()) || {};
+  const { nuxtModule } = await loadNuxtModuleInstance(module, nuxt);
+  let moduleEntry;
+  for (const m of nuxt.options.modules) {
+    if (Array.isArray(m) && m.length >= 2) {
+      const _module = m[0];
+      const _moduleEntryName = typeof _module === "string" ? _module : (await _module.getMeta?.())?.name || "";
+      if (_moduleEntryName === moduleMeta.name)
+        moduleEntry = m;
+    }
+  }
+  let inlineOptions = {};
+  if (moduleEntry)
+    inlineOptions = moduleEntry[1];
+  if (nuxtModule.getOptions)
+    return nuxtModule.getOptions(inlineOptions, nuxt);
+  return inlineOptions;
+}
+function extendTypes(module, template) {
+  const nuxt = useNuxt();
+  const { resolve } = createResolver(import.meta.url);
+  addTemplate({
+    filename: `module/${module}.d.ts`,
+    getContents: async () => {
+      const typesPath = relative$1(resolve(nuxt.options.rootDir, nuxt.options.buildDir, "module"), resolve("runtime/types"));
+      const s = await template({ typesPath });
+      return `// Generated by ${module}
+${s}
+export {}
+`;
+    }
+  });
+  nuxt.hooks.hook("prepare:types", ({ references }) => {
+    references.push({ path: resolve(nuxt.options.buildDir, `module/${module}.d.ts`) });
+  });
+  nuxt.hooks.hook("nitro:config", (config) => {
+    config.typescript = config.typescript || {};
+    config.typescript.tsConfig = config.typescript.tsConfig || {};
+    config.typescript.tsConfig.include = config.typescript.tsConfig.include || [];
+    config.typescript.tsConfig.include.push(`./module/${module}.d.ts`);
   });
 }
-async function resolveFilePathSha1(path) {
-  const _path = await resolvePath(path);
-  return sha1(existsSync(_path) ? await readFile(_path) : path);
+function isNuxtGenerate(nuxt = useNuxt()) {
+  return nuxt.options._generate || nuxt.options.nitro.static || nuxt.options.nitro.preset === "static";
 }
-function sha1(source) {
-  return createHash("sha1").update(source).digest("hex").slice(0, 16);
+
+function normaliseFontInput(fonts) {
+  return fonts.map((f) => {
+    if (typeof f === "string") {
+      const [name, weight] = f.split(":");
+      return {
+        cacheKey: f,
+        name,
+        weight: weight || 400,
+        style: "normal",
+        path: void 0
+      };
+    }
+    return {
+      cacheKey: f.key || `${f.name}:${f.weight}`,
+      style: "normal",
+      weight: 400,
+      ...f
+    };
+  });
 }
 
 const isUndefinedOrTruthy = (v) => typeof v === "undefined" || v !== false;
@@ -429,27 +533,6 @@ async function downloadFont(font, storage, mirror) {
   return false;
 }
 
-function normaliseFontInput(fonts) {
-  return fonts.map((f) => {
-    if (typeof f === "string") {
-      const [name, weight] = f.split(":");
-      return {
-        cacheKey: f,
-        name,
-        weight: weight || 400,
-        style: "normal",
-        path: void 0
-      };
-    }
-    return {
-      cacheKey: f.key || `${f.name}:${f.weight}`,
-      style: "normal",
-      weight: 400,
-      ...f
-    };
-  });
-}
-
 const module = defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
@@ -494,9 +577,23 @@ const module = defineNuxtModule({
       logger.warn("Nuxt OG Image is enabled but SSR is disabled.\n\nYou should enable SSR (`ssr: true`) or disable the module (`ogImage: { enabled: false }`).");
       return;
     }
-    nuxt.options.build.transpile.push(resolve("./runtime"));
+    nuxt.options.alias["#nuxt-og-image-utils"] = resolve("./runtime/shared");
+    nuxt.options.alias["#nuxt-og-image-cache"] = resolve("./runtime/nitro/og-image/cache/lru");
     const preset = resolveNitroPreset(nuxt.options.nitro);
     const targetCompatibility = getPresetNitroPresetCompatibility(preset);
+    if (config.zeroRuntime) {
+      config.compatibility = defu(config.compatibility, {
+        runtime: {
+          chromium: false,
+          // should already be false
+          satori: false
+        }
+      });
+      if (!nuxt.options.dev) {
+        addBuildPlugin(TreeShakeComposablesPlugin, { server: true, client: true, build: true });
+        nuxt.options.alias["#nuxt-og-image-cache"] = resolve("./runtime/nitro/og-image/cache/mock");
+      }
+    }
     let isUsingSharp = false;
     const userConfiguredExtension = config.defaults.extension;
     const hasConfiguredJpegs = userConfiguredExtension && ["jpeg", "jpg"].includes(userConfiguredExtension);
@@ -560,8 +657,9 @@ const module = defineNuxtModule({
       }
     });
     await installNuxtSiteConfig();
-    if (hasNuxtModule("@nuxt/content"))
+    if (hasNuxtModule("@nuxt/content")) {
       addServerPlugin(resolve("./runtime/nitro/plugins/nuxt-content"));
+    }
     if (!config.fonts.length) {
       config.fonts = [
         { name: "Inter", weight: 400, path: resolve("./runtime/assets/Inter-400.ttf.base64"), absolutePath: true },
@@ -610,13 +708,22 @@ const module = defineNuxtModule({
       }
       return f;
     }))).filter(Boolean);
-    nuxt.options.nitro.serverAssets = nuxt.options.nitro.serverAssets || [];
-    nuxt.options.nitro.serverAssets.push({ baseName: "nuxt-og-image:fonts", dir: serverFontsDir });
+    const fontKeys = config.fonts.map((f) => f.key?.split(":").pop());
+    const fontStorageKeys = await fontStorage.getKeys();
+    await Promise.all(fontStorageKeys.filter((key) => !fontKeys.includes(key)).map(async (key) => {
+      logger.info(`Nuxt OG Image removing outdated cached font file \`${key}\``);
+      await fontStorage.removeItem(key);
+    }));
+    if (!config.zeroRuntime) {
+      nuxt.options.nitro.serverAssets = nuxt.options.nitro.serverAssets || [];
+      nuxt.options.nitro.serverAssets.push({ baseName: "nuxt-og-image:fonts", dir: serverFontsDir });
+    }
     nuxt.options.experimental.componentIslands = true;
+    const basePath = config.zeroRuntime ? "./runtime/nitro/routes/__zero-runtime" : "./runtime/nitro/routes";
     addServerHandler({
       lazy: true,
       route: "/__og-image__/font/**",
-      handler: resolve("./runtime/nitro/routes/font")
+      handler: resolve(`${basePath}/font`)
     });
     if (config.debug || nuxt.options.dev) {
       addServerHandler({
@@ -628,7 +735,12 @@ const module = defineNuxtModule({
     addServerHandler({
       lazy: true,
       route: "/__og-image__/image/**",
-      handler: resolve("./runtime/nitro/routes/image")
+      handler: resolve(`${basePath}/image`)
+    });
+    addServerHandler({
+      lazy: true,
+      route: "/__og-image__/static/**",
+      handler: resolve(`${basePath}/image`)
     });
     nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"] = [];
     ["defineOgImage", "defineOgImageComponent", "defineOgImageScreenshot"].forEach((name2) => {
@@ -638,11 +750,13 @@ const module = defineNuxtModule({
       });
       nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"].push(name2);
     });
-    await addComponentsDir({
-      path: resolve("./runtime/nuxt/components/Templates/Community"),
-      island: true,
-      watch: true
-    });
+    if (!config.zeroRuntime || nuxt.options.dev) {
+      await addComponentsDir({
+        path: resolve("./runtime/nuxt/components/Templates/Community"),
+        island: true
+        // watch: true,
+      });
+    }
     [
       // new
       "OgImage",
@@ -654,8 +768,9 @@ const module = defineNuxtModule({
         ...config.componentOptions
       });
     });
-    addPlugin({ mode: "server", src: resolve("./runtime/nuxt/plugins/route-rule-og-image.server") });
-    addPlugin({ mode: "server", src: resolve("./runtime/nuxt/plugins/og-image-canonical-urls.server") });
+    const basePluginPath = `./runtime/nuxt/plugins${config.zeroRuntime ? "/__zero-runtime" : ""}`;
+    addPlugin({ mode: "server", src: resolve(`${basePluginPath}/route-rule-og-image.server`) });
+    addPlugin({ mode: "server", src: resolve(`${basePluginPath}/og-image-canonical-urls.server`) });
     const ogImageComponentCtx = { components: [] };
     nuxt.hook("components:extend", (components) => {
       ogImageComponentCtx.components = [];
@@ -712,7 +827,7 @@ const module = defineNuxtModule({
     };
     extendTypes("nuxt-og-image", ({ typesPath }) => {
       const componentImports = ogImageComponentCtx.components.map((component) => {
-        const relativeComponentPath = relative(resolve(nuxt.options.rootDir, nuxt.options.buildDir, "module"), component.path);
+        const relativeComponentPath = relative$1(resolve(nuxt.options.rootDir, nuxt.options.buildDir, "module"), component.path);
         const name2 = config.componentDirs.sort((a, b) => b.length - a.length).reduce((name3, dir) => {
           return name3.replace(new RegExp(`^${dir}`), "");
         }, component.pascalName);

package/dist/runtime/nitro/og-image/bindings/chromium/chrome-launcher.js

@@ -1,5 +1,5 @@
-import playwrightCore from "playwright-core";
 import { Launcher } from "chrome-launcher";
+import playwrightCore from "playwright-core";
 const chromePath = Launcher.getFirstInstallation();
 export async function createBrowser() {
   return playwrightCore.chromium.launch({

package/dist/runtime/nitro/og-image/bindings/chromium/on-demand.js

@@ -1,5 +1,5 @@
-import { execa } from "execa";
 import { createConsola } from "consola";
+import { execa } from "execa";
 import playwrightCore from "playwright-core";
 let installedChromium = false;
 let installChromiumPromise;

package/dist/runtime/nitro/og-image/bindings/satori/wasm.js

@@ -1,6 +1,6 @@
+import { init } from "satori";
 import _satori from "satori/wasm";
 import initYoga from "yoga-wasm-web";
-import { init } from "satori";
 const wasm = import("yoga-wasm-web/dist/yoga.wasm?module").then(async (yoga) => await initYoga(yoga.default || yoga));
 export default {
   initWasmPromise: new Promise((resolve) => {

package/dist/runtime/nitro/og-image/{cache.d.ts → cache/lru.d.ts}

@@ -1,7 +1,9 @@
 import type { Storage } from 'unstorage';
-import type { OgImageOptions } from '../../types.js';
+import type { OgImageOptions } from '../../../types.js';
 export declare const htmlPayloadCache: Storage<{
     expiresAt: number;
     value: OgImageOptions;
 }>;
 export declare const prerenderOptionsCache: Storage<OgImageOptions> | undefined;
+export declare const fontCache: Storage<BufferSource>;
+export declare const emojiCache: Storage<string>;

package/dist/runtime/nitro/og-image/{cache.js → cache/lru.js}

@@ -7,3 +7,9 @@ export const htmlPayloadCache = createStorage({
 export const prerenderOptionsCache = import.meta.prerender ? createStorage({
   driver: lruCacheDriver({ max: 1e4 })
 }) : void 0;
+export const fontCache = createStorage({
+  driver: lruCacheDriver({ max: 10 })
+});
+export const emojiCache = createStorage({
+  driver: lruCacheDriver({ max: 1e3 })
+});

package/dist/runtime/nitro/og-image/cache/mock.d.ts

@@ -0,0 +1,9 @@
+import type { Storage } from 'unstorage';
+import type { OgImageOptions } from '../../../types.js';
+export declare const htmlPayloadCache: Storage<{
+    expiresAt: number;
+    value: OgImageOptions;
+}>;
+export declare const prerenderOptionsCache: Storage<OgImageOptions> | undefined;
+export declare const fontCache: Storage<OgImageOptions<"NuxtSeo">>;
+export declare const emojiCache: Storage<string>;

package/dist/runtime/nitro/og-image/cache/mock.js

@@ -0,0 +1,9 @@
+import { createStorage } from "unstorage";
+import memoryDriver from "unstorage/drivers/memory";
+const storage = createStorage({
+  driver: memoryDriver()
+});
+export const htmlPayloadCache = storage;
+export const prerenderOptionsCache = storage;
+export const fontCache = storage;
+export const emojiCache = storage;

package/dist/runtime/nitro/og-image/chromium/renderer.js

@@ -1,6 +1,6 @@
+import { createBrowser } from "#nuxt-og-image/bindings/chromium";
 import { createError } from "h3";
 import { createScreenshot } from "./screenshot.js";
-import { createBrowser } from "#nuxt-og-image/bindings/chromium";
 const ChromiumRenderer = {
   name: "chromium",
   supportedFormats: ["png", "jpeg", "jpg"],

package/dist/runtime/nitro/og-image/chromium/screenshot.js

@@ -1,6 +1,6 @@
+import { useNitroOrigin } from "#imports";
 import { joinURL, withQuery } from "ufo";
 import { useOgImageRuntimeConfig } from "../../../shared.js";
-import { useNitroOrigin } from "#imports";
 export async function createScreenshot({ basePath, e, options, extension }, browser) {
   const { colorPreference } = useOgImageRuntimeConfig();
   const path = options.component === "PageScreenshot" ? basePath : joinURL("/__og-image__/image", basePath, `og.html`);

package/dist/runtime/nitro/og-image/context.js

@@ -1,14 +1,14 @@
-import { parseURL, withQuery, withoutLeadingSlash, withoutTrailingSlash } from "ufo";
-import { createError, getQuery } from "h3";
+import { htmlPayloadCache, prerenderOptionsCache } from "#nuxt-og-image-cache";
 import { defu } from "defu";
-import { normalizeKey } from "unstorage";
-import { hash } from "ohash";
-import { useNitroApp } from "nitropack/runtime";
 import { parse } from "devalue";
+import { createError, getQuery } from "h3";
+import { useNitroApp } from "nitropack/runtime";
+import { hash } from "ohash";
+import { parseURL, withoutLeadingSlash, withoutTrailingSlash, withQuery } from "ufo";
+import { normalizeKey } from "unstorage";
 import { separateProps, useOgImageRuntimeConfig } from "../../shared.js";
-import { createNitroRouteRuleMatcher } from "../util/kit.js";
 import { decodeObjectHtmlEntities } from "../util/encoding.js";
-import { htmlPayloadCache, prerenderOptionsCache } from "./cache.js";
+import { createNitroRouteRuleMatcher } from "../util/kit.js";
 import { useChromiumRenderer, useSatoriRenderer } from "./instances.js";
 export function resolvePathCacheKey(e, path) {
   const siteConfig = e.context.siteConfig.get();
@@ -42,7 +42,7 @@ export async function resolveContext(e) {
   queryParams.props = JSON.parse(queryParams.props || "{}");
   queryParams = separateProps(queryParams);
   let basePath = withoutTrailingSlash(
-    path.replace(`/__og-image__/image`, "").replace(`/og.${extension}`, "")
+    path.replace(`/__og-image__/image`, "").replace(`/__og-image__/static`, "").replace(`/og.${extension}`, "")
   );
   if (queryParams._query)
     basePath = withQuery(basePath, JSON.parse(queryParams._query));

package/dist/runtime/nitro/og-image/satori/font.d.ts

@@ -1,2 +1,3 @@
 import type { OgImageRenderEventContext, ResolvedFontConfig } from '../../../types.js';
+export declare const assets: import("unstorage").Storage<import("unstorage").StorageValue>;
 export declare function loadFont({ e, publicStoragePath }: OgImageRenderEventContext, font: ResolvedFontConfig): Promise<ResolvedFontConfig>;

package/dist/runtime/nitro/og-image/satori/font.js

@@ -1,6 +1,6 @@
-import { prefixStorage } from "unstorage";
 import { useNitroOrigin, useStorage } from "#imports";
-const assets = prefixStorage(useStorage(), "/assets");
+import { prefixStorage } from "unstorage";
+export const assets = prefixStorage(useStorage(), "/assets");
 export async function loadFont({ e, publicStoragePath }, font) {
   const { name, weight } = font;
   if (font.data)

package/dist/runtime/nitro/og-image/satori/instances.d.ts

@@ -1,5 +1,5 @@
-import type _sharp from 'sharp';
 import type _satori from 'satori';
+import type _sharp from 'sharp';
 export declare function useResvg(): Promise<new (svg: Uint8Array | string, options?: import("@resvg/resvg-wasm").ResvgRenderOptions) => {
     free(): void;
     render(): {

package/dist/runtime/nitro/og-image/satori/plugins/encoding.js

@@ -1,5 +1,5 @@
-import { defineSatoriTransformer } from "../utils.js";
 import { decodeHtml } from "../../../util/encoding.js";
+import { defineSatoriTransformer } from "../utils.js";
 export default defineSatoriTransformer([
   // clean up
   {