nuxt-og-image 5.0.5 → 5.1.1

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import * as fs from 'node:fs';
-import { existsSync } from 'node:fs';
+import { existsSync, mkdirSync } from 'node:fs';
 import { readFile, writeFile } from 'node:fs/promises';
-import { resolvePath, useNuxt, addTemplate, loadNuxtModuleInstance, createResolver, defineNuxtModule, addImports, addBuildPlugin, hasNuxtModule, hasNuxtModuleCompatibility, addServerPlugin, addServerHandler, addComponentsDir, addComponent, addPlugin } from '@nuxt/kit';
+import { resolvePath, useNuxt, addTemplate, updateTemplates, loadNuxtModuleInstance, createResolver, defineNuxtModule, addImports, addBuildPlugin, addServerHandler, hasNuxtModule, hasNuxtModuleCompatibility, addServerPlugin, addComponentsDir, addComponent, addPlugin } from '@nuxt/kit';
 import { defu } from 'defu';
 import { installNuxtSiteConfig } from 'nuxt-site-config/kit';
 import { hash } from 'ohash';
@@ -186,10 +186,11 @@ async function applyNitroPresetCompatibility(nitroConfig, options) {
   const { resolve } = options;
   const satoriEnabled = typeof options.compatibility?.satori !== "undefined" ? !!options.compatibility.satori : !!compatibility.satori;
   const chromiumEnabled = typeof options.compatibility?.chromium !== "undefined" ? !!options.compatibility.chromium : !!compatibility.chromium;
-  nitroConfig.alias["#og-image/renderers/satori"] = satoriEnabled ? resolve("./runtime/server/og-image/satori/renderer") : resolve("./runtime/mock/empty");
-  nitroConfig.alias["#og-image/renderers/chromium"] = chromiumEnabled ? resolve("./runtime/server/og-image/chromium/renderer") : resolve("./runtime/mock/empty");
+  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/chromium"] = chromiumEnabled ? await resolve.resolvePath("./runtime/server/og-image/chromium/renderer") : emptyMock;
   const resolvedCompatibility = {};
-  function applyBinding(key) {
+  async function applyBinding(key) {
     let binding = options.compatibility?.[key];
     if (typeof binding === "undefined")
       binding = compatibility[key];
@@ -202,15 +203,15 @@ async function applyNitroPresetCompatibility(nitroConfig, options) {
     }
     resolvedCompatibility[key] = binding;
     return {
-      [`#og-image/bindings/${key}`]: binding === false ? resolve("./runtime/mock/empty") : resolve(`./runtime/server/og-image/bindings/${key}/${binding}`)
+      [`#og-image/bindings/${key}`]: binding === false ? emptyMock : await resolve.resolvePath(`./runtime/server/og-image/bindings/${key}/${binding}`)
     };
   }
   nitroConfig.alias = defu(
-    applyBinding("chromium"),
-    applyBinding("satori"),
-    applyBinding("resvg"),
-    applyBinding("sharp"),
-    applyBinding("css-inline"),
+    await applyBinding("chromium"),
+    await applyBinding("satori"),
+    await applyBinding("resvg"),
+    await applyBinding("sharp"),
+    await applyBinding("css-inline"),
     nitroConfig.alias || {}
   );
   if (Object.values(compatibility).includes("wasm")) {
@@ -244,11 +245,11 @@ async function setupBuildHandler(config, resolve, nuxt = useNuxt()) {
     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 = resolve("./runtime/mock/proxy-cjs");
-    nitroConfig.alias.bufferutil = resolve("./runtime/mock/proxy-cjs");
-    nitroConfig.alias["utf-8-validate"] = resolve("./runtime/mock/proxy-cjs");
-    nitroConfig.alias.queue = resolve("./runtime/mock/proxy-cjs");
-    nitroConfig.alias["chromium-bidi"] = resolve("./runtime/mock/proxy-cjs");
+    nitroConfig.alias.electron = await resolve.resolvePath("./runtime/mock/proxy-cjs");
+    nitroConfig.alias.bufferutil = await resolve.resolvePath("./runtime/mock/proxy-cjs");
+    nitroConfig.alias["utf-8-validate"] = await resolve.resolvePath("./runtime/mock/proxy-cjs");
+    nitroConfig.alias.queue = await resolve.resolvePath("./runtime/mock/proxy-cjs");
+    nitroConfig.alias["chromium-bidi"] = await resolve.resolvePath("./runtime/mock/proxy-cjs");
   });
   nuxt.hooks.hook("nitro:init", async (nitro) => {
     const target = resolveNitroPreset(nitro.options);
@@ -265,12 +266,12 @@ async function setupBuildHandler(config, resolve, nuxt = useNuxt()) {
       if (compatibility.wasm?.esmImport !== true)
         return;
       const configuredEntry = nitro.options.rollupConfig?.output.entryFileNames;
-      const serverEntry = resolve(_nitro.options.output.serverDir, typeof configuredEntry === "string" ? configuredEntry : "index.mjs");
+      const serverEntry = resolve.resolve(_nitro.options.output.serverDir, typeof configuredEntry === "string" ? configuredEntry : "index.mjs");
       const wasmEntries = [serverEntry];
       if (isCloudflarePagesOrModule) {
-        wasmEntries.push(resolve(dirname(serverEntry), "./chunks/wasm.mjs"));
-        wasmEntries.push(resolve(dirname(serverEntry), "./chunks/_/wasm.mjs"));
-        wasmEntries.push(resolve(dirname(serverEntry), "./chunks/index_bg.mjs"));
+        wasmEntries.push(resolve.resolve(dirname(serverEntry), "./chunks/wasm.mjs"));
+        wasmEntries.push(resolve.resolve(dirname(serverEntry), "./chunks/_/wasm.mjs"));
+        wasmEntries.push(resolve.resolve(dirname(serverEntry), "./chunks/index_bg.mjs"));
       }
       const resvgHash = await resolveFilePathSha1("@resvg/resvg-wasm/index_bg.wasm");
       const yogaHash = await resolveFilePathSha1("yoga-wasm-web/dist/yoga.wasm");
@@ -325,8 +326,27 @@ function setupDevToolsUI(options, resolve, nuxt = useNuxt()) {
       };
     });
   }
+  const useNitro = new Promise((resolve2) => {
+    nuxt.hooks.hook("nitro:init", resolve2);
+  });
   onDevToolsInitialized(async () => {
-    const rpc = extendServerRpc("nuxt-og-image", {});
+    const rpc = extendServerRpc("nuxt-og-image", {
+      async ejectCommunityTemplate(path) {
+        const [dirName, componentName] = path.split("/");
+        const dir = resolve(nuxt.options.rootDir, "components", dirName);
+        if (!existsSync(dir)) {
+          mkdirSync(dir);
+        }
+        const newPath = resolve(dir, componentName);
+        const templatePath = resolve(`./runtime/app/components/Templates/Community/${componentName}`);
+        const template = (await readFile(templatePath, "utf-8")).replace("{{ title }}", `{{ title }} - Ejected!`);
+        await writeFile(newPath, template, { encoding: "utf-8" });
+        await updateTemplates({ filter: (t) => t.filename.includes("nuxt-og-image/components.mjs") });
+        const nitro = await useNitro;
+        await nitro.hooks.callHook("rollup:reload");
+        return newPath;
+      }
+    });
     nuxt.hook("builder:watch", (e, path) => {
       path = relative(nuxt.options.srcDir, resolve(nuxt.options.srcDir, path));
       if ((e === "change" || e.includes("link")) && (path.startsWith("pages") || path.startsWith("content"))) {
@@ -526,6 +546,10 @@ function normaliseFontInput(fonts) {
   });
 }
 
+function isProviderEnabledForEnv(provider, nuxt, config) {
+  return nuxt.options.dev && config.compatibility?.dev?.[provider] !== false || !nuxt.options.dev && (config.compatibility?.runtime?.[provider] !== false || config.compatibility?.prerender?.[provider] !== false);
+}
+const defaultComponentDirs = ["OgImage", "og-image", "OgImageTemplate"];
 const module = defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
@@ -548,14 +572,15 @@ const module = defineNuxtModule({
         // default is to cache the image for 3 day (72 hours)
         cacheMaxAgeSeconds: 60 * 60 * 24 * 3
       },
-      componentDirs: ["OgImage", "OgImageTemplate"],
+      componentDirs: defaultComponentDirs,
       fonts: [],
       runtimeCacheStorage: true,
       debug: isDevelopment
     };
   },
   async setup(config, nuxt) {
-    const { resolve } = createResolver(import.meta.url);
+    const resolver = createResolver(import.meta.url);
+    const { resolve } = resolver;
     const { version } = await readPackageJSON(resolve("../package.json"));
     logger.level = config.debug || nuxt.options.debug ? 4 : 3;
     if (config.enabled === false) {
@@ -587,68 +612,152 @@ const module = defineNuxtModule({
         nuxt.options.alias["#og-image-cache"] = resolve("./runtime/server/og-image/cache/mock");
       }
     }
-    let isUsingSharp = false;
-    const userConfiguredExtension = config.defaults.extension;
-    const hasConfiguredJpegs = userConfiguredExtension && ["jpeg", "jpg"].includes(userConfiguredExtension);
-    if (!!config.sharpOptions || hasConfiguredJpegs && config.defaults.renderer !== "chromium") {
-      isUsingSharp = true;
-      const hasSharpDependency = await hasResolvableDependency("sharp");
-      if (hasSharpDependency && !targetCompatibility.sharp) {
-        logger.warn(`Rendering JPEGs requires sharp which does not work with ${preset}. Images will be rendered as PNG at runtime.`);
+    const basePath = config.zeroRuntime ? "./runtime/server/routes/__zero-runtime" : "./runtime/server/routes";
+    let publicDirAbs = nuxt.options.dir.public;
+    if (!isAbsolute(publicDirAbs)) {
+      publicDirAbs = publicDirAbs in nuxt.options.alias ? nuxt.options.alias[publicDirAbs] : resolve(nuxt.options.rootDir, publicDirAbs);
+    }
+    if (isProviderEnabledForEnv("satori", nuxt, config)) {
+      let isUsingSharp = false;
+      if (isProviderEnabledForEnv("sharp", nuxt, config)) {
+        const userConfiguredExtension = config.defaults.extension;
+        const hasConfiguredJpegs = userConfiguredExtension && ["jpeg", "jpg"].includes(userConfiguredExtension);
+        if (!!config.sharpOptions || hasConfiguredJpegs && config.defaults.renderer !== "chromium") {
+          isUsingSharp = true;
+          const hasSharpDependency = await hasResolvableDependency("sharp");
+          if (hasSharpDependency && !targetCompatibility.sharp) {
+            logger.warn(`Rendering JPEGs requires sharp which does not work with ${preset}. Images will be rendered as PNG at runtime.`);
+            config.compatibility = defu(config.compatibility, {
+              runtime: { sharp: false }
+            });
+          } else if (!hasSharpDependency) {
+            logger.warn("You have enabled `JPEG` images. These require the `sharp` dependency which is missing, installing it for you.");
+            await ensureDependencies(["sharp"]);
+            logger.warn("Support for `sharp` is limited so check the compatibility guide.");
+          }
+        }
+      }
+      if (!isUsingSharp) {
         config.compatibility = defu(config.compatibility, {
-          runtime: { sharp: false }
+          runtime: { sharp: false },
+          dev: { sharp: false },
+          prerender: { sharp: false }
         });
-      } else if (!hasSharpDependency) {
-        logger.warn("You have enabled `JPEG` images. These require the `sharp` dependency which is missing, installing it for you.");
-        await ensureDependencies(["sharp"]);
-        logger.warn("Support for `sharp` is limited so check the compatibility guide.");
       }
-    }
-    if (!isUsingSharp) {
-      config.compatibility = defu(config.compatibility, {
-        runtime: { sharp: false },
-        dev: { sharp: false },
-        prerender: { sharp: false }
+      if (isProviderEnabledForEnv("resvg", nuxt, config)) {
+        await import('@resvg/resvg-js').catch(() => {
+          logger.warn("ReSVG is missing dependencies for environment. Falling back to WASM version, this may slow down PNG rendering.");
+          config.compatibility = defu(config.compatibility, {
+            dev: { resvg: "wasm-fs" },
+            prerender: { resvg: "wasm-fs" }
+          });
+          if (targetCompatibility.resvg === "node") {
+            config.compatibility = defu(config.compatibility, {
+              runtime: { resvg: "wasm" }
+            });
+          }
+        });
+      }
+      if (!config.fonts.length) {
+        config.fonts = [
+          {
+            name: "Inter",
+            weight: 400,
+            path: resolve("./runtime/assets/Inter-normal-400.ttf.base64"),
+            absolutePath: true
+          },
+          {
+            name: "Inter",
+            weight: 700,
+            path: resolve("./runtime/assets/Inter-normal-700.ttf.base64"),
+            absolutePath: true
+          }
+        ];
+      }
+      const serverFontsDir = resolve(nuxt.options.buildDir, "cache", `nuxt-og-image@${version}`, "_fonts");
+      const fontStorage = createStorage({
+        driver: fsDriver({
+          base: serverFontsDir
+        })
+      });
+      config.fonts = (await Promise.all(normaliseFontInput(config.fonts).map(async (f) => {
+        const fontKey = `${f.name}:${f.style}:${f.weight}`;
+        const fontFileBase = fontKey.replaceAll(":", "-");
+        if (!f.key && !f.path) {
+          if (preset === "stackblitz") {
+            logger.warn(`The ${fontKey} font was skipped because remote fonts are not available in StackBlitz, please use a local font.`);
+            return false;
+          }
+          if (await downloadFont(f, fontStorage, config.googleFontMirror)) {
+            f.key = `nuxt-og-image:fonts:${fontFileBase}.ttf.base64`;
+          } else {
+            logger.warn(`Failed to download font ${fontKey}. You may be offline or behind a firewall blocking Google. Consider setting \`googleFontMirror: true\`.`);
+            return false;
+          }
+        } else if (f.path) {
+          const extension = basename(f.path.replace(".base64", "")).split(".").pop();
+          if (!["woff", "ttf", "otf"].includes(extension)) {
+            logger.warn(`The ${fontKey} font was skipped because the file extension ${extension} is not supported. Only woff, ttf and otf are supported.`);
+            return false;
+          }
+          if (!f.absolutePath)
+            f.path = resolve(publicDirAbs, withoutLeadingSlash(f.path));
+          if (!existsSync(f.path)) {
+            logger.warn(`The ${fontKey} font was skipped because the file does not exist at path ${f.path}.`);
+            return false;
+          }
+          const fontData = await readFile(f.path, f.path.endsWith(".base64") ? "utf-8" : "base64");
+          f.key = `nuxt-og-image:fonts:${fontFileBase}.${extension}.base64`;
+          await fontStorage.setItem(`${fontFileBase}.${extension}.base64`, fontData);
+          delete f.path;
+          delete f.absolutePath;
+        }
+        return f;
+      }))).filter(Boolean);
+      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 });
+      }
+      addServerHandler({
+        lazy: true,
+        route: "/__og-image__/font/**",
+        handler: resolve(`${basePath}/font`)
       });
     }
-    const hasChromeLocally = checkLocalChrome();
-    const hasPlaywrightDependency = await hasResolvableDependency("playwright");
-    const chromeCompatibilityFlags = {
-      prerender: config.compatibility?.prerender?.chromium,
-      dev: config.compatibility?.dev?.chromium,
-      runtime: config.compatibility?.runtime?.chromium
-    };
-    const chromiumBinding = {
-      dev: null,
-      prerender: null,
-      runtime: null
-    };
-    if (nuxt.options.dev) {
-      if (isUndefinedOrTruthy(chromeCompatibilityFlags.dev))
-        chromiumBinding.dev = hasChromeLocally ? "chrome-launcher" : hasPlaywrightDependency ? "playwright" : "on-demand";
-    } else {
-      if (isUndefinedOrTruthy(chromeCompatibilityFlags.prerender))
-        chromiumBinding.prerender = hasChromeLocally ? "chrome-launcher" : hasPlaywrightDependency ? "playwright" : "on-demand";
-      if (isUndefinedOrTruthy(chromeCompatibilityFlags.runtime))
-        chromiumBinding.runtime = hasPlaywrightDependency ? "playwright" : null;
-    }
-    config.compatibility = defu(config.compatibility, {
-      runtime: { chromium: chromiumBinding.runtime },
-      dev: { chromium: chromiumBinding.dev },
-      prerender: { chromium: chromiumBinding.prerender }
-    });
-    await import('@resvg/resvg-js').catch(() => {
-      logger.warn("ReSVG is missing dependencies for environment. Falling back to WASM version, this may slow down PNG rendering.");
+    if (isProviderEnabledForEnv("chromium", nuxt, config)) {
+      const hasChromeLocally = checkLocalChrome();
+      const hasPlaywrightDependency = await hasResolvableDependency("playwright");
+      const chromeCompatibilityFlags = {
+        prerender: config.compatibility?.prerender?.chromium,
+        dev: config.compatibility?.dev?.chromium,
+        runtime: config.compatibility?.runtime?.chromium
+      };
+      const chromiumBinding = {
+        dev: null,
+        prerender: null,
+        runtime: null
+      };
+      if (nuxt.options.dev) {
+        if (isUndefinedOrTruthy(chromeCompatibilityFlags.dev))
+          chromiumBinding.dev = hasChromeLocally ? "chrome-launcher" : hasPlaywrightDependency ? "playwright" : "on-demand";
+      } else {
+        if (isUndefinedOrTruthy(chromeCompatibilityFlags.prerender))
+          chromiumBinding.prerender = hasChromeLocally ? "chrome-launcher" : hasPlaywrightDependency ? "playwright" : "on-demand";
+        if (isUndefinedOrTruthy(chromeCompatibilityFlags.runtime))
+          chromiumBinding.runtime = hasPlaywrightDependency ? "playwright" : null;
+      }
       config.compatibility = defu(config.compatibility, {
-        dev: { resvg: "wasm-fs" },
-        prerender: { resvg: "wasm-fs" }
+        runtime: { chromium: chromiumBinding.runtime },
+        dev: { chromium: chromiumBinding.dev },
+        prerender: { chromium: chromiumBinding.prerender }
       });
-      if (targetCompatibility.resvg === "node") {
-        config.compatibility = defu(config.compatibility, {
-          runtime: { resvg: "wasm" }
-        });
-      }
-    });
+    }
     await installNuxtSiteConfig();
     const usingNuxtContent = hasNuxtModule("@nuxt/content");
     const isNuxtContentV3 = usingNuxtContent && await hasNuxtModuleCompatibility("@nuxt/content", "^3");
@@ -660,73 +769,7 @@ const module = defineNuxtModule({
     } else if (isNuxtContentV2) {
       addServerPlugin(resolve("./runtime/server/plugins/nuxt-content-v2"));
     }
-    if (!config.fonts.length) {
-      config.fonts = [
-        { name: "Inter", weight: 400, path: resolve("./runtime/assets/Inter-normal-400.ttf.base64"), absolutePath: true },
-        { name: "Inter", weight: 700, path: resolve("./runtime/assets/Inter-normal-700.ttf.base64"), absolutePath: true }
-      ];
-    }
-    let publicDirAbs = nuxt.options.dir.public;
-    if (!isAbsolute(publicDirAbs)) {
-      publicDirAbs = publicDirAbs in nuxt.options.alias ? nuxt.options.alias[publicDirAbs] : resolve(nuxt.options.rootDir, publicDirAbs);
-    }
-    const serverFontsDir = resolve(nuxt.options.buildDir, "cache", `nuxt-og-image@${version}`, "_fonts");
-    const fontStorage = createStorage({
-      driver: fsDriver({
-        base: serverFontsDir
-      })
-    });
-    config.fonts = (await Promise.all(normaliseFontInput(config.fonts).map(async (f) => {
-      const fontKey = `${f.name}:${f.style}:${f.weight}`;
-      const fontFileBase = fontKey.replaceAll(":", "-");
-      if (!f.key && !f.path) {
-        if (preset === "stackblitz") {
-          logger.warn(`The ${fontKey} font was skipped because remote fonts are not available in StackBlitz, please use a local font.`);
-          return false;
-        }
-        if (await downloadFont(f, fontStorage, config.googleFontMirror)) {
-          f.key = `nuxt-og-image:fonts:${fontFileBase}.ttf.base64`;
-        } else {
-          logger.warn(`Failed to download font ${fontKey}. You may be offline or behind a firewall blocking Google. Consider setting \`googleFontMirror: true\`.`);
-          return false;
-        }
-      } else if (f.path) {
-        const extension = basename(f.path.replace(".base64", "")).split(".").pop();
-        if (!["woff", "ttf", "otf"].includes(extension)) {
-          logger.warn(`The ${fontKey} font was skipped because the file extension ${extension} is not supported. Only woff, ttf and otf are supported.`);
-          return false;
-        }
-        if (!f.absolutePath)
-          f.path = resolve(publicDirAbs, withoutLeadingSlash(f.path));
-        if (!existsSync(f.path)) {
-          logger.warn(`The ${fontKey} font was skipped because the file does not exist at path ${f.path}.`);
-          return false;
-        }
-        const fontData = await readFile(f.path, f.path.endsWith(".base64") ? "utf-8" : "base64");
-        f.key = `nuxt-og-image:fonts:${fontFileBase}.${extension}.base64`;
-        await fontStorage.setItem(`${fontFileBase}.${extension}.base64`, fontData);
-        delete f.path;
-        delete f.absolutePath;
-      }
-      return f;
-    }))).filter(Boolean);
-    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/server/routes/__zero-runtime" : "./runtime/server/routes";
-    addServerHandler({
-      lazy: true,
-      route: "/__og-image__/font/**",
-      handler: resolve(`${basePath}/font`)
-    });
     if (config.debug || nuxt.options.dev) {
       addServerHandler({
         lazy: true,
@@ -747,7 +790,18 @@ const module = defineNuxtModule({
     if (!nuxt.options.dev) {
       nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"] = [];
     }
-    ["defineOgImage", "defineOgImageComponent", "defineOgImageScreenshot"].forEach((name) => {
+    [
+      "defineOgImage",
+      "defineOgImageComponent",
+      { name: "defineOgImageScreenshot", enabled: isProviderEnabledForEnv("chromium", nuxt, config) }
+    ].forEach((name) => {
+      if (typeof name === "object") {
+        if (!name.enabled) {
+          addImports({ name: name.name, from: resolve(`./runtime/app/composables/mock`) });
+          return;
+        }
+        name = name.name;
+      }
       addImports({
         name,
         from: resolve(`./runtime/app/composables/${name}`)
@@ -777,6 +831,17 @@ const module = defineNuxtModule({
     const basePluginPath = `./runtime/app/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`) });
+    for (const componentDir of config.componentDirs) {
+      const path = resolve(nuxt.options.srcDir, "components", componentDir);
+      if (existsSync(path)) {
+        addComponentsDir({
+          path,
+          island: true
+        });
+      } else if (!defaultComponentDirs.includes(componentDir)) {
+        logger.warn(`The configured component directory \`./${relative$1(nuxt.options.rootDir, path)}\` does not exist. Skipping.`);
+      }
+    }
     const ogImageComponentCtx = { components: [] };
     nuxt.hook("components:extend", (components) => {
       ogImageComponentCtx.components = [];
@@ -905,20 +970,23 @@ declare module '#og-image/unocss-config' {
         // @ts-expect-error runtime type
         isNuxtContentDocumentDriven: config.strictNuxtContentPaths || !!nuxt.options.content?.documentDriven
       };
+      if (nuxt.options.dev) {
+        runtimeConfig.componentDirs = config.componentDirs;
+      }
       nuxt.hooks.callHook("nuxt-og-image:runtime-config", runtimeConfig);
       nuxt.options.runtimeConfig["nuxt-og-image"] = runtimeConfig;
     });
     if (nuxt.options.dev) {
-      setupDevHandler(config, resolve);
+      setupDevHandler(config, resolver);
       setupDevToolsUI(config, resolve);
     } else if (isNuxtGenerate()) {
-      setupGenerateHandler(config, resolve);
+      setupGenerateHandler(config, resolver);
     } else if (nuxt.options.build) {
-      await setupBuildHandler(config, resolve);
+      await setupBuildHandler(config, resolver);
     }
     if (nuxt.options.build)
       addServerPlugin(resolve("./runtime/server/plugins/prerender"));
-    setupPrerenderHandler(config, resolve);
+    setupPrerenderHandler(config, resolver);
   }
 });
 

package/dist/runtime/app/composables/defineOgImage.js

@@ -1,5 +1,3 @@
-import { injectHead } from "#imports";
-import { TemplateParamsPlugin } from "@unhead/vue/plugins";
 import { defu } from "defu";
 import { appendHeader } from "h3";
 import { createError, useNuxtApp, useRequestEvent, useRoute, useState } from "nuxt/app";
@@ -10,8 +8,6 @@ import { createOgImageMeta, normaliseOptions } from "../utils.js";
 export function defineOgImage(_options = {}) {
   const nuxtApp = useNuxtApp();
   const route = useRoute();
-  const head = injectHead();
-  head.use(TemplateParamsPlugin);
   const basePath = route.path || "/";
   if (nuxtApp.payload.path === basePath) {
     const state = import.meta.dev ? useState(`og-image:ssr-exists:${basePath}`, () => false) : ref(false);

package/dist/runtime/app/composables/mock.js

@@ -1,6 +1,20 @@
+import { useRuntimeConfig } from "nuxt/app";
 export function defineOgImage(_options = {}) {
+  if (import.meta.dev) {
+    console.warn("`defineOgImage()` is skipped as the OG Image module is not enabled.");
+  }
 }
 export function defineOgImageComponent(component, props = {}, options = {}) {
+  if (import.meta.dev) {
+    console.warn("`defineOgImageComponent()` is skipped as the OG Image module is not enabled.");
+  }
 }
 export function defineOgImageScreenshot(options = {}) {
+  if (import.meta.dev) {
+    if (useRuntimeConfig()["nuxt-og-image"]) {
+      console.warn("`defineOgImageScreenshot()` is skipped as the `chromium` compatibility is disabled.");
+    } else {
+      console.warn("`defineOgImageScreenshot()` is skipped as the OG Image module is not enabled.");
+    }
+  }
 }

package/dist/runtime/app/utils/plugins.js

@@ -1,4 +1,5 @@
 import { useRequestEvent, withSiteUrl } from "#imports";
+import { TemplateParamsPlugin } from "@unhead/vue/plugins";
 import { defu } from "defu";
 import { parse, stringify } from "devalue";
 import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
@@ -14,6 +15,7 @@ export function ogImageCanonicalUrls(nuxtApp) {
     const path = parseURL(e.path).pathname;
     if (isInternalRoute(path))
       return;
+    ssrContext?.head.use(TemplateParamsPlugin);
     ssrContext?.head.use({
       key: "nuxt-og-image:overrides-and-canonical-urls",
       hooks: {

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

@@ -99,10 +99,10 @@ export async function resolveContext(e) {
       renderer = await useChromiumRenderer();
       break;
   }
-  if (!renderer || renderer.__unenv__) {
+  if (!renderer || renderer.__mock__) {
     throw createError({
       statusCode: 400,
-      statusMessage: `[Nuxt OG Image] Renderer ${options.renderer} is missing.`
+      statusMessage: `[Nuxt OG Image] Renderer ${options.renderer} is not enabled.`
     });
   }
   const unocss = await createGenerator({ theme }, {
@@ -133,11 +133,9 @@ function getPayloadFromHtml(html) {
 }
 export function extractAndNormaliseOgImageOptions(html) {
   const _payload = getPayloadFromHtml(html);
-  if (!_payload)
-    return false;
   let options = false;
   try {
-    const payload2 = parse(_payload);
+    const payload2 = parse(_payload || "{}");
     Object.entries(payload2).forEach(([key, value]) => {
       if (!value && value !== 0)
         delete payload2[key];
@@ -147,9 +145,7 @@ export function extractAndNormaliseOgImageOptions(html) {
     if (import.meta.dev)
       console.warn("Failed to parse #nuxt-og-image-options", e, options);
   }
-  if (!options)
-    return false;
-  if (typeof options.props?.description === "undefined") {
+  if (options && typeof options?.props?.description === "undefined") {
     const description = html.match(/<meta[^>]+name="description"[^>]*>/)?.[0];
     if (description) {
       const [, content] = description.match(/content="([^"]+)"/) || [];
@@ -157,7 +153,7 @@ export function extractAndNormaliseOgImageOptions(html) {
         options.props.description = content;
     }
   }
-  const payload = decodeObjectHtmlEntities(options);
+  const payload = decodeObjectHtmlEntities(options || {});
   if (import.meta.dev) {
     const socialPreview = {};
     const socialMetaTags = html.match(/<meta[^>]+(property|name)="(twitter|og):([^"]+)"[^>]*>/g);
@@ -235,6 +231,20 @@ async function fetchPathHtmlAndExtractOptions(e, path, key) {
     });
   }
   if (!_payload) {
+    const payload2 = extractAndNormaliseOgImageOptions(html);
+    if (payload2?.socialPreview?.og?.image) {
+      const p = {
+        custom: true,
+        url: payload2.socialPreview.og.image
+      };
+      if (payload2.socialPreview.og.image["image:width"]) {
+        p.width = payload2.socialPreview.og.image["image:width"];
+      }
+      if (payload2.socialPreview.og.image["image:height"]) {
+        p.height = payload2.socialPreview.og.image["image:height"];
+      }
+      return p;
+    }
     return createError({
       statusCode: 500,
       statusMessage: `[Nuxt OG Image] HTML response from ${path} is missing the #nuxt-og-image-options script tag. Make sure you have defined an og image for this page.`

package/dist/runtime/server/og-image/satori/plugins/nuxt-icon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../../../../types").SatoriTransformer | import("../../../../types").SatoriTransformer[];
+export default _default;

package/dist/runtime/server/og-image/satori/plugins/nuxt-icon.js

@@ -0,0 +1,20 @@
+import { logger } from "../../../util/logger.js";
+import { defineSatoriTransformer } from "../utils.js";
+export default defineSatoriTransformer([
+  // need to make sure parent div has flex for the emoji to render inline
+  {
+    filter: (node) => node.type === "span" && node.props?.class?.includes("iconify"),
+    transform: (node, e) => {
+      if (import.meta.dev) {
+        logger.warn(`When using the Nuxt Icon components in \`${e.options.component}\` you must provide \`mode="svg"\` to ensure correct rendering.`);
+      }
+    }
+  },
+  // need to make sure parent div has flex for the emoji to render inline
+  {
+    filter: (node) => node.type === "svg" && node.props?.class?.includes("iconify"),
+    transform: (node) => {
+      node.props.class = String(node.props.class).split(" ").filter((c) => !c.startsWith("iconify")).join(" ");
+    }
+  }
+]);

package/dist/runtime/server/og-image/satori/transforms/inlineCss.js

@@ -31,7 +31,7 @@ export async function applyInlineCss(ctx, island) {
   if (!css.trim().length)
     return false;
   const cssInline = await useCssInline();
-  if (!cssInline || cssInline?.__unenv__) {
+  if (!cssInline || cssInline?.__mock__) {
     if (componentInlineStyles.length) {
       const logger = createConsola().withTag("Nuxt OG Image");
       logger.warn("To have inline styles applied you need to install either the `@css-inline/css-inline` or `@css-inline/css-inline-wasm` package.");

package/dist/runtime/server/og-image/satori/vnodes.js

@@ -6,6 +6,7 @@ import emojis from "./plugins/emojis.js";
 import encoding from "./plugins/encoding.js";
 import flex from "./plugins/flex.js";
 import imageSrc from "./plugins/imageSrc.js";
+import nuxtIcon from "./plugins/nuxt-icon.js";
 import unocss from "./plugins/unocss.js";
 import { applyEmojis } from "./transforms/emojis.js";
 import { applyInlineCss } from "./transforms/inlineCss.js";
@@ -28,7 +29,8 @@ export async function createVNodes(ctx) {
     emojis,
     classes,
     flex,
-    encoding
+    encoding,
+    nuxtIcon
   ]);
   await Promise.all(walkSatoriTree(ctx, satoriTree, [
     unocss,