nuxt-og-image 3.0.0-rc.3 → 3.0.0-rc.30

package/dist/module.mjs

@@ -1,20 +1,17 @@
 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 { useNuxt, addTemplate, loadNuxtModuleInstance, createResolver, resolvePath, tryResolveModule, defineNuxtModule, useLogger, hasNuxtModule, addServerPlugin, addServerHandler, addImports, addComponentsDir, addComponent, addPlugin } from '@nuxt/kit';
 import { assertSiteConfig, installNuxtSiteConfig } from 'nuxt-site-config-kit';
-import { provider, env, isDevelopment, isCI } from 'std-env';
+import { provider, env, isCI, isDevelopment } from 'std-env';
 import { hash } from 'ohash';
 import { relative, dirname } from 'pathe';
 import { defu } from 'defu';
-import { Launcher } from 'chrome-launcher';
+import { readPackageJSON } from 'pkg-types';
 import { ensureDependencyInstalled } from 'nypm';
 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.3";
+import { Launcher } from 'chrome-launcher';
 
 const autodetectableProviders = {
   azure_static: "azure",
@@ -56,22 +53,24 @@ const awsLambda = {
   "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,
@@ -86,7 +85,7 @@ const RuntimeCompatibility = {
   "vercel": awsLambda,
   "vercel-edge": {
     "chromium": false,
-    "css-inline": false,
+    "css-inline": "wasm",
     "resvg": "wasm",
     "satori": "node",
     "sharp": false,
@@ -96,14 +95,15 @@ const RuntimeCompatibility = {
     }
   },
   "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;
   let preset;
   if (nitroConfig && nitroConfig?.preset)
     preset = nitroConfig.preset;
@@ -130,6 +130,8 @@ function applyNitroPresetCompatibility(nitroConfig, options) {
     let binding = options.compatibility?.[key];
     if (typeof binding === "undefined")
       binding = compatibility[key];
+    if (key === "chromium" && binding === "node")
+      binding = "playwright";
     resolvedCompatibility[key] = binding;
     return {
       [`#nuxt-og-image/bindings/${key}`]: binding === false ? "unenv/runtime/mock/empty" : resolve(`./runtime/core/bindings/${key}/${binding}`)
@@ -205,6 +207,9 @@ export {}
     references.push({ path: resolve(nuxt.options.buildDir, `module/${module}.d.ts`) });
   });
 }
+function isNuxtGenerate(nuxt = useNuxt()) {
+  return nuxt.options._generate || nuxt.options.nitro.static || nuxt.options.nitro.preset === "static";
+}
 
 const DEVTOOLS_UI_ROUTE = "/__nuxt-og-image";
 const DEVTOOLS_UI_LOCAL_PORT = 3030;
@@ -295,7 +300,9 @@ 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) => {
-      applyNitroPresetCompatibility(nitroConfig, { compatibility: options.compatibility.prerender, resolve });
+      nitroConfig.serverAssets = nitroConfig.serverAssets || [];
+      nitroConfig.serverAssets.push({ baseName: "nuxt-og-image:fonts", dir: resolve("./runtime/server/assets") });
+      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("*")));
@@ -327,14 +334,16 @@ async function setupBuildHandler(config, resolve, nuxt = useNuxt()) {
         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")
+      const isCloudflarePagesOrModule = target === "cloudflare-pages" || target === "cloudflare-module";
+      if (isCloudflarePagesOrModule)
         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 cssInlineHash = sha1(await readFile(await resolvePath("@css-inline/css-inline-wasm/index_bg.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" });
+      const path = isCloudflarePagesOrModule ? `../wasm/` : `./wasm/`;
+      await writeFile(serverEntry, contents.replaceAll('"@resvg/resvg-wasm/index_bg.wasm"', `"${path}index_bg-${resvgHash}.wasm${postfix}"`).replaceAll('"@css-inline/css-inline-wasm/index_bg.wasm"', `"${path}index_bg-${cssInlineHash}.wasm${postfix}"`).replaceAll('"yoga-wasm-web/dist/yoga.wasm"', `"${path}yoga-${yogaHash}.wasm${postfix}"`), { encoding: "utf-8" });
     });
   });
 }
@@ -342,20 +351,19 @@ function sha1(source) {
   return createHash("sha1").update(source).digest("hex").slice(0, 16);
 }
 
