nuxt-og-image 3.0.0-beta.2 → 3.0.0-beta.21

package/dist/client/_nuxt/{error-404.4a94a265.js → error-404.751c8eba.js}

@@ -1 +1 @@
-import{_ as a,u as n,o as r,c as l,a as e,t as s,b as d,w as c,d as p,e as f,p as x,f as h}from"./entry.60cb5216.js";const m=t=>(x("data-v-05a2b8a3"),t=t(),h(),t),u={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},g=m(()=>e("div",{class:"fixed left-0 right-0 spotlight z-10"},null,-1)),b={class:"max-w-520px text-center z-20"},_=["textContent"],w=["textContent"],y={class:"w-full flex items-center justify-center"},S={__name:"error-404",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:404},statusMessage:{type:String,default:"Not Found"},description:{type:String,default:"Sorry, the page you are looking for could not be found."},backHome:{type:String,default:"Go back home"}},setup(t){const o=t;return n({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(k,v)=>{const i=f;return r(),l("div",u,[g,e("div",b,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,_),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:s(t.description)},null,8,w),e("div",y,[d(i,{to:"/",class:"gradient-border text-md sm:text-xl py-2 px-4 sm:py-3 sm:px-6 cursor-pointer"},{default:c(()=>[p(s(t.backHome),1)]),_:1})])])])}}},z=a(S,[["__scopeId","data-v-05a2b8a3"]]);export{z as default};
+import{_ as a,u as n,o as r,c as l,a as e,t as s,b as d,w as c,d as p,e as f,p as x,f as h}from"./entry.3f6151e3.js";const m=t=>(x("data-v-05a2b8a3"),t=t(),h(),t),u={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},g=m(()=>e("div",{class:"fixed left-0 right-0 spotlight z-10"},null,-1)),b={class:"max-w-520px text-center z-20"},_=["textContent"],w=["textContent"],y={class:"w-full flex items-center justify-center"},S={__name:"error-404",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:404},statusMessage:{type:String,default:"Not Found"},description:{type:String,default:"Sorry, the page you are looking for could not be found."},backHome:{type:String,default:"Go back home"}},setup(t){const o=t;return n({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(k,v)=>{const i=f;return r(),l("div",u,[g,e("div",b,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,_),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:s(t.description)},null,8,w),e("div",y,[d(i,{to:"/",class:"gradient-border text-md sm:text-xl py-2 px-4 sm:py-3 sm:px-6 cursor-pointer"},{default:c(()=>[p(s(t.backHome),1)]),_:1})])])])}}},z=a(S,[["__scopeId","data-v-05a2b8a3"]]);export{z as default};

package/dist/client/_nuxt/{error-500.70093e7d.js → error-500.bb72a49b.js}

@@ -1 +1 @@
-import{_ as i,u as a,o as r,c as n,a as e,t as s,p as l,f as d}from"./entry.60cb5216.js";const c=t=>(l("data-v-c967d9a9"),t=t(),d(),t),p={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},h=c(()=>e("div",{class:"fixed -bottom-1/2 left-0 right-0 h-1/2 spotlight"},null,-1)),f={class:"max-w-520px text-center"},g=["textContent"],m=["textContent"],x={__name:"error-500",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:500},statusMessage:{type:String,default:"Server error"},description:{type:String,default:"This page is temporarily unavailable."}},setup(t){const o=t;return a({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(u,b)=>(r(),n("div",p,[h,e("div",f,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,g),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:s(t.description)},null,8,m)])]))}},w=i(x,[["__scopeId","data-v-c967d9a9"]]);export{w as default};
+import{_ as i,u as a,o as r,c as n,a as e,t as s,p as l,f as d}from"./entry.3f6151e3.js";const c=t=>(l("data-v-c967d9a9"),t=t(),d(),t),p={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},h=c(()=>e("div",{class:"fixed -bottom-1/2 left-0 right-0 h-1/2 spotlight"},null,-1)),f={class:"max-w-520px text-center"},g=["textContent"],m=["textContent"],x={__name:"error-500",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:500},statusMessage:{type:String,default:"Server error"},description:{type:String,default:"This page is temporarily unavailable."}},setup(t){const o=t;return a({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(u,b)=>(r(),n("div",p,[h,e("div",f,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,g),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:s(t.description)},null,8,m)])]))}},w=i(x,[["__scopeId","data-v-c967d9a9"]]);export{w as default};

