nuxt-og-image 2.0.0-beta.9 → 2.0.0

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

@@ -0,0 +1,33 @@
+import playwrightCore from "playwright-core";
+export default async function createBrowser() {
+  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({
+      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/png/resvg-node.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="node" />
+import type { ResvgRenderOptions } from '@resvg/resvg-js';
+import type { RuntimeOgImageOptions } from '../../../../types';
+export default function (svg: string, options: ResvgRenderOptions & RuntimeOgImageOptions): Promise<Buffer>;

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

@@ -0,0 +1,6 @@
+import { Resvg } from "@resvg/resvg-js";
+export default async function(svg, options) {
+  const resvgJS = new Resvg(svg, options);
+  const pngData = resvgJS.render();
+  return pngData.asPng();
+}

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

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

package/dist/runtime/nitro/providers/png/resvg-wasm.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(options);
+  await initWasm(ReSvgWasm).catch(() => {
+  });
+  const resvgJS = new Resvg(svg, options);
+  const pngData = resvgJS.render();
+  return pngData.asPng();
+}

package/dist/runtime/nitro/providers/{svg2png/universal.d.ts → png/svg2png.d.ts}

@@ -1,4 +1,3 @@
 import type { ConvertOptions } from 'svg2png-wasm';
-export default function (svg: string, options: ConvertOptions & {
-    baseUrl: string;
-}): Promise<Uint8Array>;
+import type { RuntimeOgImageOptions } from '../../../../types';
+export default function (svg: string, options: ConvertOptions & RuntimeOgImageOptions): Promise<Uint8Array>;

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(options);
+  await initialize(Svg2PngWasm).catch((e) => {
+    if (!e.message.trim().endsWith("function can be used only once."))
+      throw e;
+  });
+  return await svg2png(svg, options);
+}

package/dist/runtime/nitro/providers/satori/{webworker.d.ts → yoga-wasm.d.ts}

@@ -1,4 +1,3 @@
 import type { SatoriOptions } from 'satori';
-export default function (nodes: string, options: SatoriOptions & {
-    baseUrl: string;
-}): Promise<string>;
+import type { RuntimeOgImageOptions } from '../../../../types';
+export default function (nodes: string, options: SatoriOptions & RuntimeOgImageOptions): Promise<string>;

package/dist/runtime/nitro/providers/satori/{webworker.mjs → yoga-wasm.mjs}

@@ -1,11 +1,10 @@
 import satori, { init } from "satori/wasm";
 import initYoga from "yoga-wasm-web";
 import { wasmLoader } from "../../utils.mjs";
+const YogaLoader = wasmLoader("/* NUXT_OG_IMAGE_YOGA_WASM */", "/yoga.wasm");
 export default async function(nodes, options) {
-  const loader = wasmLoader("/* NUXT_OG_IMAGE_YOGA_WASM */", "/yoga.wasm", options.baseUrl);
-  if (!await loader.loaded()) {
-    const yoga = await initYoga(await loader.load());
-    init(yoga);
-  }
+  const yogaWasm = await YogaLoader.load(options);
+  const yoga = await initYoga(yogaWasm);
+  init(yoga);
   return await satori(nodes, options);
 }

package/dist/runtime/nitro/renderers/browser.d.ts

@@ -1,3 +1,3 @@
 import type { Renderer } from '../../../types';
-declare const _default: Renderer;
-export default _default;
+declare const BrowserRenderer: Renderer;
+export default BrowserRenderer;

package/dist/runtime/nitro/renderers/browser.mjs

@@ -1,8 +1,6 @@
-import { withBase } from "ufo";
 import { screenshot } from "../../browserUtil.mjs";
-import loadBrowser from "#nuxt-og-image/browser";
-import { useRuntimeConfig } from "#imports";
-export default {
+import loadBrowserLauncherChunk from "#nuxt-og-image/browser";
+const BrowserRenderer = {
   name: "browser",
   createSvg: async function createSvg() {
     throw new Error("Browser provider can't create SVGs.");
@@ -10,21 +8,25 @@ export default {
   createVNode: async function createVNode() {
     throw new Error("Browser provider can't create VNodes.");
   },
-  createPng: async function createPng(basePath, options) {
-    const url = new URL(basePath);
-    const createBrowser = await loadBrowser();
-    const browser = await createBrowser();
+  createPng: async function createPng(options) {
+    const launchBrowser = await loadBrowserLauncherChunk();
+    if (!launchBrowser) {
+      throw new Error("Failed to load browser. Is the `browserProvider` enabled?");
+    }
+    const browser = await launchBrowser();
+    let res = null;
     if (browser) {
       try {
-        return await screenshot(browser, {
+        res = await screenshot(browser, {
           ...options,
-          host: withBase(useRuntimeConfig().app.baseURL, url.origin),
-          path: `/api/og-image-html?path=${url.pathname}`
+          host: options.requestOrigin,
+          path: `/api/og-image-html?path=${options.path}`
         });
       } finally {
         browser.close();
       }
     }
-    return null;
+    return res;
   }
 };
+export default BrowserRenderer;

package/dist/runtime/nitro/renderers/satori/index.d.ts

@@ -1,3 +1,3 @@
 import type { Renderer } from '../../../../types';
-declare const _default: Renderer;
-export default _default;
+declare const SatoriRenderer: Renderer;
+export default SatoriRenderer;

package/dist/runtime/nitro/renderers/satori/index.mjs

@@ -1,59 +1,53 @@
 import { html as convertHtmlToSatori } from "satori-html";
-import { parseURL } from "ufo";
-import twemoji from "twemoji";
 import { loadFont, walkSatoriTree } from "./utils.mjs";
 import imageSrc from "./plugins/imageSrc.mjs";
 import twClasses from "./plugins/twClasses.mjs";
 import flex from "./plugins/flex.mjs";
 import emojis from "./plugins/emojis.mjs";
 import encoding from "./plugins/encoding.mjs";
-import loadSvg2png from "#nuxt-og-image/svg2png";
+import loadPngCreator from "#nuxt-og-image/png";
 import loadSatori from "#nuxt-og-image/satori";
-import { useRuntimeConfig } from "#internal/nitro";
+import { useRuntimeConfig } from "#imports";
 const satoriFonts = [];
 let fontLoadPromise = null;
-function loadFonts(fonts) {
+function loadFonts(baseURL, fonts) {
   if (fontLoadPromise)
     return fontLoadPromise;
-  return fontLoadPromise = Promise.all(fonts.map((font) => loadFont(font)));
+  return fontLoadPromise = Promise.all(fonts.map((font) => loadFont(baseURL, font)));
 }
-export default {
+const SatoriRenderer = {
   name: "satori",
-  createPng: async function createPng(baseUrl, options) {
-    const svg = await this.createSvg(baseUrl, options);
-    const svg2png = await loadSvg2png();
-    return svg2png(svg, { baseUrl, ...options });
+  createPng: async function createPng(options) {
+    const svg = await this.createSvg(options);
+    const pngCreator = await loadPngCreator();
+    return pngCreator(svg, options);
   },
-  createVNode: async function createVNode(baseUrl, options) {
-    const url = parseURL(baseUrl);
+  createVNode: async function createVNode(options) {
     const html = await globalThis.$fetch("/api/og-image-html", {
-      query: { path: url.pathname, options: JSON.stringify(options) }
+      params: {
+        path: options.path,
+        options: JSON.stringify(options)
+      }
     });
-    const body = html.match(/<body[^>]*>([\s\S]*)<\/body>/)?.[1];
-    const emojiedFont = twemoji.parse(body, {
-      folder: "svg",
-      ext: ".svg"
-    });
-    const satoriTree = convertHtmlToSatori(emojiedFont);
-    await walkSatoriTree(url, satoriTree, [
-      // @todo add user land support
-      emojis(url),
-      twClasses(url),
-      imageSrc(url),
-      flex(url),
-      encoding(url)
-    ]);
+    const body = html.match(/<body[^>]*>([\s\S]*)<\/body>/)?.[1] || "";
+    const satoriTree = convertHtmlToSatori(body);
+    await walkSatoriTree(satoriTree, [
+      emojis,
+      twClasses,
+      imageSrc,
+      flex,
+      encoding
+    ], options);
     return satoriTree;
   },
-  createSvg: async function createSvg(baseUrl, options) {
+  createSvg: async function createSvg(options) {
     const { fonts, satoriOptions } = useRuntimeConfig()["nuxt-og-image"];
-    const vnodes = await this.createVNode(baseUrl, options);
+    const vnodes = await this.createVNode(options);
     if (!satoriFonts.length)
-      satoriFonts.push(...await loadFonts(fonts));
+      satoriFonts.push(...await loadFonts(options.requestOrigin, fonts));
     const satori = await loadSatori();
     return await satori(vnodes, {
       ...satoriOptions,
-      baseUrl,
       fonts: satoriFonts,
       embedFont: true,
       width: options.width,
@@ -61,3 +55,4 @@ export default {
     });
   }
 };
+export default SatoriRenderer;

package/dist/runtime/nitro/renderers/satori/plugins/emojis.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer;
+declare const _default: import("../../../../../types").SatoriTransformer | import("../../../../../types").SatoriTransformer[];
 export default _default;

package/dist/runtime/nitro/renderers/satori/plugins/emojis.mjs

@@ -1,13 +1,26 @@
 import { defineSatoriTransformer } from "../utils.mjs";
-export default defineSatoriTransformer(() => {
-  return {
-    filter: (node) => node.type === "img" && node.props?.class?.includes("emoji"),
+function isEmojiFilter(node) {
+  return node.type === "img" && node.props?.class?.includes("emoji");
+}
+export default defineSatoriTransformer([
+  // need to make sure parent div has flex for the emoji to render inline
+  {
+    filter: (node) => node.type === "div" && Array.isArray(node.props?.children) && node.props.children.some(isEmojiFilter),
+    transform: async (node) => {
+      node.props.style = node.props.style || {};
+      node.props.style.display = "flex";
+      node.props.style.alignItems = "center";
+    }
+  },
+  {
+    filter: isEmojiFilter,
     transform: async (node) => {
       node.props.style = node.props.style || {};
       node.props.style.height = "1em";
       node.props.style.width = "1em";
-      node.props.style.margin = "0 .05em 0 .1em";
+      node.props.style.margin = "0 .3em 0 .3em";
       node.props.style.verticalAlign = "0.1em";
+      node.props.class = "";
     }
-  };
-});
+  }
+]);

package/dist/runtime/nitro/renderers/satori/plugins/encoding.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer;
+declare const _default: import("../../../../../types").SatoriTransformer | import("../../../../../types").SatoriTransformer[];
 export default _default;

package/dist/runtime/nitro/renderers/satori/plugins/encoding.mjs

@@ -1,10 +1,8 @@
 import { defineSatoriTransformer } from "../utils.mjs";
 import { decodeHtml } from "../../../utils-pure.mjs";
-export default defineSatoriTransformer(() => {
-  return {
-    filter: (node) => typeof node.props?.children === "string",
-    transform: async (node) => {
-      node.props.children = decodeHtml(node.props.children);
-    }
-  };
+export default defineSatoriTransformer({
+  filter: (node) => typeof node.props?.children === "string",
+  transform: async (node) => {
+    node.props.children = decodeHtml(node.props.children);
+  }
 });

package/dist/runtime/nitro/renderers/satori/plugins/flex.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer;
+declare const _default: import("../../../../../types").SatoriTransformer | import("../../../../../types").SatoriTransformer[];
 export default _default;

package/dist/runtime/nitro/renderers/satori/plugins/flex.mjs

@@ -1,12 +1,10 @@
 import { defineSatoriTransformer } from "../utils.mjs";
-export default defineSatoriTransformer(() => {
-  return {
-    filter: (node) => node.type === "div" && (Array.isArray(node.props?.children) && node.props?.children.length >= 1) && (!node.props.style?.display && !node.props?.class?.includes("hidden")),
-    transform: async (node) => {
-      node.props.style = node.props.style || {};
-      node.props.style.display = "flex";
-      if (!node.props?.class?.includes("flex-"))
-        node.props.style.flexDirection = "column";
-    }
-  };
+export default defineSatoriTransformer({
+  filter: (node) => node.type === "div" && (Array.isArray(node.props?.children) && node.props?.children.length >= 1) && (!node.props.style?.display && !node.props?.class?.includes("hidden")),
+  transform: async (node) => {
+    node.props.style = node.props.style || {};
+    node.props.style.display = "flex";
+    if (!node.props?.class?.includes("flex-"))
+      node.props.style.flexDirection = "column";
+  }
 });

package/dist/runtime/nitro/renderers/satori/plugins/imageSrc.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer;
+declare const _default: import("../../../../../types").SatoriTransformer | import("../../../../../types").SatoriTransformer[];
 export default _default;

package/dist/runtime/nitro/renderers/satori/plugins/imageSrc.mjs

@@ -1,18 +1,50 @@
+import { Buffer } from "node:buffer";
 import { withBase } from "ufo";
+import sizeOf from "image-size";
 import { defineSatoriTransformer } from "../utils.mjs";
-import { readPublicAssetBase64 } from "../../../utils.mjs";
-export default defineSatoriTransformer((url) => {
-  return {
-    filter: (node) => node.type === "img",
-    transform: async (node) => {
-      const src = node.props?.src;
-      if (src && src.startsWith("/")) {
-        const file = await readPublicAssetBase64(src);
-        if (file)
-          node.props.src = file;
-        else
-          node.props.src = withBase(src, `${url.protocol}//${url.host}`);
+import { readPublicAssetBase64, toBase64Image } from "../../../utils.mjs";
+export default defineSatoriTransformer({
+  filter: (node) => node.type === "img",
+  transform: async (node, options) => {
+    const src = node.props?.src;
+    if (src && src.startsWith("/")) {
+      let updated = false;
+      const file = await readPublicAssetBase64(src);
+      let dimensions;
+      if (file) {
+        node.props.src = file.src;
+        dimensions = { width: file.width, height: file.height };
+        updated = true;
+      }
+      if (!updated) {
+        let valid = true;
+        const response = await globalThis.$fetch(src, {
+          responseType: "arrayBuffer",
+          baseURL: options.requestOrigin
+        }).catch(() => {
+          valid = false;
+        });
+        if (valid) {
+          node.props.src = toBase64Image(src, response);
+          const imageSize = await sizeOf(Buffer.from(response));
+          dimensions = { width: imageSize.width, height: imageSize.height };
+          updated = true;
+        }
+      }
+      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 (!updated) {
+        node.props.src = `${withBase(src, `${options.requestOrigin}`)}?${Date.now()}`;
       }
     }
-  };
+  }
 });

package/dist/runtime/nitro/renderers/satori/plugins/twClasses.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer;
+declare const _default: import("../../../../../types").SatoriTransformer | import("../../../../../types").SatoriTransformer[];
 export default _default;

package/dist/runtime/nitro/renderers/satori/plugins/twClasses.mjs

@@ -1,9 +1,7 @@
 import { defineSatoriTransformer } from "../utils.mjs";
-export default defineSatoriTransformer(() => {
-  return {
-    filter: (node) => !!node.props?.class && !node.props?.tw,
-    transform: async (node) => {
-      node.props.tw = node.props.class;
-    }
-  };
+export default defineSatoriTransformer({
+  filter: (node) => !!node.props?.class && !node.props?.tw,
+  transform: async (node) => {
+    node.props.tw = node.props.class;
+  }
 });

package/dist/runtime/nitro/renderers/satori/utils.d.ts

@@ -1,5 +1,4 @@
-import type { ParsedURL } from 'ufo';
-import type { SatoriTransformer, VNode } from '../../../../types';
-export declare function loadFont(font: string): Promise<any>;
-export declare function walkSatoriTree(url: ParsedURL, node: VNode, plugins: SatoriTransformer[]): Promise<void>;
-export declare function defineSatoriTransformer(transformer: (url: ParsedURL) => SatoriTransformer): (url: ParsedURL) => SatoriTransformer;
+import type { FontConfig, RuntimeOgImageOptions, SatoriTransformer, VNode } from '../../../../types';
+export declare function loadFont(requestOrigin: string, font: FontConfig): Promise<any>;
+export declare function walkSatoriTree(node: VNode, plugins: (SatoriTransformer | SatoriTransformer[])[], props: RuntimeOgImageOptions): Promise<void>;
+export declare function defineSatoriTransformer(transformer: SatoriTransformer | SatoriTransformer[]): SatoriTransformer | SatoriTransformer[];

package/dist/runtime/nitro/renderers/satori/utils.mjs

@@ -1,20 +1,30 @@
+import { Buffer } from "node:buffer";
 import { base64ToArrayBuffer, readPublicAsset } from "../../utils.mjs";
-import { useStorage } from "#internal/nitro";
+import { useStorage } from "#imports";
 const cachedFonts = {};
-export async function loadFont(font) {
-  if (cachedFonts[font])
-    return cachedFonts[font];
+export async function loadFont(requestOrigin, font) {
+  const fontKey = `${font.name}:${font.weight}`;
+  const storageKey = `assets:nuxt-og-image:font:${fontKey}`;
+  if (cachedFonts[fontKey])
+    return cachedFonts[fontKey];
+  const [name, weight] = fontKey.split(":");
   let data;
-  const storageKey = `assets:nuxt-og-imagee:font:${font}`;
-  if (await useStorage().hasItem(storageKey)) {
+  if (await useStorage().hasItem(storageKey))
     data = base64ToArrayBuffer(await useStorage().getItem(storageKey));
-    return cachedFonts[font] = { name: font, data, style: "normal" };
+  if (!data && name === "Inter" && ["400", "700"].includes(weight)) {
+    data = await readPublicAsset(`/inter-latin-ext-${weight}-normal.woff`);
   }
-  const [name, weight] = font.split(":");
-  if (name === "Inter" && ["400", "700"].includes(weight)) {
-    const data2 = await readPublicAsset(`/inter-latin-ext-${weight}-normal.woff`);
-    if (data2)
-      return cachedFonts[font] = { name, weight: Number(weight), data: data2, style: "normal" };
+  if (font.path) {
+    data = await readPublicAsset(font.path);
+    if (!data) {
+      try {
+        data = await globalThis.$fetch(font.path, {
+          responseType: "arrayBuffer",
+          baseURL: requestOrigin
+        });
+      } catch {
+      }
+    }
   }
   if (!data) {
     const fontUrl = await globalThis.$fetch("/api/og-image-font", {
@@ -24,10 +34,11 @@ export async function loadFont(font) {
       responseType: "arrayBuffer"
     });
   }
+  cachedFonts[fontKey] = { name, weight: Number(weight), data, style: "normal" };
   await useStorage().setItem(storageKey, Buffer.from(data).toString("base64"));
-  return cachedFonts[font] = { name, weight: Number(weight), data, style: "normal" };
+  return cachedFonts[fontKey];
 }
-export async function walkSatoriTree(url, node, plugins) {
+export async function walkSatoriTree(node, plugins, props) {
   if (!node.props?.children)
     return;
   if (Array.isArray(node.props.children) && node.props.children.length === 0) {
@@ -36,11 +47,11 @@ export async function walkSatoriTree(url, node, plugins) {
   }
   for (const child of node.props.children || []) {
     if (child) {
-      for (const plugin of plugins) {
+      for (const plugin of plugins.flat()) {
         if (plugin.filter(child))
-          await plugin.transform(child);
+          await plugin.transform(child, props);
       }
-      await walkSatoriTree(url, child, plugins);
+      await walkSatoriTree(child, plugins, props);
     }
   }
 }

package/dist/runtime/nitro/routes/debug.d.ts

@@ -0,0 +1,8 @@
+declare const _default: import("h3").EventHandler<{
+    siteConfigUrl: {
+        value: any;
+        source: any;
+    };
+    runtimeConfig: any;
+}>;
+export default _default;

package/dist/runtime/nitro/routes/debug.mjs

@@ -0,0 +1,14 @@
+import { defineEventHandler, setHeader } from "h3";
+import { useRuntimeConfig, useSiteConfig } from "#imports";
+export default defineEventHandler(async (e) => {
+  setHeader(e, "Content-Type", "application/json");
+  const runtimeConfig = useRuntimeConfig()["nuxt-og-image"];
+  const siteConfig = await useSiteConfig(e);
+  return {
+    siteConfigUrl: {
+      value: siteConfig.url,
+      source: siteConfig._context.url || "unknown"
+    },
+    runtimeConfig
+  };
+});

package/dist/runtime/nitro/routes/font.mjs

@@ -1,6 +1,6 @@
 import { getQuery } from "h3";
-import { defineCachedEventHandler } from "#internal/nitro";
-export default defineCachedEventHandler(async (e) => {
+import { cachedEventHandler } from "#imports";
+export default cachedEventHandler(async (e) => {
   const { name, weight } = getQuery(e);
   if (!name || !weight)
     return "Provide a font name and weight";