nuxt-og-image 1.5.5 → 2.0.0-beta.1

package/dist/module.d.ts

@@ -35,8 +35,10 @@ interface OgImageOptions extends Partial<ScreenshotOptions> {
 interface ModuleOptions {
     /**
      * The hostname of your website.
+     * @deprecated use `siteUrl`
      */
-    host: string;
+    host?: string;
+    siteUrl: string;
     defaults: OgImageOptions;
     fonts: `${string}:${number}`[];
     satoriOptions: Partial<SatoriOptions>;
@@ -47,6 +49,10 @@ interface ModuleOptions {
     experimentalRuntimeBrowser: boolean;
     playground: boolean;
 }
+interface ModuleHooks {
+    'og-image:config': (config: ModuleOptions) => Promise<void> | void;
+    'og-image:prerenderScreenshots': (queue: OgImageOptions[]) => Promise<void> | void;
+}
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
-export { ModuleOptions, _default as default };
+export { ModuleHooks, ModuleOptions, _default as default };

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "nuxt-og-image",
   "compatibility": {
-    "nuxt": "^3.2.0",
+    "nuxt": "^3.3.1",
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "1.5.5"
+  "version": "2.0.0-beta.1"
 }

package/dist/module.mjs

@@ -1,5 +1,5 @@
 import { readFile, writeFile } from 'node:fs/promises';
-import { useNuxt, addTemplate, defineNuxtModule, createResolver, addServerHandler, addImports, addComponent } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addTemplate, addServerHandler, addImports, addComponent } from '@nuxt/kit';
 import { execa } from 'execa';
 import chalk from 'chalk';
 import defu from 'defu';
@@ -54,12 +54,14 @@ async function screenshot(browser, options) {
     width: options.width || 1200,
     height: options.height || 630
   });
