nuxt-og-image 3.0.0-rc.5 → 3.0.0-rc.50

package/dist/runtime/nitro/og-image/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/nitro/og-image/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/nitro/og-image/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/nitro/og-image/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/nitro/og-image/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/nitro/og-image/bindings/css-inline/node.d.ts

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

package/dist/runtime/nitro/og-image/bindings/css-inline/node.mjs

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

package/dist/runtime/nitro/og-image/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/nitro/og-image/bindings/css-inline/wasm-fs.mjs

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

package/dist/runtime/nitro/og-image/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/nitro/og-image/bindings/css-inline/wasm.mjs

@@ -0,0 +1,7 @@
+import { initWasm, inline } from "@css-inline/css-inline-wasm";
+export default {
+  initWasmPromise: initWasm(import("@css-inline/css-inline-wasm/index_bg.wasm?module").then((r) => r.default || r)),
+  cssInline: {
+    inline
+  }
+};

package/dist/runtime/{core → nitro/og-image}/bindings/resvg/wasm-fs.mjs

@@ -1,5 +1,5 @@
 import { Resvg as _Resvg, initWasm } from "@resvg/resvg-wasm";
-import { readWasmFile } from "../../utils/wasm.mjs";
+import { readWasmFile } from "../../../util/wasm.mjs";
 export default {
   initWasmPromise: initWasm(readWasmFile("@resvg/resvg-wasm/index_bg.wasm")),
   Resvg: _Resvg

package/dist/runtime/nitro/og-image/bindings/resvg/wasm.mjs

@@ -0,0 +1,5 @@
+import { Resvg as _Resvg, initWasm } from "@resvg/resvg-wasm";
+export default {
+  initWasmPromise: initWasm(import("@resvg/resvg-wasm/index_bg.wasm?module").then((r) => r.default || r)),
+  Resvg: _Resvg
+};

package/dist/runtime/{core → nitro/og-image}/bindings/satori/wasm-fs.mjs

@@ -1,6 +1,6 @@
 import _satori, { init } from "satori/wasm";
 import initYoga from "yoga-wasm-web";
-import { readWasmFile } from "../../utils/wasm.mjs";
+import { readWasmFile } from "../../../util/wasm.mjs";
 const wasm = readWasmFile("yoga-wasm-web/dist/yoga.wasm").then(async (yoga) => await initYoga(yoga));
 export default {
   initWasmPromise: new Promise((resolve) => {

package/dist/runtime/{core → nitro/og-image}/bindings/satori/wasm.mjs

@@ -1,8 +1,7 @@
 import _satori from "satori/wasm";
 import initYoga from "yoga-wasm-web";
 import { init } from "satori";
-import { importWasm } from "../../utils/wasm.mjs";
-const wasm = importWasm(import("yoga-wasm-web/dist/yoga.wasm")).then(async (yoga) => await initYoga(yoga));
+const wasm = import("yoga-wasm-web/dist/yoga.wasm?module").then(async (yoga) => await initYoga(yoga.default || yoga));
 export default {
   initWasmPromise: new Promise((resolve) => {
     wasm.then((yoga) => {

package/dist/runtime/nitro/og-image/cache.d.ts

@@ -0,0 +1,7 @@
+import type { Storage } from 'unstorage';
+import type { OgImageOptions } from '../../types';
+export declare const htmlPayloadCache: Storage<{
+    expiresAt: number;
+    value: OgImageOptions;
+}>;
+export declare const prerenderOptionsCache: Storage<OgImageOptions> | undefined;

package/dist/runtime/{core/cache/htmlPayload.mjs → nitro/og-image/cache.mjs}

@@ -2,5 +2,8 @@ import { createStorage } from "unstorage";
 import lruCacheDriver from "unstorage/drivers/lru-cache";
 export const htmlPayloadCache = createStorage({
   // short cache time so we don't need many entries at runtime
-  driver: lruCacheDriver({ max: import.meta.prerender ? 1e3 : 50 })
+  driver: lruCacheDriver({ max: import.meta.prerender ? 1e4 : 50 })
 });
+export const prerenderOptionsCache = import.meta.prerender ? createStorage({
+  driver: lruCacheDriver({ max: 1e4 })
+}) : void 0;

package/dist/runtime/{core/renderers → nitro/og-image}/chromium/screenshot.mjs

@@ -1,5 +1,5 @@
 import { joinURL, withQuery } from "ufo";
-import { useOgImageRuntimeConfig } from "../../../utils.mjs";
+import { useOgImageRuntimeConfig } from "../../../shared.mjs";
 import { useNitroOrigin } from "#imports";
 export async function createScreenshot({ basePath, e, options, extension }, browser) {
   const { colorPreference } = useOgImageRuntimeConfig();

package/dist/runtime/nitro/og-image/context.d.ts

@@ -0,0 +1,5 @@
+import type { H3Error, H3Event } from 'h3';
+import type { OgImageOptions, OgImageRenderEventContext } from '../../types';
+export declare function resolvePathCacheKey(e: H3Event, path?: string): string;
+export declare function resolveContext(e: H3Event): Promise<H3Error | OgImageRenderEventContext>;
+export declare function extractAndNormaliseOgImageOptions(html: string): OgImageOptions | false;

package/dist/runtime/nitro/og-image/context.mjs

@@ -0,0 +1,177 @@
+import { parseURL, withQuery, withoutLeadingSlash, withoutTrailingSlash } from "ufo";
+import { createError, getQuery } from "h3";
+import { defu } from "defu";
+import { normalizeKey } from "unstorage";
+import { hash } from "ohash";
+import { separateProps, useOgImageRuntimeConfig } from "../../shared.mjs";
+import { createNitroRouteRuleMatcher } from "../util/kit.mjs";
+import { decodeObjectHtmlEntities } from "../util/encoding.mjs";
+import { htmlPayloadCache, prerenderOptionsCache } from "./cache.mjs";
+import { useChromiumRenderer, useSatoriRenderer } from "./instances.mjs";
+import { useNitroApp } from "#internal/nitro/app";
+export function resolvePathCacheKey(e, path) {
+  const siteConfig = e.context.siteConfig.get();
+  const basePath = withoutTrailingSlash(withoutLeadingSlash(normalizeKey(path || e.path)));
+  return [
+    !basePath || basePath === "/" ? "index" : basePath,
+    hash([
+      basePath,
+      siteConfig.url,
+      hash(getQuery(e))
+    ])
+  ].join(":");
+}
+export async function resolveContext(e) {
+  const runtimeConfig = useOgImageRuntimeConfig();
+  const path = parseURL(e.path).pathname;
+  const extension = path.split(".").pop();
+  if (!extension) {
+    return createError({
+      statusCode: 400,
+      statusMessage: `[Nuxt OG Image] Missing OG Image type.`
+    });
+  }
+  if (!["png", "jpeg", "jpg", "svg", "html", "json"].includes(extension)) {
+    return createError({
+      statusCode: 400,
+      statusMessage: `[Nuxt OG Image] Unknown OG Image type ${extension}.`
+    });
+  }
+  let queryParams = { ...getQuery(e) };
+  queryParams.props = JSON.parse(queryParams.props || "{}");
+  queryParams = separateProps(queryParams);
+  let basePath = withoutTrailingSlash(
+    path.replace(`/__og-image__/image`, "").replace(`/og.${extension}`, "")
+  );
+  if (queryParams._query)
+    basePath = withQuery(basePath, JSON.parse(queryParams._query));
+  const isDebugJsonPayload = extension === "json" && runtimeConfig.debug;
+  const key = resolvePathCacheKey(e, basePath);
+  let options = queryParams.options;
+  if (!options) {
+    if (import.meta.prerender)
+      options = await prerenderOptionsCache?.getItem(key);
+    if (!options) {
+      const payload = await fetchPathHtmlAndExtractOptions(e, basePath, key);
+      if (payload instanceof Error)
+        return payload;
+      options = payload;
+    }
+  }
+  delete queryParams.options;
+  const routeRuleMatcher = createNitroRouteRuleMatcher();
+  const routeRules = routeRuleMatcher(basePath);
+  if (typeof routeRules.ogImage === "undefined" && !options) {
+    return createError({
+      statusCode: 400,
+      statusMessage: "The route is missing the Nuxt OG Image payload or route rules."
+    });
+  }
+  const ogImageRouteRules = separateProps(routeRules.ogImage);
+  options = defu(queryParams, ogImageRouteRules, options, runtimeConfig.defaults);
+  if (!options) {
+    return createError({
+      statusCode: 404,
+      statusMessage: "[Nuxt OG Image] OG Image not found."
+    });
+  }
+  let renderer;
+  switch (options.renderer) {
+    case "satori":
+      renderer = await useSatoriRenderer();
+      break;
+    case "chromium":
+      renderer = await useChromiumRenderer();
+      break;
+  }
+  if (!renderer || renderer.__unenv__) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: `[Nuxt OG Image] Renderer ${options.renderer} is missing.`
+    });
+  }
+  const ctx = {
+    e,
+    key,
+    renderer,
+    isDebugJsonPayload,
+    extension,
+    basePath,
+    options,
+    _nitro: useNitroApp()
+  };
+  await ctx._nitro.hooks.callHook("nuxt-og-image:context", ctx);
+  return ctx;
+}
+export function extractAndNormaliseOgImageOptions(html) {
+  const htmlPayload = html.match(/<script.+id="nuxt-og-image-options"[^>]*>(.+?)<\/script>/)?.[1];
+  if (!htmlPayload)
+    return false;
+  let options;
+  try {
+    const payload2 = JSON.parse(htmlPayload);
+    Object.entries(payload2).forEach(([key, value]) => {
+      if (!value)
+        delete payload2[key];
+    });
+    options = payload2;
+  } catch (e) {
+    if (import.meta.dev)
+      console.warn("Failed to parse #nuxt-og-image-options", e, options);
+  }
+  if (!options)
+    return false;
+  const description = html.match(/<meta[^>]+name="description"[^>]*>/)?.[0];
+  if (description) {
+    const [, content] = description.match(/content="([^"]+)"/) || [];
+    if (content && !options.props.description)
+      options.props.description = content;
+  }
+  const payload = decodeObjectHtmlEntities(options);
+  if (import.meta.dev) {
+    const socialPreview = {};
+    const socialMetaTags = html.match(/<meta[^>]+(property|name)="(twitter|og):([^"]+)"[^>]*>/g);
+    if (socialMetaTags) {
+      socialMetaTags.forEach((tag) => {
+        const [, , type, key] = tag.match(/(property|name)="(twitter|og):([^"]+)"/);
+        const value = tag.match(/content="([^"]+)"/)?.[1];
+        if (!value)
+          return;
+        if (!socialPreview[type])
+          socialPreview[type] = {};
+        socialPreview[type][key] = value;
+      });
+    }
+    payload.socialPreview = socialPreview;
+  }
+  return payload;
+}
+async function fetchPathHtmlAndExtractOptions(e, path, key) {
+  const cachedHtmlPayload = await htmlPayloadCache.getItem(key);
+  if (!import.meta.dev && cachedHtmlPayload && cachedHtmlPayload.expiresAt < Date.now())
+    return cachedHtmlPayload.value;
+  let html;
+  try {
+    html = await e.$fetch(path);
+  } catch (err) {
+    return createError({
+      statusCode: 500,
+      statusMessage: `[Nuxt OG Image] Failed to read the path ${path} for og-image extraction. ${err.message}.`
+    });
+  }
+  if (typeof html !== "string") {
+    return createError({
+      statusCode: 500,
+      statusMessage: `[Nuxt OG Image] Got invalid response from ${path} for og-image extraction.`
+    });
+  }
+  const payload = extractAndNormaliseOgImageOptions(html);
+  if (payload) {
+    await htmlPayloadCache.setItem(key, {
+      // 60 minutes for prerender, 10 seconds for runtime
+      expiresAt: Date.now() + 1e3 * (import.meta.prerender ? 60 * 60 : 10),
+      value: payload
+    });
+  }
+  return payload;
+}

package/dist/runtime/nitro/og-image/instances.d.ts

@@ -0,0 +1,2 @@
+export declare function useSatoriRenderer(): Promise<import("../../types").Renderer>;
+export declare function useChromiumRenderer(): Promise<import("../../types").Renderer>;

package/dist/runtime/nitro/og-image/instances.mjs

@@ -0,0 +1,10 @@
+const satoriRendererInstance = { instance: void 0 };
+const chromiumRendererInstance = { instance: void 0 };
+export async function useSatoriRenderer() {
+  satoriRendererInstance.instance = satoriRendererInstance.instance || await import("#nuxt-og-image/renderers/satori").then((m) => m.default);
+  return satoriRendererInstance.instance;
+}
+export async function useChromiumRenderer() {
+  chromiumRendererInstance.instance = chromiumRendererInstance.instance || await import("#nuxt-og-image/renderers/chromium").then((m) => m.default);
+  return chromiumRendererInstance.instance;
+}

package/dist/runtime/{core/font/fetch.d.ts → nitro/og-image/satori/font.d.ts}

@@ -1,2 +1,2 @@
-import type { OgImageRenderEventContext, ResolvedFontConfig } from '../../types';
+import type { OgImageRenderEventContext, ResolvedFontConfig } from '../../../types';
 export declare function loadFont({ e }: OgImageRenderEventContext, font: ResolvedFontConfig): Promise<ResolvedFontConfig>;

package/dist/runtime/nitro/og-image/satori/font.mjs

@@ -0,0 +1,33 @@
+import { prefixStorage } from "unstorage";
+import { useNitroOrigin, useStorage } from "#imports";
+const assets = prefixStorage(useStorage(), "/assets");
+export async function loadFont({ e }, font) {
+  const { name, weight } = font;
+  if (font.data)
+    return font;
+  if (font.key && await assets.hasItem(font.key)) {
+    let fontData = await assets.getItem(font.key);
+    if (fontData instanceof Uint8Array) {
+      const decoder = new TextDecoder();
+      fontData = decoder.decode(fontData);
+    }
+    font.data = Buffer.from(fontData, "base64");
+    return font;
+  }
+  let data;
+  if (font.path) {
+    data = await e.$fetch(font.path, {
+      baseURL: useNitroOrigin(e),
+      responseType: "arrayBuffer"
+    });
+  } else {
+    data = await e.$fetch(`/__og-image__/font/${name}/${weight}.ttf`, {
+      responseType: "arrayBuffer",
+      query: {
+        font
+      }
+    });
+  }
+  font.data = data;
+  return font;
+}

package/dist/runtime/{core/renderers → nitro/og-image}/satori/instances.d.ts

@@ -1,6 +1,4 @@
 import type _satori from 'satori';
-export declare function useSatoriRenderer(): Promise<import("../../../types").Renderer>;
-export declare function useChromiumRenderer(): Promise<import("../../../types").Renderer>;
 export declare function useResvg(): Promise<new (svg: string | Uint8Array, options?: import("@resvg/resvg-wasm").ResvgRenderOptions | undefined) => {
     free(): void;
     render(): {

package/dist/runtime/{core/renderers → nitro/og-image}/satori/instances.mjs

@@ -2,16 +2,6 @@ const cssInlineInstance = { instance: void 0 };
 const sharpInstance = { instance: void 0 };
 const resvgInstance = { instance: void 0 };
 const satoriInstance = { instance: void 0 };
-const satoriRendererInstance = { instance: void 0 };
-const chromiumRendererInstance = { instance: void 0 };
-export async function useSatoriRenderer() {
-  satoriRendererInstance.instance = satoriRendererInstance.instance || await import("#nuxt-og-image/renderers/satori").then((m) => m.default);
-  return satoriRendererInstance.instance;
-}
-export async function useChromiumRenderer() {
-  chromiumRendererInstance.instance = chromiumRendererInstance.instance || await import("#nuxt-og-image/renderers/chromium").then((m) => m.default);
-  return chromiumRendererInstance.instance;
-}
 export async function useResvg() {
   resvgInstance.instance = resvgInstance.instance || await import("#nuxt-og-image/bindings/resvg").then((m) => m.default);
   await resvgInstance.instance.initWasmPromise;
@@ -28,5 +18,6 @@ export async function useSharp() {
 }
 export async function useCssInline() {
   cssInlineInstance.instance = cssInlineInstance.instance || await import("#nuxt-og-image/bindings/css-inline").then((m) => m.default);
-  return cssInlineInstance.instance;
+  await cssInlineInstance.instance.initWasmPromise;
+  return cssInlineInstance.instance.cssInline;
 }

package/dist/runtime/nitro/og-image/satori/plugins/classes.mjs

@@ -0,0 +1,17 @@
+import { defineSatoriTransformer } from "../utils.mjs";
+export default defineSatoriTransformer([
+  {
+    filter: (node) => !!node.props?.class && !node.props?.tw,
+    transform: async (node) => {
+      node.props.tw = node.props.class;
+      node.props.tw = node.props.tw.replace(/icon|inline-style/g, "");
+    }
+  },
+  {
+    filter: (node) => !!node.props?.style?.display,
+    transform: async (node) => {
+      if (["inline-block", "inline"].includes(node.props.style.display))
+        delete node.props.style.display;
+    }
+  }
+]);

package/dist/runtime/nitro/og-image/satori/plugins/encoding.mjs

@@ -0,0 +1,17 @@
+import { defineSatoriTransformer } from "../utils.mjs";
+import { decodeHtml } from "../../../util/encoding.mjs";
+export default defineSatoriTransformer([
+  // clean up
+  {
+    filter: (node) => node.props?.["data-v-inspector"],
+    transform: async (node) => {
+      delete node.props["data-v-inspector"];
+    }
+  },
+  {
+    filter: (node) => typeof node.props?.children === "string",
+    transform: async (node) => {
+      node.props.children = decodeHtml(node.props.children);
+    }
+  }
+]);

package/dist/runtime/nitro/og-image/satori/plugins/imageSrc.mjs

@@ -0,0 +1,82 @@
+import { withBase } from "ufo";
+import sizeOf from "image-size";
+import { defineSatoriTransformer } from "../utils.mjs";
+import { toBase64Image } from "../../../../pure.mjs";
+import { useNitroOrigin, useStorage } from "#imports";
+export default defineSatoriTransformer([
+  // fix <img src="">
+  {
+    filter: (node) => node.type === "img" && node.props?.src,
+    transform: async (node, { e }) => {
+      const src = node.props.src;
+      const isRelative = src.startsWith("/");
+      let dimensions;
+      let imageBuffer;
+      if (isRelative) {
+        if (import.meta.prerender || import.meta.dev) {
+          const key = `root:public${src.replace("./", ":").replace("/", ":")}`;
+          if (await useStorage().hasItem(key))
+            imageBuffer = await useStorage().getItemRaw(key);
+        } else {
+          imageBuffer = await e.$fetch(src, {
+            baseURL: useNitroOrigin(e),
+            responseType: "arrayBuffer"
+          }).catch(() => {
+          });
+        }
+      } else {
+        imageBuffer = await $fetch(src, {
+          responseType: "arrayBuffer"
+        }).catch(() => {
+        });
+      }
+      if (imageBuffer)
+        imageBuffer = Buffer.from(imageBuffer);
+      if (imageBuffer) {
+        node.props.src = toBase64Image(src, imageBuffer);
+        try {
+          const imageSize = sizeOf(imageBuffer);
+          dimensions = { width: imageSize.width, height: imageSize.height };
+        } catch (e2) {
+        }
+      }
+      if (dimensions?.width && dimensions?.height) {
+        const naturalAspectRatio = dimensions.width / dimensions.height;
+        if (node.props.width && !node.props.height) {
+          node.props.height = Math.round(node.props.width / naturalAspectRatio);
+        } else if (node.props.height && !node.props.width) {
+          node.props.width = Math.round(node.props.height * naturalAspectRatio);
+        } else if (!node.props.width && !node.props.height) {
+          node.props.width = dimensions.width;
+          node.props.height = dimensions.height;
+        }
+      }
+      if (node.props.src.startsWith("/")) {
+        node.props.src = `${withBase(src, `${useNitroOrigin(e)}`)}?${Date.now()}`;
+      }
+    }
+  },
+  // fix style="background-image: url('')"
+  {
+    filter: (node) => node.props?.style?.backgroundImage?.includes("url("),
+    transform: async (node, { e }) => {
+      const backgroundImage = node.props.style.backgroundImage;
+      const src = backgroundImage.replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "");
+      const isRelative = src?.startsWith("/");
+      if (isRelative) {
+        if (import.meta.prerender || import.meta.dev) {
+          const key = `root:public${src.replace("./", ":").replace("/", ":")}`;
+          if (await useStorage().hasItem(key)) {
+            const imageBuffer = await useStorage().getItemRaw(key);
+            if (imageBuffer) {
+              const base64 = toBase64Image(src, Buffer.from(imageBuffer));
+              node.props.style.backgroundImage = `url(${base64})`;
+            }
+          }
+        } else {
+          node.props.style.backgroundImage = `url(${withBase(src, `${useNitroOrigin(e)}`)}?${Date.now()})`;
+        }
+      }
+    }
+  }
+]);

package/dist/runtime/{core/renderers/satori/index.mjs → nitro/og-image/satori/renderer.mjs}

@@ -1,16 +1,18 @@
 import { defu } from "defu";
-import { normaliseFontInput, useOgImageRuntimeConfig } from "../../../utils.mjs";
-import { loadFont } from "../../font/fetch.mjs";
-import { fontCache, fontPromises } from "../../cache/fonts.mjs";
+import { createStorage } from "unstorage";
+import lruCacheDriver from "unstorage/drivers/lru-cache";
+import { normaliseFontInput, useOgImageRuntimeConfig } from "../../../shared.mjs";
+import { loadFont } from "./font.mjs";
 import { createVNodes } from "./vnodes.mjs";
 import { useResvg, useSatori, useSharp } from "./instances.mjs";
 import { theme } from "#nuxt-og-image/unocss-config.mjs";
-export async function createSvg(event) {
-  const { options } = event;
-  const { fonts, satoriOptions } = useOgImageRuntimeConfig();
-  const vnodes = await createVNodes(event);
-  await event._nitro.hooks.callHook("nuxt-og-image:satori:vnodes", vnodes, event);
-  const normalisedFonts = normaliseFontInput([...fonts, ...event.options.fonts || []]);
+const fontPromises = {};
+const fontCache = createStorage({
+  driver: lruCacheDriver({ max: 10 })
+});
+async function resolveFonts(event) {
+  const { fonts } = useOgImageRuntimeConfig();
+  const normalisedFonts = normaliseFontInput([...event.options.fonts || [], ...fonts]);
   const localFontPromises = [];
   const preloadedFonts = [];
   for (const font of normalisedFonts) {
@@ -29,16 +31,27 @@ export async function createSvg(event) {
     }
   }
   const awaitedFonts = await Promise.all(localFontPromises);
-  const satori = await useSatori();
-  return satori(vnodes, defu(options.satori, satoriOptions, {
-    fonts: [...preloadedFonts, ...awaitedFonts].map((_f) => {
-      return { ..._f, weight: Number(_f.weight) };
-    }),
+  return [...preloadedFonts, ...awaitedFonts].map((_f) => {
+    return { name: _f.name, data: _f.data, style: _f.style, weight: Number(_f.weight) };
+  });
+}
+export async function createSvg(event) {
+  const { options } = event;
+  const { satoriOptions: _satoriOptions } = useOgImageRuntimeConfig();
+  const [satori, vnodes, fonts] = await Promise.all([
+    useSatori(),
+    createVNodes(event),
+    resolveFonts(event)
+  ]);
+  await event._nitro.hooks.callHook("nuxt-og-image:satori:vnodes", vnodes, event);
+  const satoriOptions = defu(options.satori, _satoriOptions, {
+    fonts,
     tailwindConfig: { theme },
     embedFont: true,
     width: options.width,
     height: options.height
-  }));
+  });
+  return satori(vnodes, satoriOptions);
 }
 async function createPng(event) {
   const { resvgOptions } = useOgImageRuntimeConfig();

package/dist/runtime/{core/html/applyEmojis.d.ts → nitro/og-image/satori/transforms/emojis.d.ts}

@@ -1,3 +1,5 @@
 import type { NuxtIslandResponse } from 'nuxt/dist/core/runtime/nitro/renderer';
-import type { OgImageRenderEventContext } from '../../types';
+import type { Storage } from 'unstorage';
+import type { OgImageRenderEventContext } from '../../../../types';
+export declare const emojiCache: Storage<string>;
 export declare function applyEmojis(ctx: OgImageRenderEventContext, island: NuxtIslandResponse): Promise<string | boolean>;