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

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({ baseUrl: options.baseUrl });
+  const yoga = await initYoga(yogaWasm);
+  init(yoga);
   return await satori(nodes, options);
 }

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

@@ -1,6 +1,6 @@
 import { withBase } from "ufo";
 import { screenshot } from "../../browserUtil.mjs";
-import loadBrowser from "#nuxt-og-image/browser";
+import loadBrowserLauncherChunk from "#nuxt-og-image/browser";
 import { useRuntimeConfig } from "#imports";
 export default {
   name: "browser",
@@ -12,14 +12,15 @@ export default {
   },
   createPng: async function createPng(basePath, options) {
     const url = new URL(basePath);
-    const createBrowser = await loadBrowser();
-    if (!createBrowser) {
+    const launchBrowser = await loadBrowserLauncherChunk();
+    if (!launchBrowser) {
       throw new Error("Failed to load browser. Is the `browserProvider` enabled?");
     }
-    const browser = await createBrowser();
+    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}`
@@ -28,6 +29,6 @@ export default {
         browser.close();
       }
     }
-    return null;
+    return res;
   }
 };

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

@@ -7,9 +7,9 @@ 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 { useNitroApp, useRuntimeConfig } from "#internal/nitro";
 const satoriFonts = [];
 let fontLoadPromise = null;
 function loadFonts(fonts) {
@@ -21,20 +21,22 @@ export default {
   name: "satori",
   createPng: async function createPng(baseUrl, options) {
     const svg = await this.createSvg(baseUrl, options);
-    const svg2png = await loadSvg2png();
-    return svg2png(svg, { baseUrl, ...options });
+    const pngCreator = await loadPngCreator();
+    return pngCreator(svg, { baseUrl, ...options });
   },
   createVNode: async function createVNode(baseUrl, options) {
     const url = parseURL(baseUrl);
-    const html = await globalThis.$fetch("/api/og-image-html", {
-      query: { path: url.pathname, 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);
+    const nitroApp = useNitroApp();
+    const html = await (await nitroApp.localFetch(`/api/og-image-html?path=${url.pathname}&options=${encodeURI(JSON.stringify(options))}`)).text();
+    let body = html.match(/<body[^>]*>([\s\S]*)<\/body>/)?.[1] || "";
+    try {
+      body = twemoji.parse(body, {
+        folder: "svg",
+        ext: ".svg"
+      });
+    } catch (e) {
+    }
+    const satoriTree = convertHtmlToSatori(body);
     await walkSatoriTree(url, satoriTree, [
       // @todo add user land support
       emojis(url),

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

@@ -1,17 +1,41 @@
 import { withBase } from "ufo";
 import { defineSatoriTransformer } from "../utils.mjs";
 import { readPublicAssetBase64 } from "../../../utils.mjs";
+import { useNitroApp } from "#internal/nitro";
 export default defineSatoriTransformer((url) => {
   return {
     filter: (node) => node.type === "img",
     transform: async (node) => {
       const src = node.props?.src;
       if (src && src.startsWith("/")) {
+        let updated = false;
         const file = await readPublicAssetBase64(src);
-        if (file)
+        if (file) {
           node.props.src = file;
-        else
-          node.props.src = withBase(src, `${url.protocol}//${url.host}`);
+          updated = true;
+        }
+        if (!updated) {
+          try {
+            const response = await globalThis.$fetch(src);
+            node.props.src = response.arrayBuffer();
+            updated = true;
+          } catch (e) {
+          }
+        }
+        if (!updated) {
+          const nitroApp = useNitroApp();
+          try {
+            const response = await nitroApp.localFetch(src);
+            if (response.status === 200) {
+              node.props.src = response.arrayBuffer();
+              updated = true;
+            }
+          } catch (e) {
+          }
+        }
+        if (!updated) {
+          node.props.src = `${withBase(src, `${url.protocol}//${url.host}`)}?${Date.now()}`;
+        }
       }
     }
   };

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

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

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

