nuxt-og-image 2.0.0-beta.21 → 2.0.0-beta.22

package/dist/module.mjs

@@ -1,19 +1,21 @@
 import { readFile, writeFile } from 'node:fs/promises';
-import { defineNuxtModule, createResolver, addTemplate, addServerHandler, addImports, addComponent, addServerPlugin } 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 { withBase, joinURL } from 'ufo';
-import { resolve, relative } from 'pathe';
+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() {
   if (process.dev || process.env.prerender) {
@@ -67,12 +69,12 @@ 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 : 2e3,
       waitUntil: "networkidle"
     });
   }
   const screenshotOptions = {
-    timeout: 1e4
+    timeout: process.env.prerender || process.dev ? 1e4 : 2e3
   };
   if (options.delay)
     await page.waitForTimeout(options.delay);
@@ -84,7 +86,9 @@ async function screenshot(browser, options) {
   }
   if (options.selector)
     return await page.locator(options.selector).screenshot(screenshotOptions);
-  return await page.screenshot(screenshotOptions);
+  const screenshot2 = await page.screenshot(screenshotOptions);
+  await page.close();
+  return screenshot2;
 }
 
 function setupPlaygroundRPC(nuxt, config) {
@@ -206,15 +210,76 @@ function extractOgImageOptions(html) {
   return false;
 }
 
+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 = {
+  browser: "playwright",
+  satori: "default",
+  wasm: "import",
+  png: "resvg"
+};
+const RuntimeCompatibility = {
+  "stackblitz": {
+    browser: false,
+    satori: "yoga-wasm",
+    wasm: "inline"
+  },
+  "netlify": {
+    browser: "lambda",
+    wasm: "inline"
+  },
+  "cloudflare-pages": {
+    browser: false
+  },
+  "cloudflare": {
+    browser: false
+  },
+  "vercel-edge": {
+    browser: false,
+    wasmImportQuery: "?module"
+  }
+};
+
+function getNitroProviderCompatibility(nuxt) {
+  if (nuxt.options.dev || nuxt.options._prepare) {
+    return defu({
+      wasm: "fetch",
+      browser: "universal"
+    }, DefaultRuntimeCompatibility);
+  }
+  if (provider === "stackblitz")
+    return defu(RuntimeCompatibility.stackblitz, DefaultRuntimeCompatibility);
+  const target = process.env.NITRO_PRESET || nuxt.options.nitro.preset;
+  const compatibility = RuntimeCompatibility[target];
+  if (compatibility === false)
+    return false;
+  return defu(compatibility || {}, DefaultRuntimeCompatibility);
+}
+function ensureDependency(nuxt, dep) {
+  return addDependency(dep, { cwd: nuxt.options.rootDir });
+}
+
 const PATH = "/__nuxt_og_image__";
 const PATH_ENTRY = `${PATH}/entry`;
 const PATH_PLAYGROUND = `${PATH}/client`;
-const edgeProvidersSupported = [
-  "cloudflare",
-  "cloudflare-pages",
-  "vercel-edge",
-  "netlify-edge"
-];
 const module = defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
@@ -226,28 +291,48 @@ 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;
-    const isEdgeProvider = edgeProvidersSupported.includes(process.env.NITRO_PRESET || "") || edgeProvidersSupported.includes(nuxt.options.nitro.preset);
     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,
-      // disable browser in edge environments
-      browserProvider: !isEdgeProvider,
+      runtimeSatori: true,
+      runtimeBrowser: nuxt.options.dev,
       fonts: [],
+      runtimeCacheStorage: false,
       satoriOptions: {},
-      experimentalInlineWasm: process.env.NITRO_PRESET === "netlify-edge" || nuxt.options.nitro.preset === "netlify-edge" || 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");
     const { resolve } = createResolver(import.meta.url);
+    const nitroCompatibility = getNitroProviderCompatibility(nuxt);
+    if (!nitroCompatibility) {
+      const target = process.env.NITRO_PRESET || nuxt.options.nitro.preset;
+      logger.warn(`It looks like the nitro target ${target} doesn't support \`nuxt-og-image\`.`);
+      return;
+    }
+    if (!nitroCompatibility.browser && config.runtimeBrowser) {
+      config.runtimeBrowser = false;
+      logger.warn("It looks like you're using a nitro target that does not support the browser provider, disabling `runtimeBrowser`.");
+    }
+    if (nitroCompatibility.browser === "lambda") {
+      logger.info("It looks like you're deploying to an environment which requires `chrome-aws-lambda`, checking for dependency...");
+      await ensureDependency(nuxt, "chrome-aws-lambda");
+    }
     config.siteUrl = config.siteUrl || config.host;
+    if (!nuxt.options.dev && nuxt.options._generate && !config.siteUrl)
+      logger.warn("Nuxt is being prerendered but no siteUrl is set. This will result in broken images.");
+    if (config.runtimeCacheStorage && !nuxt.options.dev) {
+      nuxt.options.nitro.storage = nuxt.options.nitro.storage || {};
+      nuxt.options.nitro.storage["og-image"] = config.runtimeCacheStorage;
+    }
     if (!config.fonts.length)
       config.fonts = ["Inter:400", "Inter:700"];
     const distResolve = (p) => {
@@ -279,12 +364,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({
@@ -334,57 +421,76 @@ export {}
     const runtimeDir = resolve("./runtime");
     nuxt.options.build.transpile.push(runtimeDir);
     addServerPlugin(resolve("./runtime/nitro/plugins/prerender"));
-    const moduleAssetDir = resolve("./runtime/public-assets");
-    const assetDirs = [
-      resolve(nuxt.options.rootDir, nuxt.options.dir.public),
-      moduleAssetDir
+    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" && 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),
+        assetDirs: [
+          resolve(nuxt.options.rootDir, nuxt.options.dir.public),
+          ...customAssetDirs
+        ]
+      };
     });
-    const useSatoriWasm = provider === "stackblitz";
     nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
       nitroConfig.externals = defu(nitroConfig.externals || {}, {
         inline: [runtimeDir]
       });
+      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`;
-      const nitroPreset = nuxt.options.nitro.preset || process.env.NITRO_PRESET;
-      const isNodeNitroServer = !nitroPreset || nitroPreset === "node";
-      if (config.browserProvider) {
-        nitroConfig.virtual["#nuxt-og-image/browser"] = nuxt.options.dev || process.env.prerender || isNodeNitroServer ? `
-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"}'
+      if (config.runtimeSatori) {
+        nitroConfig.virtual["#nuxt-og-image/satori"] = `import satori from '${providerPath}/satori/${nitroCompatibility.satori}'
 export default async function() {
   return satori
 }`;
-        nitroConfig.virtual["#nuxt-og-image/svg2png"] = `
-import svg2png from '${providerPath}/svg2png/universal'
+        nitroConfig.virtual["#nuxt-og-image/png"] = `import png from '${providerPath}/png/${nitroCompatibility.png}'
 export default async function() {
- return svg2png
-}`;
+ return png
+}
+`;
       }
       nitroConfig.virtual["#nuxt-og-image/provider"] = `
-${config.satoriProvider ? `import satori from '${relative(nuxt.options.rootDir, resolve("./runtime/nitro/renderers/satori"))}'` : ""}
-${config.browserProvider ? `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 ${config.satoriProvider ? "satori" : "null"}
+    return ${config.runtimeSatori ? "satori" : "null"}
   if (provider === 'browser')
-    return ${config.browserProvider ? "browser" : "null"}
+    return ${config.runtimeBrowser ? "browser" : "null"}
   return null
 }
       `;
@@ -392,36 +498,40 @@ export async function useProvider(provider) {
     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;
           }
-          const configuredEntry = nitro.options.rollupConfig?.output.entryFileNames;
-          const entryFile = typeof configuredEntry === "string" ? configuredEntry : "index.mjs";
-          const indexFile = resolve(_nitro.options.output.serverDir, entryFile);
-          if (await pathExists(indexFile)) {
-            let indexContents = await readFile(indexFile, "utf-8");
-            if (_nitro.options.preset.includes("vercel")) {
-              indexContents = indexContents.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}`), "base64");
+                contents = contents.replace(wasm.placeholder, `Buffer.from("${wasmBuffer}", "base64")`);
+              }
+              updated = true;
             }
           }
