nuxt-og-image 2.0.0-beta.5 → 2.0.0-beta.51

package/dist/module.mjs

@@ -1,29 +1,33 @@
 import { readFile, writeFile } from 'node:fs/promises';
-import { defineNuxtModule, createResolver, addTemplate, addServerHandler, addImports, addComponent } from '@nuxt/kit';
+import { defineNuxtModule, useLogger, createResolver, addTemplate, addServerHandler, addImports, addComponent, addServerPlugin } from '@nuxt/kit';
 import { execa } from 'execa';
 import chalk from 'chalk';
 import defu from 'defu';
 import { toRouteMatcher, createRouter } from 'radix3';
-import { joinURL } from 'ufo';
-import { resolve, relative } from 'pathe';
+import { withBase, joinURL } from 'ufo';
+import { resolve, relative, dirname } from 'pathe';
 import { tinyws } from 'tinyws';
 import sirv from 'sirv';
 import { pathExists, copy, mkdirp } from 'fs-extra';
-import { provider } from 'std-env';
+import { globby } from 'globby';
 import playwrightCore from 'playwright-core';
 import { existsSync } from 'node:fs';
 import { createBirpcGroup } from 'birpc';
 import { stringify, parse } from 'flatted';
+import { addDependency } from 'nypm';
+import { provider } from 'std-env';
 
 async function createBrowser() {
-  try {
-    const { Launcher } = await import(String("chrome-launcher"));
-    const chromePath = Launcher.getFirstInstallation();
-    return await playwrightCore.chromium.launch({
-      headless: true,
-      executablePath: chromePath
-    });
-  } catch (e) {
+  if (process.dev || process.env.prerender) {
+    try {
+      const { Launcher } = await import(String("chrome-launcher"));
+      const chromePath = Launcher.getFirstInstallation();
+      return await playwrightCore.chromium.launch({
+        headless: true,
+        executablePath: chromePath
+      });
+    } catch (e) {
+    }
   }
   try {
     return await playwrightCore.chromium.launch({
@@ -54,9 +58,9 @@ async function screenshot(browser, options) {
     width: options.width || 1200,
     height: options.height || 630
   });
-  const isHtml = options.path.startsWith("html:") || options.html;
+  const isHtml = options.html || options.path?.startsWith("html:");
   if (isHtml) {
-    const html = options.html || options.path.substring(5);
+    const html = options.html || options.path?.substring(5);
     await page.evaluate((html2) => {
       document.open("text/html");
       document.write(html2);
@@ -65,10 +69,13 @@ async function screenshot(browser, options) {
     await page.waitForLoadState("networkidle");
   } else {
     await page.goto(`${options.host}${options.path}`, {
-      timeout: 1e4,
+      timeout: process.env.prerender || process.dev ? 1e4 : 3500,
       waitUntil: "networkidle"
     });
   }
+  const screenshotOptions = {
+    timeout: process.env.prerender || process.dev ? 1e4 : 3500
+  };
   if (options.delay)
     await page.waitForTimeout(options.delay);
   if (options.mask) {
@@ -78,8 +85,10 @@ async function screenshot(browser, options) {
     }, options.mask);
   }
   if (options.selector)
-    return await page.locator(options.selector).screenshot();
-  return await page.screenshot();
+    return await page.locator(options.selector).screenshot(screenshotOptions);
+  const screenshot2 = await page.screenshot(screenshotOptions);
+  await page.close();
+  return screenshot2;
 }
 
 function setupPlaygroundRPC(nuxt, config) {
@@ -113,7 +122,7 @@ function setupPlaygroundRPC(nuxt, config) {
   const birpc = createBirpcGroup(serverFunctions, []);
   nuxt.hook("builder:watch", (e, path) => {
     if (e === "change")
-      birpc.boardcast.refresh.asEvent(path);
+      birpc.broadcast.refresh.asEvent(path);
   });
   const middleware = async (req, res) => {
     if (req.ws) {
@@ -164,11 +173,15 @@ function getBodyJson(req) {
   });
 }
 
-function decodeHtmlEntities(obj) {
+function decodeHtml(html) {
+  return html.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&cent;/g, "\xA2").replace(/&pound;/g, "\xA3").replace(/&yen;/g, "\xA5").replace(/&euro;/g, "\u20AC").replace(/&copy;/g, "\xA9").replace(/&reg;/g, "\xAE").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/").replace(/&#([0-9]+);/g, (full, int) => {
+    return String.fromCharCode(Number.parseInt(int));
+  });
+}
+function decodeObjectHtmlEntities(obj) {
   Object.entries(obj).forEach(([key, value]) => {
-    if (typeof value === "string") {
-      obj[key] = value.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/");
-    }
+    if (typeof value === "string")
+      obj[key] = decodeHtml(value);
   });
   return obj;
 }
@@ -192,22 +205,120 @@ function extractOgImageOptions(html) {
       else
         options.description = html.match(/<meta name="description" content="(.*?)">/)?.[1];
     }
-    return decodeHtmlEntities(options);
+    return decodeObjectHtmlEntities(options);
   }
   return false;
 }
-function stripOgImageOptions(html) {
-  return html.replace(/<script id="nuxt-og-image-options" type="application\/json">(.*?)<\/script>/, "");
+
+const SVG2PNGWasmPlaceholder = '"/* NUXT_OG_IMAGE_SVG2PNG_WASM */"';
+const YogaWasmPlaceholder = '"/* NUXT_OG_IMAGE_YOGA_WASM */"';
+const ReSVGWasmPlaceholder = '"/* NUXT_OG_IMAGE_RESVG_WASM */"';
+const Wasms = [
+  {
+    placeholder: SVG2PNGWasmPlaceholder,
+    path: "svg2png/svg2png.wasm",
+    file: "svg2png.wasm"
+  },
+  {
+    placeholder: ReSVGWasmPlaceholder,
+    path: "resvg/resvg.wasm",
+    file: "resvg.wasm"
+  },
+  {
+    placeholder: YogaWasmPlaceholder,
+    path: "yoga/yoga.wasm",
+    file: "yoga.wasm"
+  }
+];
+const DefaultRuntimeCompatibility = {
+  // node-server runtime
+  browser: "playwright",
+  satori: "default",
+  wasm: "fetch",
+  png: "resvg-node"
+};
+const RuntimeCompatibility = {
+  "nitro-dev": {
+    wasm: "fetch",
+    browser: "universal"
+  },
+  "stackblitz": {
+    browser: false,
+    satori: "yoga-wasm",
+    wasm: "inline",
+    png: "resvg-wasm"
+  },
+  "netlify": {
+    browser: "lambda",
+    wasm: "inline"
+  },
+  "netlify-edge": {
+    wasm: "inline",
+    png: "resvg-wasm"
+  },
+  "vercel": {
+    // exceeds 50mb limit
+    browser: false
+  },
+  "vercel-edge": {
+    browser: false,
+    wasm: "import",
+    wasmImportQuery: "?module",
+    png: "resvg-wasm"
+  },
+  "cloudflare-pages": {
+    browser: false,
+    wasm: "import",
+    png: "resvg-wasm"
+  },
+  "cloudflare": {
+    browser: false,
+    wasm: "import"
+  }
+};
+
+const autodetectableProviders = {
+  azure_static: "azure",
+  cloudflare_pages: "cloudflare-pages",
+  netlify: "netlify",
+  stormkit: "stormkit",
+  vercel: "vercel",
+  cleavr: "cleavr"
+};
+const autodetectableStaticProviders = {
+  netlify: "netlify-static",
+  vercel: "vercel-static"
+};
+function detectTarget(options = {}) {
+  return options?.static ? autodetectableStaticProviders[provider] : autodetectableProviders[provider];
+}
+function getNitroPreset(nuxt) {
+  return process.env.NITRO_PRESET || nuxt.options.nitro.preset || detectTarget() || "node-server";
+}
+function getNitroProviderCompatibility(nuxt) {
+  if (provider === "stackblitz")
+    return defu(RuntimeCompatibility.stackblitz, DefaultRuntimeCompatibility);
+  if (nuxt.options.dev || nuxt.options._prepare || nuxt.options._generate) {
+    return defu({
+      wasm: "fetch",
+      browser: "universal"
+    }, DefaultRuntimeCompatibility);
+  }
+  const target = getNitroPreset(nuxt);
+  const compatibility = RuntimeCompatibility[target];
+  if (compatibility === false)
+    return false;
+  return defu(compatibility || {}, DefaultRuntimeCompatibility);
+}
+function ensureDependencies(nuxt, dep) {
+  return Promise.all(dep.map((d) => {
+    return addDependency(d, { cwd: nuxt.options.rootDir });
+  }));
 }
 
 const PATH = "/__nuxt_og_image__";
 const PATH_ENTRY = `${PATH}/entry`;
 const PATH_PLAYGROUND = `${PATH}/client`;
-const edgeProvidersSupported = [
-  "cloudflare",
-  "vercel-edge",
-  "netlify-edge"
-];
 const module = defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
@@ -220,26 +331,54 @@ const module = defineNuxtModule({
   defaults(nuxt) {
     const siteUrl = process.env.NUXT_PUBLIC_SITE_URL || process.env.NUXT_SITE_URL || nuxt.options.runtimeConfig.public?.siteUrl || nuxt.options.runtimeConfig.siteUrl;
     return {
-      // when we run `nuxi generate` we need to force prerendering
-      forcePrerender: !nuxt.options.dev && nuxt.options._generate,
       siteUrl,
       defaults: {
         component: "OgImageBasic",
         width: 1200,
-        height: 630
+        height: 630,
+        cacheTtl: 24 * 60 * 60 * 1e3
+        // default is to cache the image for 24 hours
       },
-      satoriProvider: true,
-      browserProvider: true,
+      runtimeSatori: true,
+      runtimeBrowser: nuxt.options.dev,
       fonts: [],
+      runtimeCacheStorage: false,
       satoriOptions: {},
-      experimentalInlineWasm: process.env.NITRO_PRESET === "netlify-edge" || nuxt.options.nitro.preset === "netlify-edge" || false,
-      experimentalRuntimeBrowser: false,
-      playground: process.env.NODE_ENV === "development" || nuxt.options.dev
+      playground: process.env.NODE_ENV === "development" || nuxt.options.dev,
+      debug: false
     };
   },
   async setup(config, nuxt) {
+    const logger = useLogger("nuxt-og-image");
+    logger.level = config.debug ? 4 : 3;
     const { resolve } = createResolver(import.meta.url);
+    logger.debug("Using Nitro preset", getNitroPreset(nuxt));
+    const nitroCompatibility = getNitroProviderCompatibility(nuxt);
+    logger.debug("Nitro compatibility", nitroCompatibility);
+    const nitroTarget = process.env.NITRO_PRESET || nuxt.options.nitro.preset;
+    if (!nitroCompatibility) {
+      logger.warn(`\`nuxt-og-image\` does not support the nitro target \`${nitroTarget}\`. Please make an issue. `);
+      return;
+    }
+    if (!nitroCompatibility.browser && config.runtimeBrowser) {
+      config.runtimeBrowser = false;
+      logger.warn(`\`nuxt-og-image\` does not support the nitro target \`${nitroTarget}\` with the runtime browser. Set runtimeBrowser: false to stop seeing this.`);
+    }
+    if (config.runtimeBrowser && nitroCompatibility.browser === "lambda") {
+      logger.info(`\`nuxt-og-image\` is deploying to nitro target \`${nitroTarget}\` that installs extra dependencies.`);
+      await ensureDependencies(nuxt, ["puppeteer-core@14.1.1", "@sparticuz/chrome-aws-lambda@14.1.1"]);
+    }
     config.siteUrl = config.siteUrl || config.host;
+    if (!nuxt.options.dev && nuxt.options._generate && !config.siteUrl)
+      logger.warn("Missing `ogImage.siteUrl` and site is being prerendered. This will result in broken og images.");
+    nuxt.options.nitro.storage = nuxt.options.nitro.storage || {};
+    if (nuxt.options._generate) {
+      nuxt.options.nitro.storage["og-image"] = {
+        driver: "memory"
+      };
+    } else if (config.runtimeCacheStorage && !nuxt.options.dev && typeof config.runtimeCacheStorage === "object") {
+      nuxt.options.nitro.storage["og-image"] = config.runtimeCacheStorage;
+    }
     if (!config.fonts.length)
       config.fonts = ["Inter:400", "Inter:700"];
     const distResolve = (p) => {
@@ -271,12 +410,14 @@ export {}
       lazy: true,
       handler: resolve("./runtime/nitro/middleware/og.png")
     });
-    ["html", "options", "svg", "vnode", "font"].forEach((type) => {
-      addServerHandler({
-        lazy: true,
-        route: `/api/og-image-${type}`,
-        handler: resolve(`./runtime/nitro/routes/${type}`)
-      });
+    ["html", "options", "svg", "vnode", "font", "debug"].forEach((type) => {
+      if (type !== "debug" || config.debug) {
+        addServerHandler({
+          lazy: true,
+          route: `/api/og-image-${type}`,
+          handler: resolve(`./runtime/nitro/routes/${type}`)
+        });
+      }
     });
     nuxt.hook("devtools:customTabs", (iframeTabs) => {
       iframeTabs.push({
@@ -325,92 +466,150 @@ export {}
     });
     const runtimeDir = resolve("./runtime");
     nuxt.options.build.transpile.push(runtimeDir);
-    const moduleAssetDir = resolve("./runtime/public-assets");
-    const assetDirs = [
-      resolve(nuxt.options.rootDir, nuxt.options.dir.public),
-      moduleAssetDir
+    addServerPlugin(resolve("./runtime/nitro/plugins/prerender"));
+    const customAssetDirs = [
+      // allows us to show custom error images
+      resolve("./runtime/public-assets")
     ];
+    if (config.runtimeSatori) {
+      if (config.fonts.includes("Inter:400"))
+        customAssetDirs.push(resolve("./runtime/public-assets-optional/inter-font"));
+      if (nitroCompatibility.png === "resvg-wasm" && nitroCompatibility.wasm === "fetch")
+        customAssetDirs.push(resolve("./runtime/public-assets-optional/resvg"));
+      else if (nitroCompatibility.png === "svg2png" && nitroCompatibility.wasm === "fetch")
+        customAssetDirs.push(resolve("./runtime/public-assets-optional/svg2png"));
+      if (nitroCompatibility.satori === "yoga-wasm")
+        customAssetDirs.push(resolve("./runtime/public-assets-optional/yoga"));
+    }
     nuxt.hooks.hook("modules:done", async () => {
       nuxt.hooks.callHook("og-image:config", config);
-      nuxt.options.runtimeConfig["nuxt-og-image"] = { ...config, assetDirs };
+      nuxt.options.runtimeConfig["nuxt-og-image"] = {
+        ...config,
+        // avoid adding credentials
+        runtimeCacheStorage: Boolean(config.runtimeCacheStorage),
+        // convert the fonts to uniform type to fix ts issue
+        fonts: config.fonts.map((f) => {
+          if (typeof f === "string") {
+            const [name, weight] = f.split(":");
+            return {
+              name,
+              weight
+            };
+          }
+          return f;
+        }),
+        assetDirs: [
+          resolve(nuxt.options.srcDir, nuxt.options.dir.public),
+          ...customAssetDirs,
+          // always add runtime dirs for prerendering to work, these are just used as scan roots
+          resolve("./runtime/public-assets-optional/inter-font"),
+          resolve("./runtime/public-assets-optional/resvg"),
+          resolve("./runtime/public-assets-optional/yoga"),
+          resolve("./runtime/public-assets-optional/svg2png")
+        ]
+      };
     });
-    const useSatoriWasm = provider === "stackblitz";
     nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
       nitroConfig.externals = defu(nitroConfig.externals || {}, {
         inline: [runtimeDir]
       });
-      if (config.experimentalRuntimeBrowser) {
+      if (config.runtimeBrowser) {
         nitroConfig.alias = nitroConfig.alias || {};
         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.publicAssets = nitroConfig.publicAssets || [];
-      nitroConfig.publicAssets.push({ dir: moduleAssetDir, maxAge: 31536e3 });
+      customAssetDirs.forEach((dir) => {
+        nitroConfig.publicAssets.push({ dir, maxAge: 31536e3 });
+      });
       const providerPath = `${runtimeDir}/nitro/providers`;
-      if (config.browserProvider) {
-        nitroConfig.virtual["#nuxt-og-image/browser"] = nuxt.options.dev || config.experimentalRuntimeBrowser ? `
-import node from '${providerPath}/browser/node'
-
+      if (config.runtimeBrowser) {
+        nitroConfig.virtual["#nuxt-og-image/browser"] = `
+let browser
 export default async function() {
-  return node
-}
-` : `export default async function() {
- return () => {}
+  browser = browser || await import('${providerPath}/browser/${nitroCompatibility.browser}').then((m) => m.default || m)
+  return browser
 }
 `;
       }
-      if (config.satoriProvider) {
-        nitroConfig.virtual["#nuxt-og-image/satori"] = `import satori from '${providerPath}/satori/${useSatoriWasm ? "webworker" : "node"}'
-export default async function() {
+      if (config.runtimeSatori) {
+        nitroConfig.virtual["#nuxt-og-image/satori"] = `import satori from '${providerPath}/satori/${nitroCompatibility.satori}'
+export default function() {
   return satori
 }`;
-        nitroConfig.virtual["#nuxt-og-image/svg2png"] = `
-import svg2png from '${providerPath}/svg2png/universal'
-export default async function() {
- return svg2png
-}`;
+        nitroConfig.virtual["#nuxt-og-image/png"] = `import png from '${providerPath}/png/${nitroCompatibility.png}'
+export default function() {
+ return png
+}
+`;
       }
       nitroConfig.virtual["#nuxt-og-image/provider"] = `
-import satori from '${relative(nuxt.options.rootDir, resolve("./runtime/nitro/renderers/satori"))}'
-import browser from '${relative(nuxt.options.rootDir, resolve("./runtime/nitro/renderers/browser"))}'
+${config.runtimeSatori ? `import satori from '${relative(nuxt.options.rootDir, resolve("./runtime/nitro/renderers/satori"))}'` : ""}
+${config.runtimeBrowser ? `import browser from '${relative(nuxt.options.rootDir, resolve("./runtime/nitro/renderers/browser"))}'` : ""}
 
 export async function useProvider(provider) {
   if (provider === 'satori')
-    return satori
+    return ${config.runtimeSatori ? "satori" : "null"}
   if (provider === 'browser')
-    return browser
+    return ${config.runtimeBrowser ? "browser" : "null"}
+  return null
 }
       `;
     });
     nuxt.hooks.hook("nitro:init", async (nitro) => {
       let screenshotQueue = [];
       nitro.hooks.hook("compiled", async (_nitro) => {
-        if (edgeProvidersSupported.includes(_nitro.options.preset)) {
-          await copy(resolve("./runtime/public-assets/inter-latin-ext-400-normal.woff"), resolve(_nitro.options.output.publicDir, "inter-latin-ext-400-normal.woff"));
-          await copy(resolve("./runtime/public-assets/inter-latin-ext-700-normal.woff"), resolve(_nitro.options.output.publicDir, "inter-latin-ext-700-normal.woff"));
-          if (!config.experimentalInlineWasm) {
-            await copy(resolve("./runtime/public-assets/svg2png.wasm"), resolve(_nitro.options.output.serverDir, "svg2png.wasm"));
-            if (useSatoriWasm)
-              await copy(resolve("./runtime/public-assets/yoga.wasm"), resolve(_nitro.options.output.serverDir, "yoga.wasm"));
+        if (!config.runtimeSatori || nuxt.options.dev)
+          return;
+        if (config.fonts.includes("Inter:400"))
+          await copy(resolve("./runtime/public-assets-optional/inter-font/inter-latin-ext-400-normal.woff"), resolve(_nitro.options.output.publicDir, "inter-latin-ext-400-normal.woff"));
+        if (config.fonts.includes("Inter:700"))
+          await copy(resolve("./runtime/public-assets-optional/inter-font/inter-latin-ext-700-normal.woff"), resolve(_nitro.options.output.publicDir, "inter-latin-ext-700-normal.woff"));
+        const configuredEntry = nitro.options.rollupConfig?.output.entryFileNames;
+        const wasmProviderPath = resolve(_nitro.options.output.serverDir, typeof configuredEntry === "string" ? configuredEntry : "index.mjs");
+        const paths = [wasmProviderPath];
+        const chunks = await globby([`${_nitro.options.output.serverDir}/chunks/**/*.mjs`], { absolute: true });
+        paths.push(...chunks);
+        for (const path of paths) {
+          if (!await pathExists(path))
+            continue;
+          let contents = await readFile(path, "utf-8");
+          let updated = false;
+          if (_nitro.options.preset.includes("vercel") && path === wasmProviderPath) {
+            contents = contents.replace(".cwd(),", '?.cwd || "/",');
+            updated = true;
+          }
+          if (_nitro.options.preset.includes("netlify") && path.endsWith("netlify.mjs")) {
+            const match = "// TODO: handle event.isBase64Encoded\n  });";
+            contents = contents.replace(match, `${match}
+
+  const headers = normalizeOutgoingHeaders(r.headers);
+  // image buffers must be base64 encoded
+  if (Buffer.isBuffer(r.body) && headers["content-type"].startsWith("image/")) {
+    return {
+      statusCode: r.status,
+      headers,
+      body: r.body.toString("base64"),
+      isBase64Encoded: true
+    };
+  }`);
+            updated = true;
           }
-          const indexFile = resolve(_nitro.options.output.serverDir, _nitro.options.preset === "netlify-edge" ? "server.mjs" : "index.mjs");
-          if (await pathExists(indexFile)) {
-            const indexContents = (await readFile(indexFile, "utf-8")).replace(".cwd(),", '?.cwd || "/",');
-            if (!config.experimentalInlineWasm) {
-              await writeFile(
-                indexFile,
-                indexContents.replace('"/* NUXT_OG_IMAGE_SVG2PNG_WASM */"', 'import("./svg2png.wasm").then(m => m.default || m)').replace('"/* NUXT_OG_IMAGE_YOGA_WASM */"', 'import("./yoga.wasm").then(m => m.default || m)')
-              );
-            } else {
-              const svg2pngWasm = await readFile(resolve("./runtime/public-assets/svg2png.wasm"), "base64");
-              const yogaWasm = await readFile(resolve("./runtime/public-assets/yoga.wasm"), "base64");
-              await writeFile(
-                indexFile,
-                indexContents.replace('"/* NUXT_OG_IMAGE_SVG2PNG_WASM */"', `Buffer.from("${svg2pngWasm}", "base64")`).replace('"/* NUXT_OG_IMAGE_YOGA_WASM */"', `Buffer.from("${yogaWasm}", "base64")`)
-              );
+          for (const wasm of Wasms) {
+            if (contents.includes(wasm.placeholder)) {
+              if (nitroCompatibility.wasm === "import") {
+                contents = contents.replace(wasm.placeholder, `import("./${wasm.file}${nitroCompatibility.wasmImportQuery || ""}").then(m => m.default || m)`);
+                await copy(resolve(`./runtime/public-assets-optional/${wasm.path}`), resolve(dirname(path), wasm.file));
+              } else if (nitroCompatibility.wasm === "inline") {
+                const wasmBuffer = await readFile(resolve(`./runtime/public-assets-optional/${wasm.path}`));
+                contents = contents.replace(wasm.placeholder, `Buffer.from("${wasmBuffer}", "base64")`);
+              }
+              updated = true;
             }
           }
+          if (updated)
+            await writeFile(path, contents, { encoding: "utf-8" });
         }
       });
       const _routeRulesMatcher = toRouteMatcher(
@@ -423,7 +622,6 @@ export async function useProvider(provider) {
         if (!html)
           return;
         const extractedOptions = extractOgImageOptions(html);
-        ctx.contents = stripOgImageOptions(html);
         const routeRules = defu({}, ..._routeRulesMatcher.matchAll(ctx.route).reverse());
         if (!extractedOptions || routeRules.ogImage === false)
           return;
@@ -442,21 +640,6 @@ export async function useProvider(provider) {
         await nuxt.callHook("og-image:prerenderScreenshots", screenshotQueue);
         if (screenshotQueue.length === 0)
           return;
-        for (const entry of screenshotQueue) {
-          if (entry.route && Object.keys(entry).length === 1) {
-            const html = await $fetch(entry.route);
-            const extractedOptions = extractOgImageOptions(html);
-            const routeRules = defu({}, ..._routeRulesMatcher.matchAll(entry.route).reverse());
-            Object.assign(entry, {
-              // @ts-expect-error runtime
-              path: extractedOptions.component ? `/api/og-image-html?path=${entry.route}` : entry.route,
-              ...extractedOptions,
-              ...routeRules.ogImage || {}
-            });
-          }
-          if (entry.component)
-            entry.html = await $fetch(entry.path);
-        }
         nitro.logger.info("Ensuring chromium install for og:image generation...");
         const installChromeProcess = execa("npx", ["playwright", "install", "chromium"], {
           stdio: "inherit"
@@ -483,12 +666,27 @@ export async function useProvider(provider) {
           browser = await createBrowser();
           if (browser) {
             nitro.logger.info(`Prerendering ${screenshotQueue.length} og:image screenshots...`);
+            for (const entry of screenshotQueue) {
+              if (entry.route && Object.keys(entry).length === 1) {
+                const html = await $fetch(entry.route, { baseURL: withBase(nuxt.options.app.baseURL, host) });
+                const extractedOptions = extractOgImageOptions(html);
+                const routeRules = defu({}, ..._routeRulesMatcher.matchAll(entry.route).reverse());
+                Object.assign(entry, {
+                  // @ts-expect-error runtime
+                  path: extractedOptions.component ? `/api/og-image-html?path=${entry.route}` : entry.route,
+                  ...extractedOptions,
+                  ...routeRules.ogImage || {}
+                });
+              }
+              if (entry.component)
+                entry.html = await globalThis.$fetch(entry.path);
+            }
             for (const k in screenshotQueue) {
               const entry = screenshotQueue[k];
               const start = Date.now();
               let hasError = false;
-              const dirname = joinURL(nitro.options.output.publicDir, entry.route, "/__og_image__/");
-              const filename = joinURL(dirname, "/og.png");
+              const dirname2 = joinURL(nitro.options.output.publicDir, entry.route, "/__og_image__/");
+              const filename = joinURL(dirname2, "/og.png");
               try {
                 const imgBuffer = await screenshot(browser, {
                   ...config.defaults || {},
@@ -496,7 +694,7 @@ export async function useProvider(provider) {
                   host
                 });
                 try {
-                  await mkdirp(dirname);
+                  await mkdirp(dirname2);
                 } catch (e) {
                 }
                 await writeFile(filename, imgBuffer);
@@ -520,7 +718,7 @@ export async function useProvider(provider) {
         }
         screenshotQueue = [];
       };
-      if (!nuxt.options._prepare) {
+      if (nuxt.options._generate) {
         nitro.hooks.hook("rollup:before", async () => {
           await captureScreenshots();
         });

package/dist/runtime/browserUtil.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="node" />
+import type { Buffer } from 'node:buffer';
 import type { Browser } from 'playwright-core';
 import type { ScreenshotOptions } from '../types';
 export declare function screenshot(browser: Browser, options: Partial<ScreenshotOptions> & Record<string, any>): Promise<Buffer>;

package/dist/runtime/browserUtil.mjs

@@ -6,9 +6,9 @@ export async function screenshot(browser, options) {
     width: options.width || 1200,
     height: options.height || 630
   });
-  const isHtml = options.path.startsWith("html:") || options.html;
+  const isHtml = options.html || options.path?.startsWith("html:");
   if (isHtml) {
-    const html = options.html || options.path.substring(5);
+    const html = options.html || options.path?.substring(5);
     await page.evaluate((html2) => {
       document.open("text/html");
       document.write(html2);
@@ -17,10 +17,13 @@ export async function screenshot(browser, options) {
     await page.waitForLoadState("networkidle");
   } else {
     await page.goto(`${options.host}${options.path}`, {
-      timeout: 1e4,
+      timeout: process.env.prerender || process.dev ? 1e4 : 3500,
       waitUntil: "networkidle"
     });
   }
+  const screenshotOptions = {
+    timeout: process.env.prerender || process.dev ? 1e4 : 3500
+  };
   if (options.delay)
     await page.waitForTimeout(options.delay);
   if (options.mask) {
@@ -30,6 +33,8 @@ export async function screenshot(browser, options) {
     }, options.mask);
   }
   if (options.selector)
-    return await page.locator(options.selector).screenshot();
-  return await page.screenshot();
+    return await page.locator(options.selector).screenshot(screenshotOptions);
+  const screenshot2 = await page.screenshot(screenshotOptions);
+  await page.close();
+  return screenshot2;
 }

package/dist/runtime/components/OgImageBasic.island.vue

@@ -32,6 +32,11 @@ const props = defineProps({
   },
 })
 
+// inherited attrs can mess up the satori parser
+defineOptions({
+  inheritAttrs: false,
+})
+
 const containerAttrs = computed(() => {
   const isBackgroundTw = props.background?.startsWith('bg-')
   const isColorTw = props.color?.startsWith('text-')