nuxt-og-image 1.4.8 → 1.4.10

package/README.md

@@ -34,6 +34,7 @@ Enlightened OG Image generation for Nuxt 3.
 ## Demos
 
 - [Vercel Edge Demo](https://nuxt-og-image-playground.vercel.app/)
+- [StackBlitz - Minimal Example](https://stackblitz.com/edit/nuxt-starter-pxs3wk?file=pages/index.vue)
 - [StackBlitz - Alpine Theme](https://stackblitz.com/edit/github-hgunsf?file=package.json) (visit `/__og_image__`)
 
 ## Features

package/dist/module.json

@@ -5,5 +5,5 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "1.4.8"
+  "version": "1.4.10"
 }

package/dist/module.mjs

@@ -339,38 +339,48 @@ export {}
       nitroConfig.externals = defu(nitroConfig.externals || {}, {
         inline: [runtimeDir]
       });
+      if (config.experimentalRuntimeBrowser) {
+        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 });
       const providerPath = `${runtimeDir}/nitro/providers`;
       if (config.browserProvider) {
-        nitroConfig.virtual["#nuxt-og-image/browser"] = config.experimentalRuntimeBrowser ? `export default async function() {
- return await import('${providerPath}/browser/node').then(m => m.default)
+        nitroConfig.virtual["#nuxt-og-image/browser"] = nuxt.options.dev || config.experimentalRuntimeBrowser ? `
+import node from '${providerPath}/browser/node'
+
+export default async function() {
+  return node
 }
 ` : `export default async function() {
- return (process.env.prerender || process.env.dev === 'true') ? await import('${providerPath}/browser/node').then(m => m.default) : () => {}
+ return () => {}
 }
 `;
       }
       if (config.satoriProvider) {
-        nitroConfig.virtual["#nuxt-og-image/satori"] = isWebWorkerEnv ? `export default async function() {
-  return (process.env.prerender || process.env.dev === 'true') ? await import('${providerPath}/satori/webworker').then(m => m.default) : await import('${providerPath}/satori/webworker').then(m => m.default)
-}` : `import node from '${providerPath}/satori/node';
-export default function() {
- return node
-}
-`;
-        nitroConfig.virtual["#nuxt-og-image/svg2png"] = `export default async function() {
- return await import('${providerPath}/svg2png/universal').then(m => m.default)
+        nitroConfig.virtual["#nuxt-og-image/satori"] = `import webworker from '${providerPath}/satori/${isWebWorkerEnv ? "webworker" : "node"}'
+export default async function() {
+  return webworker
+}`;
+        nitroConfig.virtual["#nuxt-og-image/svg2png"] = `
+import svg2png from '${providerPath}/svg2png/universal'
+export default async function() {
+ return svg2png
 }`;
       }
       nitroConfig.virtual["#nuxt-og-image/provider"] = `
-      export async function useProvider(provider) {
-        if (provider === 'satori')
-          return ${config.satoriProvider ? `await import('${relative(nuxt.options.rootDir, resolve("./runtime/nitro/renderers/satori"))}').then(m => m.default)` : null}
-        if (provider === 'browser')
-          ${config.experimentalRuntimeBrowser ? `return await import('${relative(nuxt.options.rootDir, resolve("./runtime/nitro/renderers/browser"))}').then(m => m.default)` : ""}
-          ${!config.experimentalRuntimeBrowser ? `return (process.env.prerender || process.env.dev) ? ${config.browserProvider ? `await import('${relative(nuxt.options.rootDir, resolve("./runtime/nitro/renderers/browser"))}').then(m => m.default)` : null} : null` : ""}
-      }
+import satori from '${relative(nuxt.options.rootDir, resolve("./runtime/nitro/renderers/satori"))}'
+import browser from '${relative(nuxt.options.rootDir, resolve("./runtime/nitro/renderers/browser"))}'
+
+export async function useProvider(provider) {
+  if (provider === 'satori')
+    return satori
+  if (provider === 'browser')
+    return browser
+}
       `;
     });
     nuxt.hooks.hook("nitro:init", async (nitro) => {

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

@@ -10,6 +10,12 @@ import { fonts, satoriOptions } from "#nuxt-og-image/config";
 import loadSvg2png from "#nuxt-og-image/svg2png";
 import loadSatori from "#nuxt-og-image/satori";
 const satoriFonts = [];
+let fontLoadPromise = null;
+function loadFonts(fonts2) {
+  if (fontLoadPromise)
+    return fontLoadPromise;
+  return fontLoadPromise = Promise.all(fonts2.map((font) => loadFont(font)));
+}
 export default {
   name: "satori",
   createPng: async function createPng(baseUrl, options) {
@@ -39,10 +45,8 @@ export default {
   },
   createSvg: async function createSvg(baseUrl, options) {
     const vnodes = await this.createVNode(baseUrl, options);
-    if (!satoriFonts.length) {
-      for (const font of fonts)
-        satoriFonts.push(await loadFont(new URL(baseUrl), font));
-    }
+    if (!satoriFonts.length)
+      satoriFonts.push(...await loadFonts(fonts));
     const satori = await loadSatori();
     return await satori(vnodes, {
       ...satoriOptions,

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

@@ -1,5 +1,5 @@
 import type { ParsedURL } from 'ufo';
 import type { SatoriTransformer, VNode } from '../../../../types';
-export declare function loadFont(url: URL, font: string): Promise<any>;
+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;

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

@@ -1,7 +1,7 @@
 import { base64ToArrayBuffer, readPublicAsset } from "../../utils.mjs";
 import { useStorage } from "#internal/nitro";
 const cachedFonts = {};
-export async function loadFont(url, font) {
+export async function loadFont(font) {
   if (cachedFonts[font])
     return cachedFonts[font];
   let data;
@@ -14,7 +14,7 @@ export async function loadFont(url, font) {
   if (name === "Inter" && ["400", "700"].includes(weight)) {
     const data2 = await readPublicAsset(`/inter-latin-ext-${weight}-normal.woff`);
     if (data2)
-      return cachedFonts[font] = { name: font, data: data2, style: "normal" };
+      return cachedFonts[font] = { name, weight: Number(weight), data: data2, style: "normal" };
   }
   if (!data) {
     const fontUrl = await globalThis.$fetch("/api/og-image-font", {
@@ -25,7 +25,7 @@ export async function loadFont(url, font) {
     });
   }
   await useStorage().setItem(storageKey, Buffer.from(data).toString("base64"));
-  return cachedFonts[font] = { name, weight, data, style: "normal" };
+  return cachedFonts[font] = { name, weight: Number(weight), data, style: "normal" };
 }
 export async function walkSatoriTree(url, node, plugins) {
   if (!node.props?.children)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "1.4.8",
+  "version": "1.4.10",
   "packageManager": "pnpm@7.8.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",