+          if (updated)
+            await writeFile(path, contents, { encoding: "utf-8" });
         }
       });
       const _routeRulesMatcher = toRouteMatcher(
@@ -497,8 +607,8 @@ export async function useProvider(provider) {
               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 || {},
@@ -506,7 +616,7 @@ export async function useProvider(provider) {
                   host
                 });
                 try {
-                  await mkdirp(dirname);
+                  await mkdirp(dirname2);
                 } catch (e) {
                 }
                 await writeFile(filename, imgBuffer);

package/dist/runtime/browserUtil.mjs

@@ -17,12 +17,12 @@ 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 : 2e3,
       waitUntil: "networkidle"
     });
   }
   const screenshotOptions = {
-    timeout: 1e4
+    timeout: process.env.prerender || process.dev ? 1e4 : 2e3
   };
   if (options.delay)
     await page.waitForTimeout(options.delay);
@@ -34,5 +34,7 @@ export async function screenshot(browser, options) {
   }
   if (options.selector)
     return await page.locator(options.selector).screenshot(screenshotOptions);
-  return await page.screenshot(screenshotOptions);
+  const screenshot2 = await page.screenshot(screenshotOptions);
+  await page.close();
+  return screenshot2;
 }

package/dist/runtime/composables/defineOgImage.mjs