package/dist/client/index.html

@@ -2,13 +2,13 @@
 <html >
 <head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<link rel="stylesheet" href="/__nuxt-og-image/_nuxt/entry.434c2c45.css">
-<link rel="modulepreload" as="script" crossorigin href="/__nuxt-og-image/_nuxt/entry.60cb5216.js">
+<link rel="stylesheet" href="/__nuxt-og-image/_nuxt/entry.3a009184.css">
+<link rel="modulepreload" as="script" crossorigin href="/__nuxt-og-image/_nuxt/entry.3f6151e3.js">
 <link rel="prefetch" as="style" href="/__nuxt-og-image/_nuxt/error-404.b751fa02.css">
-<link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/error-404.4a94a265.js">
+<link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/error-404.751c8eba.js">
 <link rel="prefetch" as="style" href="/__nuxt-og-image/_nuxt/error-500.69009e70.css">
-<link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/error-500.70093e7d.js">
-<script type="module" src="/__nuxt-og-image/_nuxt/entry.60cb5216.js" crossorigin></script><script>"use strict";(()=>{const a=window,e=document.documentElement,m=["dark","light"],c=window&&window.localStorage&&window.localStorage.getItem&&window.localStorage.getItem("nuxt-color-mode")||"system";let n=c==="system"?d():c;const l=e.getAttribute("data-color-mode-forced");l&&(n=l),i(n),a["__NUXT_COLOR_MODE__"]={preference:c,value:n,getColorScheme:d,addColorScheme:i,removeColorScheme:f};function i(o){const t=""+o+"",s="";e.classList?e.classList.add(t):e.className+=" "+t,s&&e.setAttribute("data-"+s,o)}function f(o){const t=""+o+"",s="";e.classList?e.classList.remove(t):e.className=e.className.replace(new RegExp(t,"g"),""),s&&e.removeAttribute("data-"+s)}function r(o){return a.matchMedia("(prefers-color-scheme"+o+")")}function d(){if(a.matchMedia&&r("").media!=="not all"){for(const o of m)if(r(":"+o).matches)return o}return"light"}})();
+<link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/error-500.bb72a49b.js">
+<script type="module" src="/__nuxt-og-image/_nuxt/entry.3f6151e3.js" crossorigin></script><script>"use strict";(()=>{const a=window,e=document.documentElement,m=["dark","light"],c=window&&window.localStorage&&window.localStorage.getItem&&window.localStorage.getItem("nuxt-color-mode")||"system";let n=c==="system"?d():c;const l=e.getAttribute("data-color-mode-forced");l&&(n=l),i(n),a["__NUXT_COLOR_MODE__"]={preference:c,value:n,getColorScheme:d,addColorScheme:i,removeColorScheme:f};function i(o){const t=""+o+"",s="";e.classList?e.classList.add(t):e.className+=" "+t,s&&e.setAttribute("data-"+s,o)}function f(o){const t=""+o+"",s="";e.classList?e.classList.remove(t):e.className=e.className.replace(new RegExp(t,"g"),""),s&&e.removeAttribute("data-"+s)}function r(o){return a.matchMedia("(prefers-color-scheme"+o+")")}function d(){if(a.matchMedia&&r("").media!=="not all"){for(const o of m)if(r(":"+o).matches)return o}return"light"}})();
 </script></head>
 <body ><div id="__nuxt"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"_errors":1,"serverRendered":2,"data":3,"state":4},{},false,{},{}]</script>
 <script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-og-image",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body>

package/dist/module.d.mts

@@ -2,7 +2,10 @@ import * as _nuxt_schema from '@nuxt/schema';
 import { SatoriOptions } from 'satori';
 import { ResvgRenderOptions } from '@resvg/resvg-js';
 import { SharpOptions } from 'sharp';
+import { OgImageComponents } from '#nuxt-og-image/components';
+import { WasmOptions } from 'nitropack/types';
 
