nuxt-og-image 3.0.0-beta.4 → 3.0.0-beta.40

package/dist/runtime/nuxt/plugins/route-rule-og-image.server.mjs

@@ -2,8 +2,9 @@ import { defu } from "defu";
 import { parseURL, withoutBase } from "ufo";
 import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
 import { normaliseOptions } from "../../core/options/normalise.mjs";
-import { getOgImagePath, isInternalRoute } from "../../utilts.mjs";
-import { defineNuxtPlugin, useRequestEvent, useRuntimeConfig } from "#imports";
+import { getOgImagePath, isInternalRoute, useOgImageRuntimeConfig } from "../../utils.mjs";
+import { createOgImageMeta } from "../utils.mjs";
+import { defineNuxtPlugin, useRequestEvent } from "#imports";
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.hooks.hook("app:rendered", async (ctx) => {
     const { ssrContext } = ctx;
@@ -14,59 +15,24 @@ export default defineNuxtPlugin((nuxtApp) => {
     const _routeRulesMatcher = toRouteMatcher(
       createRadixRouter({ routes: ssrContext?.runtimeConfig?.nitro?.routeRules })
     );
-    const routeRules = defu({}, ..._routeRulesMatcher.matchAll(
+    let routeRules = defu({}, ..._routeRulesMatcher.matchAll(
       withoutBase(path.split("?")[0], ssrContext?.runtimeConfig?.app.baseURL)
     ).reverse()).ogImage;
     if (typeof routeRules === "undefined")
       return;
-    const payloadIndex = ssrContext.head.headEntries().findIndex((entry) => {
-      return entry.input?.script?.[0]?.id === "nuxt-og-image-options";
-    });
-    if (payloadIndex >= 0 && routeRules === false) {
-      ssrContext.head.headEntries().splice(payloadIndex, 1);
+    const ogImageInstances = nuxtApp.ssrContext._ogImageInstances || [];
+    if (routeRules === false) {
+      ogImageInstances?.forEach((e2) => {
+        e2.dispose();
+      });
+      nuxtApp.ssrContext._ogImagePayload = void 0;
+      nuxtApp.ssrContext._ogImageInstances = void 0;
       return;
     }
-    if (payloadIndex >= 0)
-      return;
-    const options = normaliseOptions(routeRules);
-    const { defaults } = useRuntimeConfig()["nuxt-og-image"];
-    const optionsWithDefault = normaliseOptions(defu(options, defaults));
-    const src = getOgImagePath(ssrContext.url, optionsWithDefault.extension);
-    ssrContext?.head.push({
-      script: [
-        {
-          id: "nuxt-og-image-options",
-          type: "application/json",
-          processTemplateParams: true,
-          innerHTML: () => {
-            const payload = {
-              title: "%s"
-            };
-            Object.entries(options).forEach(([key, val]) => {
-              payload[key.replace(/-([a-z])/g, (g) => g[1].toUpperCase())] = val;
-            });
-            return payload;
-          },
-          // we want this to be last in our head
-          tagPosition: "bodyClose"
-        }
-      ],
-      meta: [
-        { property: "og:image", content: src },
-        { property: "og:image:width", content: optionsWithDefault.width },
-        { property: "og:image:height", content: optionsWithDefault.height },
-        { property: "og:image:type", content: `image/${optionsWithDefault.extension}` },
-        { property: "og:image:alt", content: optionsWithDefault.alt },
-        // twitter
-        { name: "twitter:card", content: "summary_large_image" },
-        { name: "twitter:image:src", content: src },
-        { name: "twitter:image:width", content: optionsWithDefault.width },
-        { name: "twitter:image:height", content: optionsWithDefault.height },
-        { name: "twitter:image:alt", content: optionsWithDefault.alt }
-      ]
-    }, {
-      mode: "server",
-      tagPriority: 35
-    });
+    routeRules = defu(nuxtApp.ssrContext?.event.context._nitro?.routeRules?.ogImage, routeRules);
+    const { defaults } = useOgImageRuntimeConfig();
+    const resolvedOptions = normaliseOptions(defu(routeRules, defaults));
+    const src = getOgImagePath(ssrContext.url, resolvedOptions);
+    createOgImageMeta(src, routeRules, resolvedOptions, nuxtApp.ssrContext);
   });
 });

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

@@ -0,0 +1,2 @@
+import type { OgImageOptions, OgImagePrebuilt } from '../types';
+export declare function createOgImageMeta(src: string | null, input: OgImageOptions | OgImagePrebuilt, resolvedOptions: OgImageOptions, ssrContext: Record<string, any>): void;

package/dist/runtime/nuxt/utils.mjs

@@ -0,0 +1,53 @@
+import { defu } from "defu";
+import { separateProps } from "../utils.mjs";
+import { useServerHead } from "#imports";
+export function createOgImageMeta(src, input, resolvedOptions, ssrContext) {
+  const _input = separateProps(defu(input, ssrContext._ogImagePayload));
+  const url = src || input.url || resolvedOptions.url;
+  let urlExtension = (url.split("/").pop() || url).split(".").pop() || resolvedOptions.extension;
+  if (urlExtension === "jpg")
+    urlExtension = "jpeg";
+  const meta = [
+    { property: "og:image", content: url },
+    { property: "og:image:type", content: `image/${urlExtension}` },
+    { name: "twitter:card", content: "summary_large_image" },
+    { name: "twitter:image:src", content: url }
+  ];
+  if (resolvedOptions.width) {
+    meta.push({ property: "og:image:width", content: resolvedOptions.width });
+    meta.push({ name: "twitter:image:width", content: resolvedOptions.width });
+  }
+  if (resolvedOptions.height) {
+    meta.push({ property: "og:image:height", content: resolvedOptions.height });
+    meta.push({ name: "twitter:image:height", content: resolvedOptions.height });
+  }
+  if (resolvedOptions.alt) {
+    meta.push({ property: "og:image:alt", content: resolvedOptions.alt });
+    meta.push({ name: "twitter:image:alt", content: resolvedOptions.alt });
+  }
+  ssrContext._ogImageInstances = ssrContext._ogImageInstances || [];
+  const script = [];
+  if (src) {
+    script.push({
+      id: "nuxt-og-image-options",
+      type: "application/json",
+      processTemplateParams: true,
+      innerHTML: () => {
+        if (!_input.props.title)
+          _input.props.title = "%s";
+        delete _input.url;
+        return _input;
+      },
+      // we want this to be last in our head
+      tagPosition: "bodyClose"
+    });
+  }
+  const instance = useServerHead({
+    script,
+    meta
+  }, {
+    tagPriority: 35
+  });
+  ssrContext._ogImagePayload = _input;
+  ssrContext._ogImageInstances.push(instance);
+}

package/dist/runtime/server/routes/__og-image__/debug.json.d.ts

@@ -4,8 +4,6 @@ declare const _default: import("h3").EventHandler<import("h3").EventHandlerReque
         source: any;
     };
     componentNames: any;
-    runtimeConfig: any;
-    baseCacheKey: string;
-    cachedKeys: string[];
+    runtimeConfig: import("../../../types").OgImageRuntimeConfig;
 }>>;
 export default _default;

package/dist/runtime/server/routes/__og-image__/debug.json.mjs

@@ -1,21 +1,17 @@
 import { defineEventHandler, setHeader } from "h3";
-import { prefixStorage } from "unstorage";
-import { useRuntimeConfig, useSiteConfig, useStorage } from "#imports";
+import { useOgImageRuntimeConfig } from "../../../utils.mjs";
+import { useSiteConfig } from "#imports";
 import { componentNames } from "#nuxt-og-image/component-names.mjs";
 export default defineEventHandler(async (e) => {
   setHeader(e, "Content-Type", "application/json");
-  const runtimeConfig = useRuntimeConfig()["nuxt-og-image"];
+  const runtimeConfig = useOgImageRuntimeConfig();
   const siteConfig = await useSiteConfig(e, { debug: true });
-  const baseCacheKey = runtimeConfig.runtimeCacheStorage === "default" ? `/cache/nuxt-og-image@${runtimeConfig.version}` : `/nuxt-og-image@${runtimeConfig.version}`;
-  const cache = prefixStorage(useStorage(), `${baseCacheKey}/`);
   return {
     siteConfigUrl: {
       value: siteConfig.url,
       source: siteConfig._context.url || "unknown"
     },
     componentNames,
-    runtimeConfig,
-    baseCacheKey,
-    cachedKeys: await cache.getKeys()
+    runtimeConfig
   };
 });

package/dist/runtime/server/routes/__og-image__/image.mjs

@@ -0,0 +1,87 @@
+import { H3Error, createError, defineEventHandler, getQuery, setHeader } from "h3";
+import { resolveRendererContext } from "../../../core/utils/resolveRendererContext.mjs";
+import { fetchIsland } from "../../../core/html/fetchIsland.mjs";
+import { devIframeTemplate } from "../../../core/html/devIframeTemplate.mjs";
+import { applyInlineCss } from "../../../core/html/applyInlineCss.mjs";
+import { useOgImageBufferCache } from "../../../cache.mjs";
+import { useOgImageRuntimeConfig } from "../../../utils.mjs";
+import { useSiteConfig } from "#imports";
+export default defineEventHandler(async (e) => {
+  const ctx = await resolveRendererContext(e);
+  if (ctx instanceof H3Error)
+    return ctx;
+  const { isDebugJsonPayload, extension, options, renderer } = ctx;
+  const { debug, baseCacheKey } = useOgImageRuntimeConfig();
+  const compatibility = [];
+  if (isDebugJsonPayload) {
+    const queryExtension = getQuery(e).extension || ctx.options.extension;
+    if (["jpeg", "jpg"].includes(queryExtension) && options.renderer === "satori")
+      compatibility.push("Converting PNGs to JPEGs requires Sharp which only runs on Node based systems.");
+    if (options.renderer === "chromium")
+      compatibility.push("Using Chromium to generate images is only supported in Node based environments. It's recommended to only use this if you're prerendering");
+    if (await applyInlineCss(ctx, await fetchIsland(ctx)))
+      compatibility.push("Inlining CSS is only supported in Node based environments.");
+    setHeader(e, "Content-Type", "application/json");
+    return {
+      compatibility,
+      ...ctx,
+      siteConfig: useSiteConfig(e),
+      ...options.renderer === "satori" ? await renderer.debug(ctx) : void 0
+    };
+  }
+  switch (extension) {
+    case "html":
+      setHeader(e, "Content-Type", `text/html`);
+      return devIframeTemplate(ctx);
+    case "svg":
+      if (!debug && !import.meta.dev) {
+        return createError({
+          statusCode: 404
+        });
+      }
+      if (ctx.renderer.name !== "satori") {
+        return createError({
+          statusCode: 400,
+          statusMessage: `Generating ${extension}'s with ${renderer.name} is not supported.`
+        });
+      }
+      setHeader(e, "Content-Type", `image/svg+xml`);
+      return (await ctx.renderer.debug(ctx)).svg;
+    case "png":
+    case "jpeg":
+    case "jpg":
+      if (!renderer.supportedFormats.includes(extension)) {
+        return createError({
+          statusCode: 400,
+          statusMessage: `Generating ${extension}'s with ${renderer.name} is not supported.`
+        });
+      }
+      setHeader(e, "Content-Type", `image/${extension === "jpg" ? "jpeg" : extension}`);
+      break;
+    default:
+      return createError({
+        statusCode: 400,
+        statusMessage: `Invalid request for og.${extension}.`
+      });
+  }
+  const cacheApi = await useOgImageBufferCache(ctx, {
+    cacheMaxAgeSeconds: ctx.options.cacheMaxAgeSeconds,
+    baseCacheKey
+  });
+  if (typeof cacheApi === "undefined")
+    return;
+  let image = cacheApi.cachedItem;
+  if (!image) {
+    image = await renderer.createImage(ctx);
+    if (image instanceof H3Error)
+      return image;
+    if (!image) {
+      return createError({
+        statusCode: 500,
+        statusMessage: `Failed to generate og.${extension}.`
+      });
+    }
+    await cacheApi.update(image);
+  }
+  return image;
+});

package/dist/runtime/types.d.ts

@@ -1,15 +1,40 @@
-/// <reference types="node" />
-import type { Buffer } from 'node:buffer';
 import type { html } from 'satori-html';
 import type { H3Error, H3Event } from 'h3';
 import type { ResvgRenderOptions } from '@resvg/resvg-js';
 import type { SatoriOptions } from 'satori';
+import type { AllowedComponentProps, Component, ComponentCustomProps, VNodeProps } from '@vue/runtime-core';
+import type { SharpOptions } from 'sharp';
+import type { OgImageComponents } from '#nuxt-og-image/components';
+export interface H3EventOgImageRender {
+    e: H3Event;
+    extension: 'png' | 'jpeg' | 'jpg' | 'svg' | 'html' | 'json';
+    key: string;
+    basePath: string;
+    renderer: Renderer;
+    options: OgImageOptions;
+    isDebugJsonPayload: boolean;
+}
+export type IconifyEmojiIconSets = 'twemoji' | 'noto' | 'fluent-emoji' | 'fluent-emoji-flat' | 'fluent-emoji-high-contrast' | 'noto-v1' | 'emojione' | 'emojione-monotone' | 'emojione-v1' | 'streamline-emojis' | 'openmoji';
+export interface OgImageRuntimeConfig {
+    version: string;
+    satoriOptions: SatoriOptions;
+    resvgOptions: ResvgRenderOptions;
+    sharpOptions: SharpOptions;
+    runtimeSatori: boolean;
+    runtimeChromium: boolean;
+    defaults: OgImageOptions;
+    debug: boolean;
+    baseCacheKey: string;
+    fonts: FontConfig[];
+    hasNuxtIcon: boolean;
+    colorPreference: 'light' | 'dark';
+}
 export interface OgImageComponent {
     path?: string;
     pascalName: string;
     kebabName: string;
     hash: string;
-    category: 'app' | 'official' | 'community' | 'pro';
+    category: 'app' | 'community' | 'pro';
     credits?: string;
 }
 export interface ScreenshotOptions {
@@ -33,49 +58,74 @@ export interface ScreenshotOptions {
      */
     delay?: number;
 }
-export interface OgImageOptions extends Partial<ScreenshotOptions> {
-    component?: string;
-    renderer?: 'chromium' | 'satori';
-    extension?: 'png' | 'jpeg' | 'jpg';
+export type OgImagePrebuilt = {
+    url: string;
+} & Pick<OgImageOptions, 'width' | 'height' | 'alt'>;
+export type DefineOgImageInput = OgImageOptions | OgImagePrebuilt | false;
+export interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
+    /**
+     * The width of the screenshot.
+     *
+     * @default 1200
+     */
+    width?: number;
+    /**
+     * The height of the screenshot.
+     *
+     * @default 630
+     */
+    height?: number;
+    /**
+     * The alt text for the image.
+     */
+    alt?: string;
     /**
-     * @deprecated use renderer. Replace `browser` with `chromium`
+     * Use a prebuilt image instead of generating one.
+     *
+     * Should be an absolute URL.
      */
-    provider?: 'browser' | 'satori';
+    url?: string;
+    /**
+     * The name of the component to render.
+     */
+    component?: T | string;
+    /**
+     * Props to pass to the component.
+     */
+    props?: OgImageComponents[T] | Record<string, any>;
+    renderer?: 'chromium' | 'satori';
+    extension?: 'png' | 'jpeg' | 'jpg';
+    emojis?: IconifyEmojiIconSets;
     /**
      * Provide a static HTML template to render the OG Image instead of a component.
      */
     html?: string;
-    cache?: boolean;
-    cacheKey?: string;
     resvg?: ResvgRenderOptions;
     satori?: SatoriOptions;
-    /**
-     * The time to live of the cache in milliseconds.
-     */
-    cacheTtl?: number;
-    [key: string]: any;
-}
-export interface RuntimeOgImageOptions extends Omit<OgImageOptions, 'extension'> {
-    extension: 'png' | 'jpeg' | 'jpg' | 'svg' | 'json' | 'html';
-    path: string;
+    screenshot?: Partial<ScreenshotOptions>;
+    sharp?: SharpOptions;
+    cacheMaxAgeSeconds?: number;
 }
 export interface FontConfig {
     name: string;
     weight: string | number;
     path?: string;
+    key?: string;
 }
 export type InputFontConfig = (`${string}:${number}` | FontConfig);
-export type RendererOptions = Omit<RuntimeOgImageOptions, 'extension'> & {
-    extension: Omit<RuntimeOgImageOptions['extension'], 'html'>;
+export type RendererOptions = Omit<OgImageOptions, 'extension'> & {
+    extension: Omit<OgImageOptions['extension'], 'html'>;
 };
 export interface Renderer {
     name: 'chromium' | 'satori';
     supportedFormats: Partial<RendererOptions['extension']>[];
-    createImage: (e: H3Event, options: RendererOptions) => Promise<H3Error | Buffer>;
+    createImage: (e: H3EventOgImageRender) => Promise<H3Error | BufferSource | void>;
+    debug: (e: H3EventOgImageRender) => Promise<Record<string, any>>;
 }
-export type OgImageScreenshotOptions = Omit<OgImageOptions, 'component'>;
+export type ExtractComponentProps<T extends Component> = T extends new (...args: any) => any ? Omit<InstanceType<T>['$props'], keyof ComponentCustomProps | keyof VNodeProps | keyof AllowedComponentProps> : never;
+export type OgImagePageScreenshotOptions = Omit<OgImageOptions, 'html' | 'renderer' | 'component' | 'satori' | 'resvg' | 'sharp'>;
 export type VNode = ReturnType<typeof html>;
 export interface SatoriTransformer {
     filter: (node: VNode) => boolean;
-    transform: (node: VNode, e: H3Event) => Promise<void>;
+    transform: (node: VNode, e: H3EventOgImageRender) => Promise<void>;
 }

package/dist/runtime/utils.d.ts

@@ -0,0 +1,4 @@
+import type { OgImageOptions, OgImageRuntimeConfig } from './types';
+export * from './utils.pure';
+export declare function getOgImagePath(pagePath: string, _options?: Partial<OgImageOptions>): string;
+export declare function useOgImageRuntimeConfig(): OgImageRuntimeConfig;

package/dist/runtime/utils.mjs

@@ -0,0 +1,11 @@
+import { joinURL } from "ufo";
+import { defu } from "defu";
+import { useRuntimeConfig } from "#imports";
+export * from "./utils.pure.mjs";
+export function getOgImagePath(pagePath, _options) {
+  const options = defu(_options, useOgImageRuntimeConfig().defaults);
+  return joinURL("/__og-image__/image", pagePath, `og.${options.extension}`);
+}
+export function useOgImageRuntimeConfig() {
+  return useRuntimeConfig()["nuxt-og-image"];
+}

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

@@ -0,0 +1,5 @@
+import type { OgImageOptions } from './types';
+export declare function isInternalRoute(path: string): boolean;
+export declare function separateProps(options: OgImageOptions | undefined, ignoreKeys?: string[]): {
+    props: Record<string, any>;
+};

package/dist/runtime/utils.pure.mjs

@@ -0,0 +1,43 @@
+import { defu } from "defu";
+export function isInternalRoute(path) {
+  const lastSegment = path.split("/").pop() || path;
+  return lastSegment.includes(".") || path.startsWith("/__") || path.startsWith("@");
+}
+function filterIsOgImageOption(key) {
+  const keys = [
+    "url",
+    "extension",
+    "width",
+    "height",
+    "alt",
+    "props",
+    "renderer",
+    "html",
+    "component",
+    "renderer",
+    "emojis",
+    "satori",
+    "resvg",
+    "sharp",
+    "screenshot",
+    "cacheMaxAgeSeconds",
+    "componentHash"
+  ];
+  return keys.includes(key);
+}
+export function separateProps(options, ignoreKeys = []) {
+  options = options || {};
+  const _props = defu(options.props, Object.fromEntries(
+    Object.entries({ ...options }).filter(([k]) => !filterIsOgImageOption(k) && !ignoreKeys.includes(k))
+  ));
+  const props = {};
+  Object.entries(_props).forEach(([key, val]) => {
+    props[key.replace(/-([a-z])/g, (g) => g[1].toUpperCase())] = val;
+  });
+  return {
+    ...Object.fromEntries(
+      Object.entries({ ...options }).filter(([k]) => filterIsOgImageOption(k) || ignoreKeys.includes(k))
+    ),
+    props
+  };
+}

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0-beta.40",
   "packageManager": "pnpm@8.11.0",
   "description": "Enlightened OG Image generation for Nuxt.",
+  "author": {
+    "website": "https://harlanzw.com",
+    "name": "Harlan Wilton",
+    "url": "harlan@harlanzw.com"
+  },
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
   "homepage": "https://github.com/harlan-zw/nuxt-og-image#readme",
@@ -24,75 +29,68 @@
   "main": "./dist/module.cjs",
   "types": "./dist/types.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "virtual.d.ts"
   ],
   "dependencies": {
-    "@img/sharp-libvips-dev": "^1.0.0",
-    "@img/sharp-wasm32": "0.33.0-rc.2",
+    "@iconify-json/noto": "^1.1.17",
     "@nuxt/devtools-kit": "^1.0.4",
     "@nuxt/kit": "^3.8.2",
     "@resvg/resvg-js": "^2.6.0",
     "@resvg/resvg-wasm": "^2.6.0",
-    "@twemoji/api": "^14.1.2",
-    "@types/fs-extra": "^11.0.4",
-    "birpc": "0.2.14",
-    "chalk": "^5.3.0",
+    "@unocss/core": "^0.58.0",
+    "@unocss/preset-wind": "^0.58.0",
+    "@vueuse/core": "^10.7.0",
     "chrome-launcher": "^1.1.0",
     "css-inline": "^0.11.0",
     "defu": "^6.1.3",
     "execa": "^8.0.1",
-    "fast-glob": "^3.3.2",
-    "flatted": "^3.2.9",
     "floating-vue": "2.0.0-beta.24",
-    "fs-extra": "^11.2.0",
-    "globby": "^14.0.0",
     "image-size": "^1.0.2",
-    "launch-editor": "^2.6.1",
     "nuxt-site-config": "^1.6.6",
     "nuxt-site-config-kit": "^1.6.6",
     "nypm": "^0.3.3",
     "ofetch": "^1.3.3",
     "ohash": "^1.1.3",
     "pathe": "^1.1.1",
-    "playwright-core": "^1.40.0",
+    "playwright-core": "^1.40.1",
     "radix3": "^1.1.0",
     "satori": "0.10.11",
     "satori-html": "^0.3.2",
-    "sharp": "0.33.0-rc.2",
+    "sharp": "0.33.0",
     "sirv": "^2.0.3",
-    "std-env": "^3.5.0",
-    "svg2png-wasm": "^1.4.1",
+    "std-env": "^3.6.0",
     "terminate": "^2.6.1",
-    "tinyws": "^0.1.0",
-    "twemoji": "^14.0.2",
     "ufo": "^1.3.2",
-    "vue-component-meta": "^1.8.22",
-    "ws": "^8.14.2",
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.1.1",
-    "@img/sharp-linux-x64": "0.33.0-rc.2",
+    "@antfu/eslint-config": "2.3.4",
+    "@img/sharp-linux-x64": "0.33.0",
     "@nuxt/content": "^2.9.0",
     "@nuxt/devtools": "1.0.4",
     "@nuxt/module-builder": "^0.5.4",
     "@nuxt/test-utils": "3.8.1",
+    "@nuxt/ui": "^2.11.0",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
-    "@nuxtjs/i18n": "8.0.0-rc.5",
-    "@types/ws": "^8.5.10",
+    "@nuxtjs/i18n": "8.0.0-rc.7",
+    "@nuxtjs/tailwindcss": "^6.10.1",
+    "@unocss/nuxt": "^0.58.0",
     "bumpp": "^9.2.0",
-    "eslint": "8.54.0",
-    "jest-image-snapshot": "^6.2.0",
+    "eslint": "8.55.0",
+    "jest-image-snapshot": "^6.3.0",
     "nuxt": "^3.8.2",
     "nuxt-icon": "0.6.6",
-    "playwright": "^1.40.0",
+    "playwright": "^1.40.1",
     "sass": "^1.69.5",
-    "vitest": "^0.34.6"
+    "vitest": "^1.0.1"
   },
   "build": {
     "externals": [
       "h3",
-      "nitropack"
+      "nitropack",
+      "@vue/runtime-core",
+      "#nuxt-og-image/components"
     ]
   },
   "scripts": {

package/virtual.d.ts

@@ -0,0 +1,49 @@
+declare module '#nuxt-og-image/components' {
+  import type { Component } from 'vue'
+
+  const components: Record<string, Component>
+  export default components
+}
+declare module '#nuxt-og-image/renderers/satori' {
+  import type Renderer from './src/runtime/types'
+
+  const renderer: Renderer | { __unenv__: true } | undefined
+  export default renderer
+}
+declare module '#nuxt-og-image/renderers/chromium' {
+  import type Renderer from './src/runtime/types'
+
+  const renderer: Renderer | { __unenv__: true } | undefined
+  export default renderer
+}
+
+declare module '#nuxt-og-image/bindings/satori' {
+  const satori: typeof import('satori').satori
+  export default satori
+}
+
+declare module '#nuxt-og-image/bindings/resvg' {
+  interface WasmResvg {
+    initWasmPromise: Promise<void>
+    Resvg: import('resvg').Resvg
+  }
+  const instance: WasmResvg
+  export default instance
+}
+declare module '#nuxt-og-image/bindings/chromium' {
+  export const createBrowser: () => Promise<Browser | void>
+}
+
+declare module '#nuxt-og-image/bindings/css-inline' {
+  import type _CssInline from 'css-inline'
+
+  const cssInline: _CssInline
+  export default cssInline
+}
+
+declare module '#nuxt-og-image/bindings/sharp' {
+  import type _sharp from 'sharp'
+
+  const sharp: _sharp
+  export default sharp
+}

package/dist/client/_nuxt/IconCSS.8f429b14.css

@@ -1 +0,0 @@
-span[data-v-2408e4e8]{background-color:currentColor;display:inline-block;-webkit-mask-image:var(--f4b1dbd8);mask-image:var(--f4b1dbd8);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:middle}

package/dist/client/_nuxt/builds/meta/0ca67bfd-95de-4c16-8f0a-055751cdca51.json

@@ -1 +0,0 @@
-{"id":"0ca67bfd-95de-4c16-8f0a-055751cdca51","timestamp":1701183443673,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}