@@ -14,23 +14,26 @@ export function defineOgImageScreenshot(options = {}) {
   });
 }
 export function defineOgImageDynamic(options = {}) {
-  const { satoriProvider, forcePrerender } = useRuntimeConfig()["nuxt-og-image"];
+  const { runtimeSatori } = useRuntimeConfig()["nuxt-og-image"];
   defineOgImage({
-    provider: satoriProvider ? "satori" : "browser",
-    static: !!forcePrerender,
+    provider: runtimeSatori ? "satori" : "browser",
+    static: false,
     ...options
   });
 }
 export function defineOgImageStatic(options = {}) {
-  const { satoriProvider } = useRuntimeConfig()["nuxt-og-image"];
+  const { runtimeSatori } = useRuntimeConfig()["nuxt-og-image"];
   defineOgImage({
-    provider: satoriProvider ? "satori" : "browser",
+    provider: runtimeSatori ? "satori" : "browser",
     static: true,
     ...options
   });
 }
 export function defineOgImage(options = {}) {
   if (process.server) {
+    let resolveSrc = function() {
+      return withBase(`${route === "/" ? "" : route}/__og_image__/og.png`, baseUrl);
+    };
     const { defaults, siteUrl } = useRuntimeConfig()["nuxt-og-image"];
     const router = useRouter();
     const route = router?.currentRoute?.value?.path || "";
@@ -43,11 +46,11 @@ export function defineOgImage(options = {}) {
       },
       {
         name: "twitter:image:src",
-        content: () => withBase(`${route === "/" ? "" : route}/__og_image__/og.png`, baseUrl)
+        content: resolveSrc
       },
       {
         property: "og:image",
-        content: () => withBase(`${route === "/" ? "" : route}/__og_image__/og.png`, baseUrl)
+        content: resolveSrc
       },
       {
         property: "og:image:width",

package/dist/runtime/nitro/middleware/og.png.mjs

@@ -1,18 +1,21 @@
-import { createError, defineEventHandler, setHeader } from "h3";
-import { parseURL, withBase, withoutTrailingSlash } from "ufo";
+import { Buffer } from "node:buffer";
+import { createError, defineEventHandler, sendRedirect, setHeader } from "h3";
+import { joinURL, parseURL, withBase, withoutTrailingSlash } from "ufo";
+import { prefixStorage } from "unstorage";
 import { fetchOptions, useHostname } from "../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
+import { useRuntimeConfig, useStorage } from "#imports";
 export default defineEventHandler(async (e) => {
+  const { runtimeBrowser, runtimeCacheStorage } = useRuntimeConfig()["nuxt-og-image"];
   const path = parseURL(e.path).pathname;
   if (!path.endsWith("__og_image__/og.png"))
     return;
   const basePath = withoutTrailingSlash(
     path.replace("__og_image__/og.png", "")
   );
-  setHeader(e, "Cache-Control", "no-cache, no-store, must-revalidate");
-  setHeader(e, "Pragma", "no-cache");
-  setHeader(e, "Expires", "0");
   const options = await fetchOptions(e, basePath);
+  if (process.env.NODE_ENV === "production" && !process.env.prerender && !runtimeBrowser && options.provider === "browser")
+    return sendRedirect(e, joinURL(useHostname(e), "__nuxt_og_image__/browser-provider-not-supported.png"));
   const provider = await useProvider(options.provider);
   if (!provider) {
     throw createError({
@@ -20,21 +23,46 @@ export default defineEventHandler(async (e) => {
       statusMessage: `Provider ${options.provider} is missing.`
     });
   }
-  try {
-    const png = await provider.createPng(withBase(basePath, useHostname(e)), options);
-    if (png) {
+  const cache = prefixStorage(useStorage(), "og-image-cache:images");
+  const key = options.cacheKey || e.node.req.url;
+  let png;
+  if (runtimeCacheStorage && await cache.hasItem(key)) {
+    const { value, expiresAt } = await cache.getItem(key);
+    if (expiresAt > Date.now()) {
+      setHeader(e, "Cache-Control", "public, max-age=31536000");
       setHeader(e, "Content-Type", "image/png");
-      return png;
+      png = Buffer.from(value, "base64");
+    } else {
+      await cache.removeItem(key);
     }
-  } catch (err) {
-    throw createError({
-      statusCode: 500,
-      statusMessage: `Failed to create og image: ${err.message}`
-    });
+  }
+  if (!png) {
+    try {
+      png = await provider.createPng(withBase(basePath, useHostname(e)), options);
+      if (png && runtimeCacheStorage && options.static) {
+        const base64png = Buffer.from(png).toString("base64");
+        await cache.setItem(key, { value: base64png, expiresAt: Date.now() + (options.cacheTtl || 0) });
+      }
+    } catch (err) {
+      throw createError({
+        statusCode: 500,
+        statusMessage: `Failed to create og image: ${err.message}`
+      });
+    }
+  }
+  if (png) {
+    if (!process.dev && options.static) {
+      setHeader(e, "Cache-Control", "public, max-age=31536000");
+    } else {
+      setHeader(e, "Cache-Control", "no-cache, no-store, must-revalidate");
+      setHeader(e, "Pragma", "no-cache");
+      setHeader(e, "Expires", "0");
+    }
+    setHeader(e, "Content-Type", "image/png");
+    return png;
   }
   throw createError({
     statusCode: 500,
     statusMessage: "Failed to create og image, unknown error."
   });
-  return false;
 });

package/dist/runtime/nitro/plugins/prerender.mjs

@@ -1,11 +1,9 @@
 import { appendHeader } from "h3";
 import { joinURL } from "ufo";
 import { extractOgImageOptions } from "../utils-pure.mjs";
-import { useRuntimeConfig } from "#imports";
 const OgImagePrenderNitroPlugin = (nitroApp) => {
   if (!process.env.prerender)
     return;
-  const { forcePrerender } = useRuntimeConfig()["nuxt-og-image"];
   nitroApp.hooks.hook("render:html", async (ctx, { event }) => {
     const url = event.node.req.url;
     if (url.includes(".") || url.startsWith("/__nuxt_island/"))
@@ -13,7 +11,7 @@ const OgImagePrenderNitroPlugin = (nitroApp) => {
     const options = extractOgImageOptions(ctx.head.join("\n"));
     if (!options)
       return;
-    if ((forcePrerender || options.static) && options.provider === "satori")
+    if (options.static && options.provider === "satori")
       appendHeader(event, "x-nitro-prerender", joinURL(url, "/__og_image__/og.png"));
   });
 };

package/dist/runtime/nitro/providers/browser/lambda.d.ts

@@ -1 +1 @@
-export default function createBrowser(): Promise<import("puppeteer-core").Browser>;
+export default function createBrowser(): Promise<import("playwright-core").Browser>;

package/dist/runtime/nitro/providers/browser/lambda.mjs

@@ -1,9 +1,9 @@
-import edgeChromium from "chrome-aws-lambda";
-import puppeteer from "puppeteer-core";
+import awsChromium from "chrome-aws-lambda";
+import { chromium } from "playwright-core";
 export default async function createBrowser() {
-  return puppeteer.launch({
-    args: edgeChromium.args,
-    executablePath: await edgeChromium.executablePath,
+  return await chromium.launch({
+    args: awsChromium.args,
+    executablePath: await awsChromium.executablePath,
     headless: true
   });
 }

package/dist/runtime/nitro/providers/browser/playwright.mjs

@@ -0,0 +1,22 @@
+import playwrightCore from "playwright-core";
+export default async function createBrowser() {
+  try {
+    return await playwrightCore.chromium.launch({
+      headless: true
+    });
+  } catch (e) {
+  }
+  try {
+    const playwright = await import(String("playwright"));
+    return await playwright.chromium.launch({
+      headless: true
+    });
+  } catch (e) {
+    if (process.dev) {
+      console.warn("Failed to load chromium instance. Ensure you have chrome installed, otherwise add the dependency: `npm add -D playwright`.");
+    } else {
+      console.error("Failed to load browser instance. Please open an issue with the exception: https://github.com/harlan-zw/nuxt-og-image/issues.");
+      throw e;
+    }
+  }
+}

package/dist/runtime/nitro/providers/browser/universal.d.ts

@@ -0,0 +1 @@
+export default function createBrowser(): Promise<any>;

package/dist/runtime/nitro/providers/png/resvg.d.ts

@@ -0,0 +1,4 @@
+import type { ResvgRenderOptions } from '@resvg/resvg-wasm';
+export default function (svg: string, options: ResvgRenderOptions & {
+    baseUrl: string;
+}): Promise<Uint8Array>;

package/dist/runtime/nitro/providers/png/resvg.mjs

@@ -0,0 +1,11 @@
+import { Resvg, initWasm } from "@resvg/resvg-wasm";
+import { wasmLoader } from "../../utils.mjs";
+const ReSvgLoader = wasmLoader("/* NUXT_OG_IMAGE_RESVG_WASM */", "/resvg.wasm");
+export default async function(svg, options) {
+  const ReSvgWasm = await ReSvgLoader.load({ baseUrl: options.baseUrl });
+  await initWasm(ReSvgWasm).catch(() => {
+  });
+  const resvgJS = new Resvg(svg, {});
+  const pngData = resvgJS.render();
+  return pngData.asPng();
+}

package/dist/runtime/nitro/providers/png/svg2png.mjs

@@ -0,0 +1,11 @@
+import { initialize, svg2png } from "svg2png-wasm";
+import { wasmLoader } from "../../utils.mjs";
+const Svg2PngLoader = wasmLoader("/* NUXT_OG_IMAGE_SVG2PNG_WASM */", "/svg2png.wasm");
+export default async function(svg, options) {
+  const Svg2PngWasm = await Svg2PngLoader.load({ baseUrl: options.baseUrl });
+  await initialize(Svg2PngWasm).catch((e) => {
+    if (!e.message.trim().endsWith("function can be used only once."))
+      throw e;
+  });
+  return await svg2png(svg, options);
+}