+type IconifyEmojiIconSets = 'twemoji' | 'noto' | 'fluent-emoji' | 'fluent-emoji-flat' | 'fluent-emoji-high-contrast' | 'noto-v1' | 'emojione' | 'emojione-monotone' | 'emojione-v1' | 'streamline-emojis' | 'openmoji';
 interface OgImageComponent {
     path?: string;
     pascalName: string;
@@ -32,27 +35,48 @@ interface ScreenshotOptions {
      */
     delay?: number;
 }
-interface OgImageOptions extends Partial<ScreenshotOptions> {
-    component?: string;
-    renderer?: 'chromium' | 'satori';
-    extension?: 'png' | 'jpeg' | 'jpg';
+interface OgImageOptions<T extends keyof OgImageComponents = 'Fallback'> {
+    /**
+     * The width of the screenshot.
+     *
+     * @default 1200
+     */
+    width?: number;
     /**
-     * @deprecated use renderer. Replace `browser` with `chromium`
+     * The height of the screenshot.
+     *
+     * @default 630
      */
-    provider?: 'browser' | 'satori';
+    height?: number;
+    /**
+     * The alt text for the image.
+     */
+    alt?: string;
+    /**
+     * Use a prebuilt image instead of generating one.
+     *
+     * Should be an absolute URL.
+     */
+    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;
+    screenshot?: Partial<ScreenshotOptions>;
+    cacheMaxAgeSeconds?: number;
 }
 interface FontConfig {
     name: string;
@@ -66,11 +90,10 @@ interface RuntimeCompatibilitySchema {
         chromium: 'node' | false;
         ['css-inline']: 'node' | false;
         resvg: 'node' | 'wasm' | false;
-        satori: 'node' | 'yoga-wasm' | false;
-        sharp: 'node' | 'lambda' | false;
+        satori: 'node' | 'wasm' | false;
+        sharp: 'node' | false;
     };
-    wasmStrategy?: 'inline' | 'import' | 'fetch';
-    wasmImportQuery?: string;
+    wasm?: WasmOptions;
 }
 
 interface ModuleOptions {
@@ -112,12 +135,6 @@ interface ModuleOptions {
      * @see https://sharp.pixelplumbing.com/api-constructor
      */
     sharpOptions?: Partial<SharpOptions>;
-    /**
-     * Should the playground at <path>/__og_image__ be enabled in development.
-     *
-     * @default true
-     */
-    playground: boolean;
     /**
      * Include Satori runtime.
      *
@@ -160,7 +177,7 @@ interface ModuleOptions {
     /**
      * Manually modify the deployment compatibility.
      */
-    runtimeCompatibility?: Partial<RuntimeCompatibilitySchema>;
+    runtimeCompatibility?: RuntimeCompatibilitySchema;
 }
 interface ModuleHooks {
     'nuxt-og-image:components': (ctx: {

package/dist/module.d.ts

@@ -2,7 +2,10 @@ import * as _nuxt_schema from '@nuxt/schema';
 import { SatoriOptions } from 'satori';
 import { ResvgRenderOptions } from '@resvg/resvg-js';
 import { SharpOptions } from 'sharp';
+import { OgImageComponents } from '#nuxt-og-image/components';
+import { WasmOptions } from 'nitropack/types';
 
+type IconifyEmojiIconSets = 'twemoji' | 'noto' | 'fluent-emoji' | 'fluent-emoji-flat' | 'fluent-emoji-high-contrast' | 'noto-v1' | 'emojione' | 'emojione-monotone' | 'emojione-v1' | 'streamline-emojis' | 'openmoji';
 interface OgImageComponent {
     path?: string;
     pascalName: string;
@@ -32,27 +35,48 @@ interface ScreenshotOptions {
      */
     delay?: number;
 }
-interface OgImageOptions extends Partial<ScreenshotOptions> {
-    component?: string;
-    renderer?: 'chromium' | 'satori';
-    extension?: 'png' | 'jpeg' | 'jpg';
+interface OgImageOptions<T extends keyof OgImageComponents = 'Fallback'> {
+    /**
+     * The width of the screenshot.
+     *
+     * @default 1200
+     */
+    width?: number;
     /**
-     * @deprecated use renderer. Replace `browser` with `chromium`
+     * The height of the screenshot.
+     *
+     * @default 630
      */
-    provider?: 'browser' | 'satori';
+    height?: number;
+    /**
+     * The alt text for the image.
+     */
+    alt?: string;
+    /**
+     * Use a prebuilt image instead of generating one.
+     *
+     * Should be an absolute URL.
+     */
+    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;
+    screenshot?: Partial<ScreenshotOptions>;
+    cacheMaxAgeSeconds?: number;
 }
 interface FontConfig {
     name: string;
@@ -66,11 +90,10 @@ interface RuntimeCompatibilitySchema {
         chromium: 'node' | false;
         ['css-inline']: 'node' | false;
         resvg: 'node' | 'wasm' | false;
-        satori: 'node' | 'yoga-wasm' | false;
-        sharp: 'node' | 'lambda' | false;
+        satori: 'node' | 'wasm' | false;
+        sharp: 'node' | false;
     };
-    wasmStrategy?: 'inline' | 'import' | 'fetch';
-    wasmImportQuery?: string;
+    wasm?: WasmOptions;
 }
 
 interface ModuleOptions {
@@ -112,12 +135,6 @@ interface ModuleOptions {
      * @see https://sharp.pixelplumbing.com/api-constructor
      */
     sharpOptions?: Partial<SharpOptions>;
-    /**
-     * Should the playground at <path>/__og_image__ be enabled in development.
-     *
-     * @default true
-     */
-    playground: boolean;
     /**
      * Include Satori runtime.
      *
@@ -160,7 +177,7 @@ interface ModuleOptions {
     /**
      * Manually modify the deployment compatibility.
      */
-    runtimeCompatibility?: Partial<RuntimeCompatibilitySchema>;
+    runtimeCompatibility?: RuntimeCompatibilitySchema;
 }
 interface ModuleHooks {
     'nuxt-og-image:components': (ctx: {

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "nuxt-og-image",
   "compatibility": {
-    "nuxt": "^3.7.0",
+    "nuxt": "^3.8.2",
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "3.0.0-beta.2"
+  "version": "3.0.0-beta.21"
 }

package/dist/module.mjs

@@ -1,15 +1,17 @@
 import * as fs from 'node:fs';
 import { existsSync } from 'node:fs';
-import { useNuxt, createResolver, addTemplate, addServerPlugin, defineNuxtModule, useLogger, hasNuxtModule, addPlugin, addServerHandler, addImports, addComponentsDir, addComponent } from '@nuxt/kit';
+import { useNuxt, createResolver, addTemplate, resolvePath, defineNuxtModule, useLogger, hasNuxtModule, addServerPlugin, addPlugin, addServerHandler, addImports, addComponentsDir, addComponent } from '@nuxt/kit';
 import { installNuxtSiteConfig } from 'nuxt-site-config-kit';
-import { provider, env } from 'std-env';
+import { provider, env, isDevelopment } from 'std-env';
 import { hash } from 'ohash';
 import { relative } from 'pathe';
 import 'nypm';
 import { defu } from 'defu';
 import { onDevToolsInitialized, extendServerRpc } from '@nuxt/devtools-kit';
+import { readFile, writeFile } from 'node:fs/promises';
+import { createHash } from 'node:crypto';
 
-const version = "3.0.0-beta.2";
+const version = "3.0.0-beta.21";
 
 const autodetectableProviders = {
   azure_static: "azure",
@@ -32,8 +34,7 @@ const NodeRuntime = {
     "resvg": "node",
     "satori": "node",
     "sharp": "node"
-  },
-  wasmStrategy: "import"
+  }
 };
 const cloudflare = {
   bindings: {
@@ -43,17 +44,18 @@ const cloudflare = {
     "satori": "node",
     "sharp": false
   },
-  wasmStrategy: "import"
+  wasm: {
+    esmImport: true
+  }
 };
 const awsLambda = {
   bindings: {
     "chromium": false,
     "css-inline": "node",
-    "resvg": "wasm",
+    "resvg": "node",
     "satori": "node",
     "sharp": "node"
-  },
-  wasmStrategy: "inline"
+  }
 };
 const RuntimeCompatibility = {
   "nitro-dev": NodeRuntime,
@@ -62,45 +64,41 @@ const RuntimeCompatibility = {
   "stackblitz": {
     bindings: {
       "chromium": false,
-      "css-inline": "node",
+      "css-inline": false,
       "resvg": "wasm",
-      "satori": "node",
-      "sharp": "node"
-    },
-    wasmStrategy: "inline"
+      "satori": "wasm",
+      "sharp": false
+    }
   },
   "aws-lambda": awsLambda,
   "netlify": awsLambda,
   "netlify-edge": {
     bindings: {
       "chromium": false,
-      "css-inline": "node",
+      "css-inline": false,
       "resvg": "wasm",
       "satori": "node",
-      "sharp": "node"
+      "sharp": false
     },
-    wasmStrategy: "inline"
-  },
-  "vercel": {
-    bindings: {
-      "chromium": false,
-      "css-inline": "node",
-      "resvg": "wasm",
-      "satori": "node",
-      "sharp": "node"
-    },
-    wasmStrategy: "inline"
+    wasm: {
+      rollup: {
+        targetEnv: "auto-inline"
+      }
+    }
   },
+  "vercel": awsLambda,
   "vercel-edge": {
     bindings: {
       "chromium": false,
-      "css-inline": "node",
+      "css-inline": false,
       "resvg": "wasm",
       "satori": "node",
-      "sharp": "node"
+      "sharp": false
     },
-    wasmStrategy: "inline",
-    wasmImportQuery: "?module"
+    wasm: {
+      // lowers workers kb size
+      esmImport: true
+    }
   },
   "cloudflare-pages": cloudflare,
   "cloudflare": cloudflare
@@ -141,12 +139,15 @@ function applyNitroPresetCompatibility(nitroConfig, options) {
     applyBinding("satori"),
     applyBinding("resvg"),
     applyBinding("sharp"),
+    applyBinding("css-inline"),
     nitroConfig.alias || {}
   );
-  if (target.includes("cloudflare")) {
-    nitroConfig.rollupConfig = nitroConfig.rollupConfig || {};
-    nitroConfig.rollupConfig.output.inlineDynamicImports = true;
+  if (Object.values(compatibility.bindings).includes("wasm")) {
+    nitroConfig.experimental = nitroConfig.experimental || {};
+    nitroConfig.experimental.wasm = true;
   }
+  nitroConfig.rollupConfig = nitroConfig.rollupConfig || {};
+  nitroConfig.wasm = defu(compatibility.wasm, nitroConfig.wasm);
   return compatibility;
 }
 
@@ -251,12 +252,13 @@ function setupGenerateHandler(options, resolve, nuxt = useNuxt()) {
 }
 
 function setupPrerenderHandler(options, resolve, nuxt = useNuxt()) {
-  addServerPlugin(resolve("./runtime/nitro/plugins/prerender.ts"));
   nuxt.hooks.hook("nitro:init", async (nitro) => {
     nitro.hooks.hook("prerender:config", async (nitroConfig) => {
       nitroConfig.alias["#nuxt-og-image/renderers/satori"] = resolve("./runtime/core/renderers/satori");
       nitroConfig.alias["#nuxt-og-image/renderers/chromium"] = resolve("./runtime/core/renderers/chromium");
       applyNitroPresetCompatibility(nitroConfig, { resolve });
+      nitroConfig.wasm = nitroConfig.wasm || {};
+      nitroConfig.wasm.esmImport = false;
     });
   });
 }
@@ -268,19 +270,37 @@ async function setupBuildHandler(config, resolve, nuxt = useNuxt()) {
   nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
     nitroConfig.alias["#nuxt-og-image/renderers/satori"] = config.runtimeSatori ? resolve("./runtime/core/renderers/satori") : "unenv/runtime/mock/empty";
     nitroConfig.alias["#nuxt-og-image/renderers/chromium"] = config.runtimeBrowser ? resolve("./runtime/core/renderers/chromium") : "unenv/runtime/mock/empty";
-    applyNitroPresetCompatibility(nitroConfig, { resolve });
+    applyNitroPresetCompatibility(nitroConfig, { resolve, compatibility: config.runtimeCompatibility });
     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.alias.queue = "unenv/runtime/mock/proxy-cjs";
   });
+  nuxt.hooks.hook("nitro:init", async (nitro) => {
+    nitro.hooks.hook("compiled", async (_nitro) => {
+      const target = resolveNitroPreset(_nitro.options);
+      const compatibility = getPresetNitroPresetCompatibility(target);
+      if (compatibility.wasm?.esmImport !== true)
+        return;
+      const configuredEntry = nitro.options.rollupConfig?.output.entryFileNames;
+      const serverEntry = resolve(_nitro.options.output.serverDir, typeof configuredEntry === "string" ? configuredEntry : "index.mjs");
+      const contents = await readFile(serverEntry, "utf-8");
+      const resvgHash = sha1(await readFile(await resolvePath("@resvg/resvg-wasm/index_bg.wasm")));
+      const yogaHash = sha1(await readFile(await resolvePath("yoga-wasm-web/dist/yoga.wasm")));
+      const postfix = target === "vercel-edge" ? "?module" : "";
+      await writeFile(serverEntry, contents.replaceAll('"@resvg/resvg-wasm/index_bg.wasm"', `"./wasm/index_bg-${resvgHash}.wasm${postfix}"`).replaceAll('"yoga-wasm-web/dist/yoga.wasm"', `"./wasm/yoga-${yogaHash}.wasm${postfix}"`), { encoding: "utf-8" });
+    });
+  });
+}
+function sha1(source) {
+  return createHash("sha1").update(source).digest("hex").slice(0, 16);
 }
 
 const module = defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
     compatibility: {
-      nuxt: "^3.7.0",
+      nuxt: "^3.8.2",
       bridge: false
     },
     configKey: "ogImage"
@@ -289,21 +309,20 @@ const module = defineNuxtModule({
     return {
       enabled: true,
       defaults: {
+        emojis: "noto",
         renderer: "satori",
         component: "Fallback",
         width: 1200,
         height: 600,
-        cache: true,
         // default is to cache the image for 1 day (24 hours)
-        cacheTtl: 24 * 60 * 60 * 1e3
+        cacheMaxAgeSeconds: 60 * 60 * 24 * 3
       },
       componentDirs: ["OgImage", "OgImageTemplate"],
-      runtimeSatori: true,
-      runtimeBrowser: nuxt.options.dev,
       fonts: [],
       runtimeCacheStorage: true,
-      playground: env.NODE_ENV === "development" || nuxt.options.dev,
-      debug: false
+      runtimeSatori: true,
+      runtimeBrowser: nuxt.options.dev,
+      debug: isDevelopment
     };
   },
   async setup(config, nuxt) {
@@ -320,9 +339,17 @@ const module = defineNuxtModule({
     const { resolve } = createResolver(import.meta.url);
     const preset = resolveNitroPreset(nuxt.options.nitro);
     const compatibility = getPresetNitroPresetCompatibility(preset);
-    config.defaults.extension = "jpg";
-    if (!compatibility.bindings.sharp)
+    const userConfiguredExtension = config.defaults.extension;
+    config.defaults.extension = userConfiguredExtension || "jpg";
+    if (!compatibility.bindings.sharp && config.defaults.renderer !== "chromium") {
+      if (userConfiguredExtension && ["jpeg", "jpg"].includes(userConfiguredExtension))
+        logger.warn("The sharp runtime is not available for this target, disabling sharp and using png instead.");
       config.defaults.extension = "png";
+    }
+    if (config.runtimeBrowser && !compatibility.bindings.chromium) {
+      logger.warn("The Chromium runtime is not available for this target, disabling runtimeBrowser.");
+      config.runtimeBrowser = false;
+    }
     await installNuxtSiteConfig();
     if (hasNuxtModule("@nuxt/content")) {
       addServerPlugin(resolve("./runtime/nitro/plugins/nuxt-content"));
@@ -346,24 +373,13 @@ const module = defineNuxtModule({
     addServerHandler({
       lazy: true,
       route: "/__og-image__/image/**",
-      handler: resolve("./runtime/server/routes/__og-image__/image-[path]-og.[extension]")
+      handler: resolve("./runtime/server/routes/__og-image__/image")
     });
     nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"] = [];
-    [
-      // deprecated
-      "Dynamic",
-      "Static",
-      // new
-      "index",
-      "Cached",
-      "Component",
-      "WithoutCache",
-      "Screenshot"
-    ].forEach((name) => {
-      name = name === "index" ? "defineOgImage" : `defineOgImage${name}`;
+    ["defineOgImage", "defineOgImageComponent", "defineOgImageScreenshot"].forEach((name) => {
       addImports({
         name,
-        from: resolve("./runtime/composables/defineOgImage")
+        from: resolve(`./runtime/composables/${name}`)
       });
       nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"].push(name);
     });
@@ -376,18 +392,12 @@ const module = defineNuxtModule({
       island: true
     });
     [
-      // deprecated
-      "Static",
-      "Dynamic",
       // new
-      "index",
-      "Cached",
-      "WithoutCache",
-      "Screenshot"
+      "OgImage",
+      "OgImageScreenshot"
     ].forEach((name) => {
       addComponent({
-        global: hasNuxtModule("@nuxt/content"),
-        name: name === "index" ? "OgImage" : `OgImage${name}`,
+        name,
         filePath: resolve(`./runtime/components/OgImage/${name}`)
       });
     });
@@ -445,12 +455,13 @@ const module = defineNuxtModule({
       return `
 declare module 'nitropack' {
   interface NitroRouteRules {
-    ogImage?: false | import('${typesPath}').OgImageOptions
+    ogImage?: false | import('${typesPath}').OgImageOptions & Record<string, any>
   }
   interface NitroRouteConfig {
-    ogImage?: false | import('${typesPath}').OgImageOptions
+    ogImage?: false | import('${typesPath}').OgImageOptions & Record<string, any>
   }
 }
+
 declare module '#nuxt-og-image/components' {
   export interface OgImageComponents {
 ${componentImports}
@@ -458,6 +469,11 @@ ${componentImports}
 }
 `;
     });
+    const cacheEnabled = typeof config.runtimeCacheStorage !== "undefined" && config.runtimeCacheStorage !== false;
+    const runtimeCacheStorage = typeof config.runtimeCacheStorage === "boolean" ? "default" : config.runtimeCacheStorage.driver;
+    let baseCacheKey = runtimeCacheStorage === "default" ? `/cache/nuxt-og-image@${version}` : `/nuxt-og-image@${version}`;
+    if (!cacheEnabled)
+      baseCacheKey = false;
     nuxt.hooks.hook("modules:done", async () => {
       nuxt.hooks.callHook("og-image:config", config);
       const normalisedFonts = config.fonts.map((f) => {
@@ -488,15 +504,15 @@ ${componentImports}
         runtimeBrowser: config.runtimeBrowser,
         // @ts-expect-error runtime type
         defaults: config.defaults,
+        debug: config.debug,
         // avoid adding credentials
-        runtimeCacheStorage: typeof config.runtimeCacheStorage === "boolean" ? "default" : config.runtimeCacheStorage.driver,
+        // @ts-expect-error runtime type
+        baseCacheKey,
         // convert the fonts to uniform type to fix ts issue
         fonts: normalisedFonts,
         hasNuxtIcon: hasNuxtModule("nuxt-icon")
       };
     });
-    nuxt.options.nitro.experimental = nuxt.options.nitro.experimental || {};
-    nuxt.options.nitro.experimental.wasm = true;
     if (nuxt.options.dev) {
       setupDevHandler(config, resolve);
       setupDevToolsUI(config, resolve);
@@ -505,8 +521,9 @@ ${componentImports}
     } else if (nuxt.options.build) {
       await setupBuildHandler(config, resolve);
     }
-    if (nuxt.options.nitro.prerender?.routes || nuxt.options._generate)
-      setupPrerenderHandler(config, resolve);
+    if (nuxt.options.nitro.prerender?.routes?.length || nuxt.options.nitro.prerender?.crawlLinks || nuxt.options._generate)
+      addServerPlugin(resolve("./runtime/nitro/plugins/prerender.ts"));
+    setupPrerenderHandler(config, resolve);
   }
 });
 

package/dist/runtime/cache.d.ts

@@ -1,12 +1,9 @@
-import type { H3Event } from 'h3';
-export declare function useNitroCache<T>(e: H3Event, options: {
-    key: string;
-    cacheTtl: number;
-    cache: boolean;
-    headers: boolean;
-    skipRestore?: boolean;
-}): Promise<{
-    cachedItem: false | T;
+import type { H3EventOgImageRender } from './core/utils/resolveRendererContext';
+export declare function useOgImageBufferCache(ctx: H3EventOgImageRender, options: {
+    baseCacheKey: string | false;
+    cacheMaxAgeSeconds?: number;
+}): Promise<void | {
+    cachedItem: false | BufferSource;
     enabled: boolean;
-    update: (item: T) => Promise<void>;
+    update: (image: BufferSource) => Promise<void>;
 }>;