-  if (options.path.startsWith("html:")) {
-    await page.evaluate((html) => {
+  const isHtml = options.path.startsWith("html:") || options.html;
+  if (isHtml) {
+    const html = options.html || options.path.substring(5);
+    await page.evaluate((html2) => {
       document.open("text/html");
-      document.write(html);
+      document.write(html2);
       document.close();
-    }, options.path.substring(5));
+    }, html);
     await page.waitForLoadState("networkidle");
   } else {
     await page.goto(`${options.host}${options.path}`, {
@@ -162,40 +164,6 @@ function getBodyJson(req) {
   });
 }
 
-function exposeModuleConfig(moduleName, config) {
-  const nuxt = useNuxt();
-  const jsExports = Object.entries(config).map(([k, v]) => `export const ${k} = ${JSON.stringify(v)}`).join("\n");
-  const alias = `#${moduleName}/config`;
-  nuxt.options.alias[alias] = addTemplate({
-    filename: `modules/config/${moduleName}.mjs`,
-    getContents: () => jsExports
-  }).dst;
-  nuxt.hooks.hook("nitro:config", (nitroConfig) => {
-    nitroConfig.virtual[alias] = jsExports;
-  });
-  const typeDefName = `modules/config/${moduleName}.d.ts`;
-  const tsExports = Object.keys(config).map((k) => {
-    if (nuxt.options.dev)
-      return `  export const ${k}: ${JSON.stringify(config[k])} | ModuleOptions['${k}']`;
-    return `  export const ${k}: ModuleOptions['${k}']`;
-  }).join("\n");
-  addTemplate({
-    filename: typeDefName,
-    getContents: () => {
-      return `// generated by ${moduleName}
-import type { ModuleOptions } from '${moduleName}'
-declare module '${alias}' {
-${tsExports}
-}
-`;
-    }
-  });
-  nuxt.hooks.hook("prepare:types", ({ references }) => {
-    references.push({ path: resolve(nuxt.options.buildDir, typeDefName) });
-  });
-  return alias;
-}
-
 function decodeHtmlEntities(obj) {
   Object.entries(obj).forEach(([key, value]) => {
     if (typeof value === "string") {
@@ -242,16 +210,17 @@ const module = defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
     compatibility: {
-      nuxt: "^3.2.0",
+      nuxt: "^3.3.1",
       bridge: false
     },
     configKey: "ogImage"
   },
   defaults(nuxt) {
+    const siteUrl = process.env.NUXT_PUBLIC_SITE_URL || process.env.NUXT_SITE_URL || nuxt.options.runtimeConfig.public?.siteUrl || nuxt.options.runtimeConfig.siteUrl;
     return {
       // when we run `nuxi generate` we need to force prerendering
       forcePrerender: !nuxt.options.dev && nuxt.options._generate,
-      host: process.env.NUXT_PUBLIC_SITE_URL || nuxt.options.runtimeConfig.public?.siteUrl,
+      siteUrl,
       defaults: {
         component: "OgImageBasic",
         width: 1200,
@@ -268,6 +237,7 @@ const module = defineNuxtModule({
   },
   async setup(config, nuxt) {
     const { resolve } = createResolver(import.meta.url);
+    config.siteUrl = config.siteUrl || config.host;
     if (!config.fonts.length)
       config.fonts = ["Inter:400", "Inter:700"];
     const distResolve = (p) => {
@@ -332,11 +302,13 @@ export {}
         handler: resolve("./runtime/nitro/middleware/playground")
       });
     }
+    nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"] = [];
     ["defineOgImageDynamic", "defineOgImageStatic", "defineOgImageScreenshot"].forEach((name) => {
       addImports({
         name,
         from: resolve("./runtime/composables/defineOgImage")
       });
+      nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"].push(name);
     });
     await addComponent({
       name: "OgImageBasic",
@@ -356,7 +328,10 @@ export {}
       resolve(nuxt.options.rootDir, nuxt.options.dir.public),
       moduleAssetDir
     ];
-    exposeModuleConfig("nuxt-og-image", { ...config, assetDirs });
+    nuxt.hooks.hook("modules:done", async () => {
+      nuxt.hooks.callHook("og-image:config", config);
+      nuxt.options.runtimeConfig["nuxt-og-image"] = { ...config, assetDirs };
+    });
     const useSatoriWasm = provider === "stackblitz";
     nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
       nitroConfig.externals = defu(nitroConfig.externals || {}, {
@@ -451,21 +426,35 @@ export async function useProvider(provider) {
         if (!extractedOptions || routeRules.ogImage === false)
           return;
         const entry = {
+          route: ctx.route,
           path: extractedOptions.component ? `/api/og-image-html?path=${ctx.route}` : ctx.route,
           ...extractedOptions,
-          ...routeRules.ogImage || {},
-          ctx
+          ...routeRules.ogImage || {}
         };
-        if (entry.component)
-          entry.path = `html:${await $fetch(entry.path)}`;
         if ((nuxt.options._generate || entry.static) && entry.provider === "browser")
           screenshotQueue.push(entry);
       });
       if (nuxt.options.dev)
         return;
       const captureScreenshots = async () => {
+        await nuxt.callHook("og-image:prerenderScreenshots", screenshotQueue);
         if (screenshotQueue.length === 0)
           return;
+        for (const entry of screenshotQueue) {
+          if (entry.route && Object.keys(entry).length === 1) {
+            const html = await $fetch(entry.route);
+            const extractedOptions = extractOgImageOptions(html);
+            const routeRules = defu({}, ..._routeRulesMatcher.matchAll(entry.route).reverse());
+            Object.assign(entry, {
+              // @ts-expect-error runtime
+              path: extractedOptions.component ? `/api/og-image-html?path=${entry.route}` : entry.route,
+              ...extractedOptions,
+              ...routeRules.ogImage || {}
+            });
+          }
+          if (entry.component)
+            entry.html = await $fetch(entry.path);
+        }
         nitro.logger.info("Ensuring chromium install for og:image generation...");
         const installChromeProcess = execa("npx", ["playwright", "install", "chromium"], {
           stdio: "inherit"
@@ -496,7 +485,7 @@ export async function useProvider(provider) {
               const entry = screenshotQueue[k];
               const start = Date.now();
               let hasError = false;
-              const dirname = joinURL(nitro.options.output.publicDir, `${entry.ctx.fileName.replace("index.html", "")}__og_image__/`);
+              const dirname = joinURL(nitro.options.output.publicDir, entry.route, "/__og_image__/");
               const filename = joinURL(dirname, "/og.png");
               try {
                 const imgBuffer = await screenshot(browser, {
@@ -515,7 +504,7 @@ export async function useProvider(provider) {
               }
               const generateTimeMS = Date.now() - start;
               nitro.logger.log(chalk[hasError ? "red" : "gray"](
-                `  ${Number(k) === screenshotQueue.length - 1 ? "\u2514\u2500" : "\u251C\u2500"} ${relative(nitro.options.output.publicDir, filename)} (${generateTimeMS}ms) ${Math.round((Number(k) + 1) / screenshotQueue.length * 100)}%`
+                `  ${Number(k) === screenshotQueue.length - 1 ? "\u2514\u2500" : "\u251C\u2500"} /${relative(nitro.options.output.publicDir, filename)} (${generateTimeMS}ms) ${Math.round((Number(k) + 1) / screenshotQueue.length * 100)}%`
               ));
             }
           } else {
@@ -529,12 +518,14 @@ export async function useProvider(provider) {
         }
         screenshotQueue = [];
       };
-      nitro.hooks.hook("rollup:before", async () => {
-        await captureScreenshots();
-      });
-      nitro.hooks.hook("close", async () => {
-        await captureScreenshots();
-      });
+      if (!nuxt.options._prepare) {
+        nitro.hooks.hook("rollup:before", async () => {
+          await captureScreenshots();
+        });
+        nitro.hooks.hook("close", async () => {
+          await captureScreenshots();
+        });
+      }
     });
   }
 });

package/dist/runtime/browserUtil.mjs

@@ -6,12 +6,14 @@ export async function screenshot(browser, options) {
     width: options.width || 1200,
     height: options.height || 630
   });
-  if (options.path.startsWith("html:")) {
-    await page.evaluate((html) => {
+  const isHtml = options.path.startsWith("html:") || options.html;
+  if (isHtml) {
+    const html = options.html || options.path.substring(5);
+    await page.evaluate((html2) => {
       document.open("text/html");
-      document.write(html);
+      document.write(html2);
       document.close();
-    }, options.path.substring(5));
+    }, html);
     await page.waitForLoadState("networkidle");
   } else {
     await page.goto(`${options.host}${options.path}`, {

package/dist/runtime/components/OgImageDynamic.mjs

@@ -3,7 +3,8 @@ import { defineOgImageDynamic } from "#imports";
 export default defineComponent({
   name: "OgImageDynamic",
   setup(_, { attrs }) {
-    defineOgImageDynamic(attrs);
+    if (process.server)
+      defineOgImageDynamic(attrs);
     return () => null;
   }
 });

package/dist/runtime/components/OgImageScreenshot.mjs

@@ -3,7 +3,8 @@ import { defineOgImageScreenshot } from "#imports";
 export default defineComponent({
   name: "OgImageScreenshot",
   setup(_, { attrs }) {
-    defineOgImageScreenshot(attrs);
+    if (process.server)
+      defineOgImageScreenshot(attrs);
     return () => null;
   }
 });

package/dist/runtime/components/OgImageStatic.mjs

@@ -3,7 +3,8 @@ import { defineOgImageStatic } from "#imports";
 export default defineComponent({
   name: "OgImageStatic",
   setup(_, { attrs }) {
-    defineOgImageStatic(attrs);
+    if (process.server)
+      defineOgImageStatic(attrs);
     return () => null;
   }
 });

package/dist/runtime/composables/defineOgImage.mjs

@@ -2,7 +2,6 @@ import { useServerHead } from "@vueuse/head";
 import { withBase } from "ufo";
 import { useRequestEvent } from "#app";
 import { useRouter } from "#imports";
-import { defaults, forcePrerender, host, satoriProvider } from "#nuxt-og-image/config";
 export function defineOgImageScreenshot(options = {}) {
   const router = useRouter();
   const route = router?.currentRoute?.value?.path || "";
@@ -15,6 +14,7 @@ export function defineOgImageScreenshot(options = {}) {
   });
 }
 export function defineOgImageDynamic(options = {}) {
+  const { satoriProvider, forcePrerender } = useRuntimeConfig()["nuxt-og-image"];
   defineOgImage({
     provider: satoriProvider ? "satori" : "browser",
     static: !!forcePrerender,
@@ -22,6 +22,7 @@ export function defineOgImageDynamic(options = {}) {
   });
 }
 export function defineOgImageStatic(options = {}) {
+  const { satoriProvider } = useRuntimeConfig()["nuxt-og-image"];
   defineOgImage({
     provider: satoriProvider ? "satori" : "browser",
     static: true,
@@ -30,6 +31,7 @@ export function defineOgImageStatic(options = {}) {
 }
 export function defineOgImage(options = {}) {
   if (process.server) {
+    const { forcePrerender, defaults, host } = useRuntimeConfig()["nuxt-og-image"];
     const router = useRouter();
     const route = router?.currentRoute?.value?.path || "";
     const e = useRequestEvent();

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

@@ -13,11 +13,15 @@ export default {
     const createBrowser = await loadBrowser();
     const browser = await createBrowser();
     if (browser) {
-      return screenshot(browser, {
-        ...options,
-        host: url.origin,
-        path: `/api/og-image-html?path=${url.pathname}`
-      });
+      try {
+        return await screenshot(browser, {
+          ...options,
+          host: url.origin,
+          path: `/api/og-image-html?path=${url.pathname}`
+        });
+      } finally {
+        browser.close();
+      }
     }
     return null;
   }

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

@@ -7,15 +7,15 @@ 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 { fonts, satoriOptions } from "#nuxt-og-image/config";
 import loadSvg2png from "#nuxt-og-image/svg2png";
 import loadSatori from "#nuxt-og-image/satori";
+import { useRuntimeConfig } from "#internal/nitro";
 const satoriFonts = [];
 let fontLoadPromise = null;
-function loadFonts(fonts2) {
+function loadFonts(fonts) {
   if (fontLoadPromise)
     return fontLoadPromise;
-  return fontLoadPromise = Promise.all(fonts2.map((font) => loadFont(font)));
+  return fontLoadPromise = Promise.all(fonts.map((font) => loadFont(font)));
 }
 export default {
   name: "satori",
@@ -46,6 +46,7 @@ export default {
     return satoriTree;
   },
   createSvg: async function createSvg(baseUrl, options) {
+    const { fonts, satoriOptions } = useRuntimeConfig()["nuxt-og-image"];
     const vnodes = await this.createVNode(baseUrl, options);
     if (!satoriFonts.length)
       satoriFonts.push(...await loadFonts(fonts));

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

@@ -3,8 +3,9 @@ import { renderSSRHead } from "@unhead/ssr";
 import { createHeadCore } from "@unhead/vue";
 import { defineEventHandler, getQuery, sendRedirect } from "h3";
 import { fetchOptions, renderIsland, useHostname } from "../utils.mjs";
-import { defaults, fonts } from "#nuxt-og-image/config";
+import { useRuntimeConfig } from "#internal/nitro";
 export default defineEventHandler(async (e) => {
+  const { fonts, defaults } = useRuntimeConfig()["nuxt-og-image"];
   const path = getQuery(e).path || "/";
   const scale = getQuery(e).scale;
   const mode = getQuery(e).mode || "light";

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

@@ -1,7 +1,6 @@
 import { createError, defineEventHandler, getHeaders, getQuery } from "h3";
 import { extractOgImageOptions, useHostname } from "../utils.mjs";
-import { getRouteRules } from "#internal/nitro";
-import { defaults } from "#nuxt-og-image/config";
+import { getRouteRules, useRuntimeConfig } from "#internal/nitro";
 export default defineEventHandler(async (e) => {
   const query = getQuery(e);
   const path = query.path || "/";
@@ -26,6 +25,7 @@ export default defineEventHandler(async (e) => {
   e.node.req.url = e.path;
   if (routeRules === false)
     return false;
+  const { defaults } = useRuntimeConfig()["nuxt-og-image"];
   return {
     path,
     ...defaults,

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

@@ -11,7 +11,7 @@ export declare function renderIsland(payload: OgImageOptions): Promise<{
     html: string;
     head: any;
 }>;
-export declare function useHostname(e: H3Event): string;
+export declare function useHostname(e: H3Event): 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,7 +1,6 @@
 import { existsSync, promises as fsp } from "node:fs";
 import { getHeaders, getQuery, getRequestHeader } from "h3";
 import { join } from "pathe";
-import { assetDirs } from "#nuxt-og-image/config";
 import { useRuntimeConfig } from "#internal/nitro";
 export function wasmLoader(key, fallback, baseUrl) {
   let promise;
@@ -60,6 +59,9 @@ export function renderIsland(payload) {
   });
 }
 export function useHostname(e) {
+  const config = useRuntimeConfig()["nuxt-og-image"];
+  if (!process.dev && config.siteUrl)
+    return config.siteUrl;
   const host = getRequestHeader(e, "host") || process.env.NITRO_HOST || process.env.HOST || "localhost";
   const protocol = getRequestHeader(e, "x-forwarded-proto") || "http";
   const useHttp = process.env.NODE_ENV === "development" || host.includes("127.0.0.1") || host.includes("localhost") || protocol === "http";
@@ -71,6 +73,7 @@ const r = (base, key) => {
   return join(base, key.replace(/:/g, "/"));
 };
 export async function readPublicAsset(file, encoding) {
+  const { assetDirs } = useRuntimeConfig()["nuxt-og-image"];
   for (const assetDir of assetDirs) {
     const path = r(assetDir, file);
     if (existsSync(path))

package/dist/types.d.ts

@@ -1,10 +1,11 @@
 
-import { ModuleOptions } from './module'
+import { ModuleOptions, ModuleHooks } from './module'
 
 declare module '@nuxt/schema' {
   interface NuxtConfig { ['ogImage']?: Partial<ModuleOptions> }
   interface NuxtOptions { ['ogImage']?: ModuleOptions }
+  interface NuxtHooks extends ModuleHooks {}
 }
 
 
-export { ModuleOptions, default } from './module'
+export { ModuleHooks, ModuleOptions, default } from './module'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "1.5.5",
+  "version": "2.0.0-beta.1",
   "packageManager": "pnpm@7.8.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -28,20 +28,20 @@
   "dependencies": {
     "@nuxt/kit": "3.3.1",
     "@types/fs-extra": "^11.0.1",
-    "birpc": "^0.2.8",
+    "birpc": "^0.2.10",
     "chalk": "^5.2.0",
     "chrome-launcher": "^0.15.1",
     "defu": "^6.1.2",
     "execa": "^7.1.1",
     "fast-glob": "^3.2.12",
     "flatted": "^3.2.7",
-    "fs-extra": "^11.1.0",
+    "fs-extra": "^11.1.1",
     "launch-editor": "^2.6.0",
     "ohash": "^1.0.0",
     "pathe": "^1.1.0",
     "playwright-core": "^1.31.2",
     "radix3": "^1.0.0",
-    "satori": "0.4.3",
+    "satori": "0.4.4",
     "satori-html": "^0.3.2",
     "sirv": "^2.0.2",
     "std-env": "^3.3.2",
@@ -53,8 +53,8 @@
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.36.0",
-    "@nuxt/devtools-edge": "0.2.5-27981287.ed164c8",
+    "@antfu/eslint-config": "^0.37.0",
+    "@nuxt/devtools-edge": "0.2.5-27988848.51397f9",
     "@nuxt/module-builder": "^0.2.1",
     "@nuxt/test-utils": "3.3.1",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
@@ -64,7 +64,7 @@
     "jest-image-snapshot": "^6.1.0",
     "nuxt": "^3.3.1",
     "puppeteer": "^19.7.5",
-    "vitest": "^0.29.3"
+    "vitest": "^0.29.7"
   },
   "scripts": {
     "build": "pnpm dev:prepare && pnpm build:module && pnpm build:client",