-async function ensureChromium(logger) {
-  logger.info("Ensuring Chromium install for og:image generation...");
-  const installChromeProcess = execa("npx", ["playwright", "install", "chromium"], {
-    stdio: "inherit"
-  });
-  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);
-    });
-  });
-  installChromeProcess.pid && terminate(installChromeProcess.pid);
+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");
 }
 
 function normaliseFontInput(fonts) {
@@ -365,7 +373,7 @@ function normaliseFontInput(fonts) {
       return {
         cacheKey: f,
         name,
-        weight: weight || "400",
+        weight: weight || 400,
         style: "normal",
         path: void 0
       };
@@ -383,7 +391,7 @@ const module = defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
     compatibility: {
-      nuxt: "^3.8.2",
+      nuxt: "^3.9.0",
       bridge: false
     },
     configKey: "ogImage"
@@ -395,6 +403,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)
@@ -407,7 +416,9 @@ 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.");
@@ -417,13 +428,12 @@ 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;
     }
-    const { resolve } = createResolver(import.meta.url);
+    nuxt.options.build.transpile.push(resolve("./runtime"));
     const preset = resolveNitroPreset(nuxt.options.nitro);
     const targetCompatibility = getPresetNitroPresetCompatibility(preset);
     const hasSharpDependency = !!await tryResolveModule("sharp");
     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 (hasSharpDependency && !targetCompatibility.sharp) {
         logger.warn(`Rendering JPEGs requires sharp which does not work with ${preset}. Images will be rendered as PNG at runtime.`);
@@ -442,32 +452,32 @@ const module = defineNuxtModule({
         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, {
@@ -485,7 +495,7 @@ const module = defineNuxtModule({
       addServerPlugin(resolve("./runtime/nitro/plugins/nuxt-content"));
     if (!config.fonts.length)
       config.fonts = ["Inter:400", "Inter:700"];
-    if (preset === "cloudflare") {
+    if (preset === "cloudflare" || preset === "cloudflare-module") {
       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.`);
@@ -520,27 +530,27 @@ const module = defineNuxtModule({
     addServerHandler({
       lazy: true,
       route: "/__og-image__/font/**",
-      handler: resolve("./runtime/server/routes/__og-image__/font-[name]-[weight].[extension]")
+      handler: resolve("./runtime/nitro/routes/__og-image__/font-[name]-[weight].[extension]")
     });
     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/__og-image__/debug.json")
       });
     }
     addServerHandler({
       lazy: true,
       route: "/__og-image__/image/**",
-      handler: resolve("./runtime/server/routes/__og-image__/image")
+      handler: resolve("./runtime/nitro/routes/__og-image__/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/composables/${name2}`)
       });
-      nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"].push(name);
+      nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"].push(name2);
     });
     await addComponentsDir({
       path: resolve("./runtime/components/Templates/Community"),
@@ -551,10 +561,10 @@ const module = defineNuxtModule({
       // new
       "OgImage",
       "OgImageScreenshot"
-    ].forEach((name) => {
+    ].forEach((name2) => {
       addComponent({
-        name,
-        filePath: resolve(`./runtime/components/OgImage/${name}`),
+        name: name2,
+        filePath: resolve(`./runtime/components/OgImage/${name2}`),
         ...config.componentOptions
       });
     });
@@ -603,9 +613,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 };
@@ -616,7 +626,10 @@ 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 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' {
@@ -628,7 +641,7 @@ declare module 'nitropack' {
   }
   interface NitroRuntimeHooks {
     'nuxt-og-image:context': (ctx: import('${typesPath}').OgImageRenderEventContext) => void | Promise<void>
-    'nuxt-og-image:satori:vnodes': (vnodes: import('${typesPath}').VNode, ctx: ctx: import('${typesPath}').OgImageRenderEventContext) => void | Promise<void>
+    'nuxt-og-image:satori:vnodes': (vnodes: import('${typesPath}').VNode, ctx: import('${typesPath}').OgImageRenderEventContext) => void | Promise<void>
   }
 }
 
@@ -650,11 +663,19 @@ ${componentImports}
     }
     nuxt.hooks.hook("modules:done", async () => {
       const normalisedFonts = normaliseFontInput(config.fonts);
-      if (!nuxt.options._generate && nuxt.options.build) {
+      if (!isNuxtGenerate() && nuxt.options.build) {
+        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(({ name, weight }) => {
-          nuxt.options.nitro.prerender.routes.push(`/__og-image__/font/${name}/${weight}.ttf`);
+        normalisedFonts.filter((f) => !f.path && !f.key).forEach((entry, key) => {
+          const { name: name2, weight } = entry;
+          if (preset !== "cloudflare" && preset !== "cloudflare-module") {
+            entry.path = `/__og-image__/font/${name2}/${weight}.ttf`;
+            nuxt.options.nitro.prerender.routes.unshift(entry.path);
+          }
+          if (name2 === "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");
@@ -677,7 +698,9 @@ ${componentImports}
         // convert the fonts to uniform type to fix ts issue
         fonts: normalisedFonts,
         hasNuxtIcon: hasNuxtModule("nuxt-icon"),
-        colorPreference
+        colorPreference,
+        // @ts-expect-error runtime type
+        isNuxtContentDocumentDriven: !!nuxt.options.content?.documentDriven
       };
       nuxt.hooks.callHook("nuxt-og-image:runtime-config", runtimeConfig);
       nuxt.options.runtimeConfig["nuxt-og-image"] = runtimeConfig;
@@ -685,7 +708,7 @@ ${componentImports}
     if (nuxt.options.dev) {
       setupDevHandler(config, resolve);
       setupDevToolsUI(config, resolve);
-    } else if (nuxt.options._generate) {
+    } else if (isNuxtGenerate()) {
       setupGenerateHandler(config, resolve);
     } else if (nuxt.options.build) {
       await setupBuildHandler(config, resolve);

package/dist/runtime/components/OgImage/OgImage.d.ts

@@ -1,5 +1,5 @@
 import type { OgImageOptions } from '../../types';
-declare const _default: import("vue").DefineComponent<OgImageOptions<"NuxtSeo">, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<OgImageOptions<"NuxtSeo">>, {
+declare const _default: import("vue").DefineComponent<OgImageOptions<"NuxtSeo">, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OgImageOptions<"NuxtSeo">>, {
     props?: any;
 }, {}>;
 export default _default;

package/dist/runtime/components/OgImage/OgImageScreenshot.d.ts

@@ -1,5 +1,5 @@
 import type { OgImagePageScreenshotOptions } from '../../types';
-declare const _default: import("vue").DefineComponent<OgImagePageScreenshotOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<OgImagePageScreenshotOptions>, {
+declare const _default: import("vue").DefineComponent<OgImagePageScreenshotOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OgImagePageScreenshotOptions>, {
     props?: any;
 }, {}>;
 export default _default;

package/dist/runtime/components/Templates/Community/NuxtSeo.vue

@@ -117,7 +117,7 @@ if (typeof props.icon === 'string' && !runtimeConfig.hasNuxtIcon && process.dev)
             {{ description }}
           </p>
         </div>
-        <div v-if="icon" style="width: 30%;" class="flex justify-end">
+        <div v-if="Boolean(icon)" style="width: 30%;" class="flex justify-end">
           <IconComponent :name="icon" size="250px" style="margin: 0 auto; opacity: 0.7;" />
         </div>
       </div>

package/dist/runtime/components/Templates/Community/UnJs.vue

@@ -25,10 +25,10 @@ const org = computed(() => props.title.split('/')[0])
 const repo = computed(() => props.title.split('/')[1])
 
 const stars = computed(() => {
-  return new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' }).format(props.stars || 0)
+  return new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' }).format(Number(props.stars || 0))
 })
 const downloads = computed(() => new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' })
-  .format(props.downloads || 0),
+  .format(Number(props.downloads || 0)),
 )
 
 const description = computed(() => (props.description || '').slice(0, 200))

package/dist/runtime/composables/defineOgImage.mjs

@@ -1,10 +1,9 @@
 import { defu } from "defu";
 import { appendHeader } from "h3";
-import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
-import { withoutBase } from "ufo";
 import { getOgImagePath, separateProps, useOgImageRuntimeConfig } from "../utils.mjs";
 import { createOgImageMeta, normaliseOptions } from "../nuxt/utils.mjs";
-import { useNuxtApp, useRequestEvent, useRoute, useRuntimeConfig } from "#imports";
+import { createNitroRouteRuleMatcher } from "../nitro/kit.mjs";
+import { useNuxtApp, useRequestEvent, useRoute } from "#imports";
 export function defineOgImage(_options = {}) {
   if (!import.meta.server)
     return;
@@ -12,12 +11,8 @@ export function defineOgImage(_options = {}) {
   const ogImageInstances = nuxtApp.ssrContext._ogImageInstances || [];
   const route = useRoute();
   const basePath = route.path || "/";
-  const _routeRulesMatcher = toRouteMatcher(
-    createRadixRouter({ routes: useRuntimeConfig().nitro?.routeRules })
-  );
-  const routeRules = defu({}, ..._routeRulesMatcher.matchAll(
-    withoutBase(basePath.split("?")[0], useRuntimeConfig().app.baseURL)
-  ).reverse()).ogImage;
+  const routeRuleMatcher = createNitroRouteRuleMatcher();
+  const routeRules = routeRuleMatcher(basePath).ogImage;
   if (!_options || nuxtApp.ssrContext?.event.context._nitro?.routeRules?.ogImage === false || typeof routeRules !== "undefined" && routeRules === false) {
     ogImageInstances.forEach((e) => {
       e.dispose();

package/dist/runtime/core/bindings/chromium/chrome-launcher.mjs

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

package/dist/runtime/core/bindings/chromium/on-demand.d.ts

@@ -0,0 +1,2 @@
+import type { Browser } from 'playwright-core';
+export declare function createBrowser(): Promise<Browser | void>;

package/dist/runtime/core/bindings/chromium/on-demand.mjs

@@ -0,0 +1,36 @@
+import { execa } from "execa";
+import terminate from "terminate";
+import { createConsola } from "consola";
+import playwrightCore from "playwright-core";
+let installedChromium = false;
+let installChromiumPromise;
+export async function createBrowser() {
+  if (installChromiumPromise)
+    await installChromiumPromise;
+  if (!installedChromium) {
+    installChromiumPromise = new Promise((_resolve) => {
+      const logger = createConsola().withTag("Nuxt OG Image");
+      logger.info("Installing Chromium install for og:image generation...");
+      const installChromeProcess = execa("npx", ["playwright", "install", "chromium"], {
+        stdio: "inherit"
+      });
+      installChromeProcess.stderr?.pipe(process.stderr);
+      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);
+        });
+      }).then(() => {
+        installChromeProcess.pid && terminate(installChromeProcess.pid);
+        logger.info("Installed Chromium install for og:image generation.");
+        _resolve();
+      });
+    }).then(() => {
+      installedChromium = true;
+    });
+  }
+  return await playwrightCore.chromium.launch({
+    headless: true
+  });
+}

package/dist/runtime/core/bindings/chromium/playwright.d.ts

@@ -0,0 +1,2 @@
+import type { Browser } from 'playwright-core';
+export declare function createBrowser(): Promise<Browser | void>;

package/dist/runtime/core/bindings/chromium/playwright.mjs

@@ -0,0 +1,6 @@
+import playwright from "playwright";
+export async function createBrowser() {
+  return await playwright.chromium.launch({
+    headless: true
+  });
+}

package/dist/runtime/core/bindings/css-inline/node.d.ts

@@ -1,2 +1,8 @@
-import cssInline from 'css-inline';
-export default cssInline;
+import { inline } from '@css-inline/css-inline';
+declare const _default: {
+    initWasmPromise: Promise<void>;
+    cssInline: {
+        inline: typeof inline;
+    };
+};
+export default _default;

package/dist/runtime/core/bindings/css-inline/node.mjs

@@ -1,2 +1,7 @@
-import cssInline from "css-inline";
-export default cssInline;
+import { inline } from "@css-inline/css-inline";
+export default {
+  initWasmPromise: Promise.resolve(),
+  cssInline: {
+    inline
+  }
+};

package/dist/runtime/core/bindings/css-inline/wasm-fs.d.ts

@@ -0,0 +1,8 @@
+import { inline } from '@css-inline/css-inline-wasm';
+declare const _default: {
+    initWasmPromise: Promise<void>;
+    cssInline: {
+        inline: typeof inline;
+    };
+};
+export default _default;

package/dist/runtime/core/bindings/css-inline/wasm-fs.mjs

@@ -0,0 +1,8 @@
+import { initWasm, inline } from "@css-inline/css-inline-wasm";
+import { readWasmFile } from "../../utils/wasm.mjs";
+export default {
+  initWasmPromise: initWasm(readWasmFile("@css-inline/css-inline-wasm/index_bg.wasm")),
+  cssInline: {
+    inline
+  }
+};

package/dist/runtime/core/bindings/css-inline/wasm.d.ts

@@ -0,0 +1,8 @@
+import { inline } from '@css-inline/css-inline-wasm';
+declare const _default: {
+    initWasmPromise: Promise<void>;
+    cssInline: {
+        inline: typeof inline;
+    };
+};
+export default _default;

package/dist/runtime/core/bindings/css-inline/wasm.mjs

@@ -0,0 +1,8 @@
+import { initWasm, inline } from "@css-inline/css-inline-wasm";
+import { importWasm } from "../../utils/wasm.mjs";
+export default {
+  initWasmPromise: initWasm(importWasm(import("@css-inline/css-inline-wasm/index_bg.wasm"))),
+  cssInline: {
+    inline
+  }
+};

package/dist/runtime/core/font/fetch.mjs

@@ -27,7 +27,10 @@ export async function loadFont({ e }, font) {
       }
     } else {
       data = await e.$fetch(`/__og-image__/font/${name}/${weight}.ttf`, {
-        responseType: "arrayBuffer"
+        responseType: "arrayBuffer",
+        query: {
+          font
+        }
       });
     }
   }