nuxt-og-image 3.0.0-rc.8 → 3.0.0

package/dist/module.mjs

@@ -1,20 +1,27 @@
 import * as fs from 'node:fs';
 import { existsSync } from 'node:fs';
-import { useNuxt, addTemplate, loadNuxtModuleInstance, createResolver, resolvePath, defineNuxtModule, useLogger, tryResolveModule, hasNuxtModule, addServerPlugin, addServerHandler, addImports, addComponentsDir, addComponent, addPlugin } from '@nuxt/kit';
+import { readFile, writeFile } from 'node:fs/promises';
+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, isDevelopment, isCI } from 'std-env';
 import { hash } from 'ohash';
-import { relative, dirname } from 'pathe';
-import { defu } from 'defu';
-import { Launcher } from 'chrome-launcher';
+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 { createHash } from 'node:crypto';
 import { ensureDependencyInstalled } from 'nypm';
+import { colorize } from 'consola/utils';
+import { relative } from 'node:path';
 import { onDevToolsInitialized, extendServerRpc } from '@nuxt/devtools-kit';
-import { readFile, writeFile } from 'node:fs/promises';
-import { createHash } from 'node:crypto';
-import { execa } from 'execa';
-import terminate from 'terminate';
-
-const version = "3.0.0-rc.8";
+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';
 
 const autodetectableProviders = {
   azure_static: "azure",
@@ -31,7 +38,8 @@ const autodetectableStaticProviders = {
 };
 const NodeRuntime = {
   // node-server runtime
-  "chromium": "node",
+  "chromium": "on-demand",
+  // this gets changed build start
   "css-inline": "node",
   "resvg": "node",
   "satori": "node",
@@ -45,33 +53,36 @@ const cloudflare = {
   "satori": "node",
   "sharp": false,
   "wasm": {
-    esmImport: true
+    esmImport: true,
+    lazy: true
   }
 };
 const awsLambda = {
   "chromium": false,
-  "css-inline": "node",
+  "css-inline": "wasm",
   "resvg": "node",
   "satori": "node",
   "sharp": false
   // 0.33.x has issues
 };
+const WebContainer = {
+  "chromium": false,
+  "css-inline": "wasm-fs",
+  "resvg": "wasm-fs",
+  "satori": "wasm-fs",
+  "sharp": false
+};
 const RuntimeCompatibility = {
   "nitro-dev": NodeRuntime,
   "nitro-prerender": NodeRuntime,
   "node-server": NodeRuntime,
-  "stackblitz": {
-    "chromium": false,
-    "css-inline": false,
-    "resvg": "wasm-fs",
-    "satori": "wasm-fs",
-    "sharp": false
-  },
+  "stackblitz": WebContainer,
+  "codesandbox": WebContainer,
   "aws-lambda": awsLambda,
   "netlify": awsLambda,
   "netlify-edge": {
     "chromium": false,
-    "css-inline": false,
+    "css-inline": "wasm",
     "resvg": "wasm",
     "satori": "node",
     "sharp": false,
@@ -87,28 +98,36 @@ const RuntimeCompatibility = {
   "vercel-edge": {
     "chromium": false,
     "css-inline": false,
+    // size constraint (2mb is max)
     "resvg": "wasm",
     "satori": "node",
     "sharp": false,
     "wasm": {
       // lowers workers kb size
-      esmImport: true
+      esmImport: true,
+      lazy: true
     }
   },
   "cloudflare-pages": cloudflare,
-  "cloudflare": cloudflare
+  "cloudflare": cloudflare,
+  "cloudflare-module": cloudflare
 };
 function detectTarget(options = {}) {
   return options?.static ? autodetectableStaticProviders[provider] : autodetectableProviders[provider];
 }
 function resolveNitroPreset(nitroConfig) {
-  if (provider === "stackblitz")
-    return "stackblitz";
+  if (provider === "stackblitz" || provider === "codesandbox")
+    return provider;
+  const nuxt = useNuxt();
+  if (nuxt.options.dev)
+    return "nitro-dev";
+  if (nuxt.options._generate)
+    return "nitro-prerender";
   let preset;
   if (nitroConfig && nitroConfig?.preset)
     preset = nitroConfig.preset;
   if (!preset)
-    preset = env.NITRO_PRESET || detectTarget() || "node-server";
+    preset = env.NITRO_PRESET || env.SERVER_PRESET || detectTarget() || "node-server";
   return preset.replace("_", "-");
 }
 function getPresetNitroPresetCompatibility(target) {
@@ -117,22 +136,31 @@ function getPresetNitroPresetCompatibility(target) {
     compatibility = RuntimeCompatibility["nitro-dev"];
   return compatibility;
 }
-function applyNitroPresetCompatibility(nitroConfig, options) {
+async function applyNitroPresetCompatibility(nitroConfig, options) {
   const target = resolveNitroPreset(nitroConfig);
   const compatibility = getPresetNitroPresetCompatibility(target);
+  const hasCssInlineNode = !!await tryResolveModule("@css-inline/css-inline");
+  const hasCssInlineWasm = !!await tryResolveModule("@css-inline/css-inline-wasm");
   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["#nuxt-og-image/renderers/satori"] = satoriEnabled ? resolve("./runtime/core/renderers/satori") : "unenv/runtime/mock/empty";
-  nitroConfig.alias["#nuxt-og-image/renderers/chromium"] = chromiumEnabled ? resolve("./runtime/core/renderers/chromium") : "unenv/runtime/mock/empty";
+  nitroConfig.alias["#nuxt-og-image/renderers/satori"] = satoriEnabled ? resolve("./runtime/nitro/og-image/satori/renderer") : "unenv/runtime/mock/empty";
+  nitroConfig.alias["#nuxt-og-image/renderers/chromium"] = chromiumEnabled ? resolve("./runtime/nitro/og-image/chromium/renderer") : "unenv/runtime/mock/empty";
   const resolvedCompatibility = {};
   function applyBinding(key) {
     let binding = options.compatibility?.[key];
     if (typeof binding === "undefined")
       binding = compatibility[key];
+    if (key === "chromium" && binding === "node")
+      binding = "playwright";
+    if (key === "css-inline" && typeof binding === "string") {
+      if (binding === "node" && !hasCssInlineNode || ["wasm", "wasm-fs"].includes(binding) && !hasCssInlineWasm) {
+        binding = false;
+      }
+    }
     resolvedCompatibility[key] = binding;
     return {
-      [`#nuxt-og-image/bindings/${key}`]: binding === false ? "unenv/runtime/mock/empty" : resolve(`./runtime/core/bindings/${key}/${binding}`)
+      [`#nuxt-og-image/bindings/${key}`]: binding === false ? "unenv/runtime/mock/empty" : resolve(`./runtime/nitro/og-image/bindings/${key}/${binding}`)
     };
   }
   nitroConfig.alias = defu(
@@ -168,45 +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 {}
-`;
-    }
+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("prepare:types", ({ references }) => {
-    references.push({ path: resolve(nuxt.options.buildDir, `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";
@@ -237,6 +286,7 @@ function setupDevToolsUI(options, resolve, nuxt = useNuxt()) {
   onDevToolsInitialized(async () => {
     const rpc = extendServerRpc("nuxt-og-image", {});
     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")) {
         rpc.broadcast.refreshRouteData(path).catch(() => {
         });
@@ -269,15 +319,9 @@ function setupDevToolsUI(options, resolve, nuxt = useNuxt()) {
   });
 }
 
-function setupDevHandler(options, resolve, nuxt = useNuxt()) {
-  nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
-    applyNitroPresetCompatibility(nitroConfig, { compatibility: options.compatibility?.dev, resolve });
-  });
-}
-
 function setupGenerateHandler(options, resolve, nuxt = useNuxt()) {
   nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
-    applyNitroPresetCompatibility(nitroConfig, {
+    await applyNitroPresetCompatibility(nitroConfig, {
       compatibility: {
         "chromium": false,
         "satori": false,
@@ -298,69 +342,132 @@ function setupGenerateHandler(options, resolve, nuxt = useNuxt()) {
 function setupPrerenderHandler(options, resolve, nuxt = useNuxt()) {
   nuxt.hooks.hook("nitro:init", async (nitro) => {
     nitro.hooks.hook("prerender:config", async (nitroConfig) => {
-      nitroConfig.serverAssets = nitroConfig.serverAssets || [];
-      nitroConfig.serverAssets.push({ baseName: "nuxt-og-image:fonts", dir: resolve("./runtime/server/assets") });
-      applyNitroPresetCompatibility(nitroConfig, { compatibility: options.compatibility.prerender, resolve });
+      await applyNitroPresetCompatibility(nitroConfig, { compatibility: options.compatibility?.prerender, resolve });
       nitroConfig.wasm = nitroConfig.wasm || {};
       nitroConfig.wasm.esmImport = false;
       const prerenderingPages = (nuxt.options.nitro.prerender?.routes || []).some((r) => r && (!r.includes(".") || r.includes("*")));
-      prerenderingPages && assertSiteConfig("nuxt-og-image", {
-        url: "OG Image tags are required to be absolute URLs."
-      }, {
-        throwError: false
-      });
+      if (prerenderingPages) {
+        assertSiteConfig("nuxt-og-image", {
+          url: "OG Image tags are required to be absolute URLs."
+        }, {
+          throwError: false
+        });
+      }
     });
   });
 }
 
-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) => {
-    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");
-      if (target === "cloudflare-pages")
-        serverEntry = resolve(dirname(serverEntry), "./chunks/wasm.mjs");
-      const contents = await readFile(serverEntry, "utf-8");
-      const resvgHash = sha1(await readFile(await resolvePath("@resvg/resvg-wasm/index_bg.wasm")));
-      const yogaHash = sha1(await readFile(await resolvePath("yoga-wasm-web/dist/yoga.wasm")));
-      const postfix = target === "vercel-edge" ? "?module" : "";
-      const path = target === "cloudflare-pages" ? `../wasm/` : `./wasm/`;
-      await writeFile(serverEntry, contents.replaceAll('"@resvg/resvg-wasm/index_bg.wasm"', `"${path}index_bg-${resvgHash}.wasm${postfix}"`).replaceAll('"yoga-wasm-web/dist/yoga.wasm"', `"${path}yoga-${yogaHash}.wasm${postfix}"`), { encoding: "utf-8" });
-    });
-  });
+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;
 }
-function sha1(source) {
-  return createHash("sha1").update(source).digest("hex").slice(0, 16);
+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]}`);
+        }
+      }
+      if (s.hasChanged()) {
+        return {
+          code: s.toString(),
+          map: s.generateMap({ hires: true })
+        };
+      }
+    }
+  };
+});
 
-async function ensureChromium(logger) {
-  logger.info("Ensuring Chromium install for og:image generation...");
-  const installChromeProcess = execa("npx", ["playwright", "install", "chromium"], {
-    stdio: "inherit"
+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 {}
+`;
+    }
   });
-  installChromeProcess.stderr?.pipe(process.stderr);
-  await new Promise((resolve) => {
-    installChromeProcess.on("exit", (e) => {
-      if (e !== 0)
-        logger.error("Failed to install Playwright dependency for og:image generation. Trying anyway...");
-      resolve(true);
-    });
+  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`);
   });
-  installChromeProcess.pid && terminate(installChromeProcess.pid);
+}
+function isNuxtGenerate(nuxt = useNuxt()) {
+  return nuxt.options._generate || nuxt.options.nitro.static || nuxt.options.nitro.preset === "static";
 }
 
 function normaliseFontInput(fonts) {
@@ -370,7 +477,7 @@ function normaliseFontInput(fonts) {
       return {
         cacheKey: f,
         name,
-        weight: weight || "400",
+        weight: weight || 400,
         style: "normal",
         path: void 0
       };
@@ -384,11 +491,53 @@ function normaliseFontInput(fonts) {
   });
 }
 
+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 checkPlaywrightDependency() {
+  return !!await tryResolveModule("playwright");
+}
+async function downloadFont(font, storage, mirror) {
+  const { name, weight } = font;
+  const key = `${name}-${weight}.ttf.base64`;
+  if (await storage.hasItem(key))
+    return true;
+  const host = typeof mirror === "undefined" ? "fonts.googleapis.com" : mirror === true ? "fonts.font.im" : mirror;
+  const css = await $fetch(`https://${host}/css2?family=${name}:wght@${weight}`, {
+    timeout: 10 * 1e3,
+    // 10 second timeout
+    headers: {
+      // Make sure it returns TTF.
+      "User-Agent": "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1"
+    }
+  }).catch(() => {
+    return false;
+  });
+  if (!css)
+    return false;
+  const ttfResource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/);
+  if (ttfResource?.[1]) {
+    const buf = await $fetch(ttfResource[1], { baseURL: host, responseType: "arrayBuffer" });
+    const base64Font = Buffer.from(buf).toString("base64");
+    await storage.setItem(key, base64Font);
+    return true;
+  }
+  return false;
+}
+
 const module = defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
     compatibility: {
-      nuxt: "^3.8.2",
+      nuxt: ">=3.10.3",
       bridge: false
     },
     configKey: "ogImage"
@@ -400,6 +549,7 @@ const module = defineNuxtModule({
         emojis: "noto",
         renderer: "satori",
         component: "NuxtSeo",
+        extension: "png",
         width: 1200,
         height: 600,
         // default is to cache the image for 3 day (72 hours)
@@ -412,24 +562,44 @@ const module = defineNuxtModule({
     };
   },
   async setup(config, nuxt) {
-    const logger = useLogger("nuxt-og-image");
+    const { resolve } = createResolver(import.meta.url);
+    const { name, version } = await readPackageJSON(resolve("../package.json"));
+    const logger = useLogger(name);
     logger.level = config.debug || nuxt.options.debug ? 4 : 3;
     if (config.enabled === false) {
       logger.debug("The module is disabled, skipping setup.");
+      ["defineOgImage", "defineOgImageComponent", "defineOgImageScreenshot"].forEach((name2) => {
+        addImports({ name: name2, from: resolve(`./runtime/nuxt/composables/mock`) });
+      });
       return;
     }
     if (config.enabled && !nuxt.options.ssr) {
       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;
     }
-    const { resolve } = createResolver(import.meta.url);
+    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);
-    const hasSharpDependency = !!await tryResolveModule("sharp");
+    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);
-    config.defaults.extension = userConfiguredExtension || (hasSharpDependency && targetCompatibility.sharp ? "jpg" : "png");
-    if (hasConfiguredJpegs && config.defaults.renderer !== "chromium") {
+    if (!!config.sharpOptions || hasConfiguredJpegs && config.defaults.renderer !== "chromium") {
+      isUsingSharp = true;
+      const hasSharpDependency = !!await tryResolveModule("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, {
@@ -440,39 +610,40 @@ const module = defineNuxtModule({
         await ensureDependencies(["sharp"]);
         logger.warn("Support for `sharp` is limited so check the compatibility guide.");
       }
-    } else if (!hasSharpDependency) {
+    }
+    if (!isUsingSharp) {
       config.compatibility = defu(config.compatibility, {
         runtime: { sharp: false },
         dev: { sharp: false },
         prerender: { sharp: false }
       });
     }
-    let hasChromeLocally = false;
-    try {
-      hasChromeLocally = !!Launcher.getFirstInstallation();
-    } catch {
-    }
-    const isUndefinedOrTruthy = (v) => typeof v === "undefined" || v !== false;
-    if (isUndefinedOrTruthy(config.compatibility?.prerender?.chromium) && isUndefinedOrTruthy(config.compatibility?.runtime?.chromium)) {
-      if (isCI)
-        await ensureChromium(logger);
-      const hasPlaywrightDependency = !!await tryResolveModule("playwright");
-      if (hasChromeLocally) {
-        config.compatibility = defu(config.compatibility, {
-          runtime: { chromium: false },
-          dev: { chromium: "node" },
-          prerender: { chromium: "node" }
-        });
-      } else if (hasPlaywrightDependency && targetCompatibility.chromium) {
-        config.compatibility = defu(config.compatibility, {
-          runtime: { chromium: "node" },
-          dev: { chromium: "node" },
-          prerender: { chromium: "node" }
-        });
-      }
-    } else if (!hasChromeLocally && nuxt.options.dev && config.compatibility?.dev?.chromium === "node") {
-      await ensureChromium(logger);
+    const hasChromeLocally = checkLocalChrome();
+    const hasPlaywrightDependency = await checkPlaywrightDependency();
+    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.");
       config.compatibility = defu(config.compatibility, {
@@ -486,101 +657,137 @@ 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 = ["Inter:400", "Inter:700"];
-    if (preset === "cloudflare") {
-      config.fonts = config.fonts.filter((f) => {
-        if (typeof f !== "string" && f.path) {
-          logger.warn(`The ${f.name}:${f.weight} font was skipped because remote fonts are not available in Cloudflare Workers, please use a Google font.`);
+    }
+    if (!config.fonts.length) {
+      config.fonts = [
+        { name: "Inter", weight: 400, path: resolve("./runtime/assets/Inter-400.ttf.base64"), absolutePath: true },
+        { name: "Inter", weight: 700, path: resolve("./runtime/assets/Inter-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) => {
+      if (!f.key && !f.path) {
+        if (preset === "stackblitz") {
+          logger.warn(`The ${f.name}:${f.weight} font was skipped because remote fonts are not available in StackBlitz, please use a local font.`);
           return false;
         }
-        return true;
-      });
-    }
-    if (preset === "stackblitz") {
-      config.fonts = config.fonts.map((f) => {
-        if (typeof f === "string" && f.startsWith("Inter:")) {
-          const [_, weight] = f.split(":");
-          return {
-            name: "Inter",
-            weight,
-            // nuxt server assets
-            key: `nuxt-og-image:fonts:inter-latin-ext-${weight}-normal.woff`
-          };
+        if (await downloadFont(f, fontStorage, config.googleFontMirror)) {
+          f.key = `nuxt-og-image:fonts:${f.name}-${f.weight}.ttf.base64`;
+        } else {
+          logger.warn(`Failed to download font ${f.name}:${f.weight}. You may be offline or behind a firewall blocking Google. Consider setting \`googleFontMirror: true\`.`);
+          return false;
         }
-        if (typeof f === "string" || !f.path && !f.key) {
-          logger.warn(`The ${typeof f === "string" ? f : `${f.name}:${f.weight}`} font was skipped because remote fonts are not available in StackBlitz, please use a local font.`);
+      } else if (f.path) {
+        const extension = basename(f.path.replace(".base64", "")).split(".").pop();
+        if (!["woff", "ttf", "otf"].includes(extension)) {
+          logger.warn(`The ${f.name}:${f.weight} font was skipped because the file extension ${extension} is not supported. Only woff, ttf and otf are supported.`);
           return false;
         }
-        return f;
-      }).filter(Boolean);
-      nuxt.hooks.hook("nitro:config", (nitroConfig) => {
-        nitroConfig.serverAssets = nitroConfig.serverAssets || [];
-        nitroConfig.serverAssets.push({ baseName: "nuxt-og-image:fonts", dir: resolve("./runtime/server/assets") });
-      });
+        if (!f.absolutePath)
+          f.path = resolve(publicDirAbs, withoutLeadingSlash(f.path));
+        if (!existsSync(f.path)) {
+          logger.warn(`The ${f.name}:${f.weight} 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:${f.name}-${f.weight}.${extension}.base64`;
+        await fontStorage.setItem(`${f.name}-${f.weight}.${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/nitro/routes/__zero-runtime" : "./runtime/nitro/routes";
     addServerHandler({
       lazy: true,
       route: "/__og-image__/font/**",
-      handler: resolve("./runtime/server/routes/__og-image__/font-[name]-[weight].[extension]")
+      handler: resolve(`${basePath}/font`)
     });
     if (config.debug || nuxt.options.dev) {
       addServerHandler({
         lazy: true,
         route: "/__og-image__/debug.json",
-        handler: resolve("./runtime/server/routes/__og-image__/debug.json")
+        handler: resolve("./runtime/nitro/routes/debug.json")
       });
     }
     addServerHandler({
       lazy: true,
       route: "/__og-image__/image/**",
-      handler: resolve("./runtime/server/routes/__og-image__/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((name) => {
+    ["defineOgImage", "defineOgImageComponent", "defineOgImageScreenshot"].forEach((name2) => {
       addImports({
-        name,
-        from: resolve(`./runtime/composables/${name}`)
+        name: name2,
+        from: resolve(`./runtime/nuxt/composables/${name2}`)
       });
-      nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"].push(name);
-    });
-    await addComponentsDir({
-      path: resolve("./runtime/components/Templates/Community"),
-      island: true,
-      watch: true
+      nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"].push(name2);
     });
+    if (!config.zeroRuntime || nuxt.options.dev) {
+      await addComponentsDir({
+        path: resolve("./runtime/nuxt/components/Templates/Community"),
+        island: true
+        // watch: true,
+      });
+    }
     [
       // new
       "OgImage",
       "OgImageScreenshot"
-    ].forEach((name) => {
+    ].forEach((name2) => {
       addComponent({
-        name,
-        filePath: resolve(`./runtime/components/OgImage/${name}`),
+        name: name2,
+        filePath: resolve(`./runtime/nuxt/components/OgImage/${name2}`),
         ...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 = [];
       components.forEach((component) => {
         let valid = false;
         config.componentDirs.forEach((dir) => {
-          if (component.pascalName.startsWith(dir) || component.kebabName.startsWith(dir) || component.shortPath.includes(`/${dir}/`))
+          if (component.pascalName.startsWith(dir) || component.kebabName.startsWith(dir) || component.shortPath.includes(`/${dir}/`)) {
             valid = true;
+          }
         });
-        if (component.filePath.includes(resolve("./runtime/components/Templates")))
+        if (component.filePath.includes(resolve("./runtime/nuxt/components/Templates")))
           valid = true;
         if (valid && fs.existsSync(component.filePath)) {
           component.island = true;
           component.mode = "server";
           let category = "app";
-          if (component.filePath.includes(resolve("./runtime/components/Templates/Community")))
+          if (component.filePath.includes(resolve("./runtime/nuxt/components/Templates/Community")))
             category = "community";
           const componentFile = fs.readFileSync(component.filePath, "utf-8");
           const credits = componentFile.split("\n").find((line) => line.startsWith(" * @credits"))?.replace("* @credits", "").trim();
@@ -608,9 +815,9 @@ const module = defineNuxtModule({
     nuxt.options.nitro.virtual["#nuxt-og-image/component-names.mjs"] = () => {
       return `export const componentNames = ${JSON.stringify(ogImageComponentCtx.components)}`;
     };
-    let unoCssConfig = { theme: {} };
+    let unoCssConfig = {};
     nuxt.hook("tailwindcss:config", (tailwindConfig) => {
-      unoCssConfig = defu(tailwindConfig.theme.extend, { ...tailwindConfig.theme || {}, extend: void 0 });
+      unoCssConfig = defu(tailwindConfig.theme?.extend, { ...tailwindConfig.theme, extend: void 0 });
     });
     nuxt.hook("unocss:config", (_unoCssConfig) => {
       unoCssConfig = { ..._unoCssConfig.theme };
@@ -620,8 +827,11 @@ 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);
-        return `    '${component.pascalName}': typeof import('${relativeComponentPath}')['default']`;
+        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);
+        return `    '${name2}': typeof import('${relativeComponentPath}')['default']`;
       }).join("\n");
       return `
 declare module 'nitropack' {
@@ -642,11 +852,14 @@ declare module '#nuxt-og-image/components' {
 ${componentImports}
   }
 }
+declare module '#nuxt-og-image/unocss-config' {
+  export type theme = any
+}
 `;
     });
     const cacheEnabled = typeof config.runtimeCacheStorage !== "undefined" && config.runtimeCacheStorage !== false;
     const runtimeCacheStorage = typeof config.runtimeCacheStorage === "boolean" ? "default" : config.runtimeCacheStorage.driver;
-    let baseCacheKey = runtimeCacheStorage === "default" ? `/cache/nuxt-og-image@${version}` : `/nuxt-og-image/${version}`;
+    let baseCacheKey = runtimeCacheStorage === "default" ? `/cache/nuxt-og-image/${version}` : `/nuxt-og-image/${version}`;
     if (!cacheEnabled)
       baseCacheKey = false;
     if (!nuxt.options.dev && config.runtimeCacheStorage && typeof config.runtimeCacheStorage === "object") {
@@ -659,14 +872,6 @@ ${componentImports}
         nuxt.options.nitro = nuxt.options.nitro || {};
         nuxt.options.nitro.prerender = nuxt.options.nitro.prerender || {};
         nuxt.options.nitro.prerender.routes = nuxt.options.nitro.prerender.routes || [];
-        normalisedFonts.filter((f) => !f.path && !f.key).forEach((entry, key) => {
-          const { name, weight } = entry;
-          entry.path = `/__og-image__/font/${name.toLowerCase()}/${weight}.ttf`;
-          nuxt.options.nitro.prerender.routes.unshift(entry.path);
-          if (name === "Inter" && [400, 700].includes(Number(weight)))
-            entry.key = `nuxt-og-image:fonts:inter-latin-ext-${weight}-normal.woff`;
-          normalisedFonts[key] = entry;
-        });
       }
       const hasColorModeModule = hasNuxtModule("@nuxtjs/color-mode");
       const colorModeOptions = hasColorModeModule ? await getNuxtModuleOptions("@nuxtjs/color-mode") : {};
@@ -680,15 +885,18 @@ ${componentImports}
         // binding options
         satoriOptions: config.satoriOptions || {},
         resvgOptions: config.resvgOptions || {},
-        sharpOptions: config.sharpOptions || {},
+        sharpOptions: config.sharpOptions === true ? {} : config.sharpOptions || {},
+        publicStoragePath: `root${publicDirAbs.replace(nuxt.options.rootDir, "").replaceAll("/", ":")}`,
         defaults: config.defaults,
         debug: config.debug,
         // avoid adding credentials
         baseCacheKey,
         // convert the fonts to uniform type to fix ts issue
         fonts: normalisedFonts,
-        hasNuxtIcon: hasNuxtModule("nuxt-icon"),
-        colorPreference
+        hasNuxtIcon: hasNuxtModule("nuxt-icon") || hasNuxtModule("@nuxt/icon"),
+        colorPreference,
+        // @ts-expect-error runtime type
+        isNuxtContentDocumentDriven: config.strictNuxtContentPaths || !!nuxt.options.content?.documentDriven
       };
       nuxt.hooks.callHook("nuxt-og-image:runtime-config", runtimeConfig);
       nuxt.options.runtimeConfig["nuxt-og-image"] = runtimeConfig;