@@ -0,0 +1,9 @@
+import { defineEventHandler, setHeader } from "h3";
+import { useRuntimeConfig } from "#imports";
+export default defineEventHandler(async (e) => {
+  setHeader(e, "Content-Type", "application/json");
+  const runtimeConfig = useRuntimeConfig()["nuxt-og-image"];
+  return {
+    runtimeConfig
+  };
+});

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

@@ -1,9 +1,10 @@
 import { withBase } from "ufo";
 import { renderSSRHead } from "@unhead/ssr";
 import { createHeadCore } from "@unhead/vue";
-import { defineEventHandler, getQuery, sendRedirect } from "h3";
-import { fetchOptions, renderIsland, useHostname } from "../utils.mjs";
+import { createError, defineEventHandler, getQuery, sendRedirect } from "h3";
+import { fetchOptions, useHostname } from "../utils.mjs";
 import { useRuntimeConfig } from "#imports";
+import { useNitroApp } from "#internal/nitro";
 export default defineEventHandler(async (e) => {
   const { fonts, defaults } = useRuntimeConfig()["nuxt-og-image"];
   const query = getQuery(e);
@@ -19,7 +20,14 @@ export default defineEventHandler(async (e) => {
     const pathWithoutBase = path.replace(new RegExp(`^${useRuntimeConfig().app.baseURL}`), "");
     return sendRedirect(e, withBase(pathWithoutBase, useHostname(e)));
   }
-  const island = await renderIsland(options);
+  if (!options.component) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: `Nuxt OG Image trying to render an invalid component. Received options ${JSON.stringify(options)}`
+    });
+  }
+  const nitroApp = useNitroApp();
+  const island = await (await nitroApp.localFetch(`/__nuxt_island/${options.component}?props=${encodeURI(JSON.stringify(options))}`)).json();
   const head = createHeadCore();
   head.push(island.head);
   head.push({

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

@@ -1,20 +1,21 @@
-import { createError, defineEventHandler, getHeaders, getQuery } from "h3";
+import { createError, defineEventHandler, getQuery } from "h3";
 import { withoutBase } from "ufo";
 import { extractOgImageOptions } from "../utils.mjs";
-import { useHostname } from "../util-hostname.mjs";
-import { getRouteRules } from "#internal/nitro";
+import { getRouteRules, useNitroApp } from "#internal/nitro";
 import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
   const query = getQuery(e);
   const path = withoutBase(query.path || "/", useRuntimeConfig().app.baseURL);
-  const fetchOptions = process.dev || process.env.prerender ? {
-    headers: getHeaders(e)
-  } : {
-    baseURL: useHostname(e)
-  };
-  const html = await globalThis.$fetch(path, {
-    ...fetchOptions
-  });
+  const nitro = useNitroApp();
+  let html;
+  try {
+    html = await (await nitro.localFetch(path)).text();
+  } catch (err) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: `Failed to read the path ${path} for og-image extraction. ${err.message}.`
+    });
+  }
   const extractedPayload = extractOgImageOptions(html);
   if (!extractedPayload) {
     throw createError({
@@ -23,8 +24,10 @@ export default defineEventHandler(async (e) => {
     });
   }
   e.node.req.url = path;
+  const oldRouteRules = e.context._nitro.routeRules;
   e.context._nitro.routeRules = void 0;
   const routeRules = getRouteRules(e)?.ogImage;
+  e.context._nitro.routeRules = oldRouteRules;
   e.node.req.url = e.path;
   if (routeRules === false)
     return false;
@@ -35,8 +38,6 @@ export default defineEventHandler(async (e) => {
     // use route rules
     ...routeRules || {},
     // use provided data
-    ...extractedPayload,
-    // use query data
-    ...query
+    ...extractedPayload
   };
 });

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

@@ -3,16 +3,13 @@ import { Buffer } from 'node:buffer';
 import type { H3Event } from 'h3';
 import type { OgImageOptions } from '../../types';
 export * from './util-hostname';
-export declare function wasmLoader(asyncModuleLoad: Promise<any>, fallback: string, baseUrl: string): {
-    loaded(): boolean | Promise<any>;
-    load(): Promise<any>;
+export declare function wasmLoader(asyncModuleLoad: Promise<any> | Buffer | string, fallback: string): {
+    load(options: {
+        baseUrl: string;
+    }): Promise<any>;
 };
 export declare function fetchOptions(e: H3Event, path: string): Promise<OgImageOptions>;
 export declare function base64ToArrayBuffer(base64: string): ArrayBuffer;
-export declare function renderIsland(payload: OgImageOptions): Promise<{
-    html: string;
-    head: any;
-}>;
 export declare function readPublicAsset(file: string, encoding?: BufferEncoding): Promise<string | Buffer | undefined>;
 export declare function readPublicAssetBase64(file: string): Promise<string | undefined>;
 export * from './utils-pure';

package/dist/runtime/nitro/utils.mjs

@@ -1,66 +1,74 @@
 import { existsSync, promises as fsp } from "node:fs";
 import { Buffer } from "node:buffer";
-import { getHeaders, getQuery } from "h3";
+import { getQuery } from "h3";
 import { join } from "pathe";
-import { useHostname } from "./util-hostname.mjs";
-import { useRuntimeConfig } from "#imports";
+import { prefixStorage } from "unstorage";
+import { useRuntimeConfig, useStorage } from "#imports";
+import { useNitroApp } from "#internal/nitro";
 export * from "./util-hostname.mjs";
-export function wasmLoader(asyncModuleLoad, fallback, baseUrl) {
+export function wasmLoader(asyncModuleLoad, fallback) {
   let promise;
-  let loaded = false;
+  let wasm;
   return {
-    loaded() {
-      if (loaded)
-        return true;
+    async load(options) {
       if (typeof promise !== "undefined")
         return promise;
-      return false;
-    },
-    async load() {
+      if (wasm)
+        return wasm;
       promise = promise || new Promise(async (resolve) => {
-        let wasm;
         try {
           wasm = await asyncModuleLoad;
           if (typeof wasm === "string")
             wasm = void 0;
         } catch (e) {
         }
-        if (!wasm)
-          wasm = await readPublicAsset(fallback);
         if (!wasm) {
-          const url = new URL(baseUrl);
-          wasm = await (await fetch(`${url.origin}${fallback}`)).arrayBuffer();
+          wasm = await readPublicAsset(fallback, "base64");
+          if (wasm)
+            wasm = Buffer.from(wasm, "base64");
+        }
+        if (!wasm) {
+          const url = new URL(options.baseUrl);
+          wasm = await (await globalThis.$fetch(fallback, { baseURL: url.origin })).arrayBuffer();
+          wasm = Buffer.from(wasm);
         }
-        loaded = true;
         resolve(wasm);
       });
       return promise;
     }
   };
 }
-export function fetchOptions(e, path) {
-  const fetchOptions2 = process.dev || process.env.prerender ? {
-    headers: getHeaders(e)
-  } : {
-    baseURL: useHostname(e)
+export async function fetchOptions(e, path) {
+  const { runtimeCacheStorage } = useRuntimeConfig()["nuxt-og-image"];
+  const cache = runtimeCacheStorage ? prefixStorage(useStorage(), "og-image-cache:options") : false;
+  let options;
+  if (cache && await cache.hasItem(path)) {
+    const cachedValue = await cache.getItem(path);
+    if (cachedValue && cachedValue.value && cachedValue.expiresAt < Date.now())
+      options = cachedValue.value;
+    else
+      await cache.removeItem(path);
+  }
+  if (!options) {
+    const nitro = useNitroApp();
+    options = await (await nitro.localFetch(`/api/og-image-options?path=${path}`)).json();
+    if (cache) {
+      await cache.setItem(path, {
+        value: options,
+        expiresAt: Date.now() + (options.static ? 60 * 60 * 1e3 : 5 * 1e3)
+      });
+    }
+  }
+  return {
+    ...options,
+    // use query data
+    ...getQuery(e)
   };
-  return globalThis.$fetch("/api/og-image-options", {
-    query: {
-      ...getQuery(e),
-      path
-    },
-    ...fetchOptions2
-  });
 }
 export function base64ToArrayBuffer(base64) {
   const buffer = Buffer.from(base64, "base64");
   return new Uint8Array(buffer).buffer;
 }
-export function renderIsland(payload) {
-  return globalThis.$fetch(`/__nuxt_island/${payload.component}`, {
-    query: { props: JSON.stringify(payload) }
-  });
-}
 function r(base, key) {
   return join(base, key.replace(/:/g, "/"));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "2.0.0-beta.21",
+  "version": "2.0.0-beta.23",
   "packageManager": "pnpm@8.1.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -27,6 +27,7 @@
   ],
   "dependencies": {
     "@nuxt/kit": "3.4.2",
+    "@resvg/resvg-wasm": "^2.4.1",
     "@types/fs-extra": "^11.0.1",
     "birpc": "^0.2.11",
     "chalk": "^5.2.0",
@@ -36,15 +37,17 @@
     "fast-glob": "^3.2.12",
     "flatted": "^3.2.7",
     "fs-extra": "^11.1.1",
+    "globby": "^13.1.4",
     "launch-editor": "^2.6.0",
+    "nypm": "^0.2.0",
     "ofetch": "^1.0.1",
-    "ohash": "^1.1.1",
+    "ohash": "^1.1.2",
     "pathe": "^1.1.0",
-    "playwright-core": "^1.32.3",
+    "playwright-core": "^1.33.0",
     "radix3": "^1.0.1",
-    "satori": "0.4.14",
+    "satori": "0.7.2",
     "satori-html": "^0.3.2",
-    "sirv": "^2.0.2",
+    "sirv": "^2.0.3",
     "std-env": "^3.3.2",
     "svg2png-wasm": "^1.3.4",
     "tinyws": "^0.1.0",
@@ -55,18 +58,22 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.38.5",
-    "@nuxt/devtools-edge": "0.4.1-28031816.5910844",
+    "@nuxt/devtools-edge": "0.4.2-28041905.19fda12",
     "@nuxt/module-builder": "^0.3.0",
     "@nuxt/test-utils": "3.4.2",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@types/ws": "^8.5.4",
     "bumpp": "^9.1.0",
-    "eslint": "8.38.0",
+    "eslint": "8.39.0",
     "jest-image-snapshot": "^6.1.0",
     "nuxt": "^3.4.2",
-    "puppeteer": "^19.10.1",
     "vitest": "^0.30.1"
   },
+  "resolutions": {
+    "nitropack": "npm:nitropack-edge@2.4.0-28027501.1cf01bf",
+    "unstorage": "^1.5.0",
+    "unenv": "^1.4.1"
+  },
   "scripts": {
     "build": "pnpm dev:prepare && pnpm build:module && pnpm build:client",
     "build:client": "nuxi generate client",

package/dist/client/_nuxt/IconCSS.ecebf6a5.js

@@ -1 +0,0 @@
-import{a as p,b as u,e as l,f as t,o as f,h as m,i as d,u as o,j as _}from"./entry.c8bf4454.js";const x=p({__name:"IconCSS",props:{name:{type:String,required:!0},size:{type:String,default:""}},setup(i){const s=i;u(e=>({"57550bb0":o(r)}));const n=l();n?.nuxtIcon?.aliases;const c=t(()=>(n?.nuxtIcon?.aliases||{})[s.name]||s.name),r=t(()=>`url('https://api.iconify.design/${c.value.replace(":","/")}.svg')`),a=t(()=>{if(!s.size&&typeof n.nuxtIcon?.size=="boolean"&&!n.nuxtIcon?.size)return;const e=s.size||n.nuxtIcon?.size||"1em";return String(Number(e))===e?`${e}px`:e});return(e,z)=>(f(),m("span",{style:d({width:o(a),height:o(a)})},null,4))}}),g=_(x,[["__scopeId","data-v-de762dfd"]]);export{g as default};

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

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