nuxt-og-image 2.2.4 → 3.0.0-beta.1

package/dist/module.mjs

@@ -1,351 +1,153 @@
-import { readFile, writeFile } from 'node:fs/promises';
 import * as fs from 'node:fs';
 import { existsSync } from 'node:fs';
-import { useNuxt, createResolver, addTemplate, defineNuxtModule, useLogger, addServerHandler, addImports, addComponent, hasNuxtModule, addServerPlugin } from '@nuxt/kit';
-import { execa } from 'execa';
-import chalk from 'chalk';
-import defu$1, { defu } from 'defu';
-import { toRouteMatcher, createRouter } from 'radix3';
-import { withBase, parsePath, joinURL } from 'ufo';
-import { resolve, relative, dirname } from 'pathe';
-import { tinyws } from 'tinyws';
-import sirv from 'sirv';
-import { pathExists, copy, mkdirp } from 'fs-extra';
-import { globby } from 'globby';
-import { installNuxtSiteConfig, updateSiteConfig } from 'nuxt-site-config-kit';
-import { provider } from 'std-env';
+import { useNuxt, createResolver, addTemplate, addServerPlugin, defineNuxtModule, useLogger, hasNuxtModule, addPlugin, addServerHandler, addImports, addComponentsDir, addComponent } from '@nuxt/kit';
+import { installNuxtSiteConfig } from 'nuxt-site-config-kit';
+import { provider, env } from 'std-env';
 import { hash } from 'ohash';
-import terminate from 'terminate';
-import playwrightCore from 'playwright-core';
-import { createBirpcGroup } from 'birpc';
-import { stringify, parse } from 'flatted';
-import { addDependency } from 'nypm';
+import { relative } from 'pathe';
+import 'nypm';
+import { defu } from 'defu';
+import { onDevToolsInitialized, extendServerRpc } from '@nuxt/devtools-kit';
 
-const version = "2.2.4";
+const version = "3.0.0-beta.1";
 
-async function createBrowser() {
-  if (process.dev || process.env.prerender) {
-    try {
-      const { Launcher } = await import(String("chrome-launcher"));
-      const chromePath = Launcher.getFirstInstallation();
-      return await playwrightCore.chromium.launch({
-        headless: true,
-        executablePath: chromePath
-      });
-    } catch (e) {
-    }
-  }
-  try {
-    return await playwrightCore.chromium.launch({
-      headless: true
-    });
-  } catch (e) {
-  }
-  try {
-    const playwright = await import(String("playwright"));
-    return await playwright.chromium.launch({
-      headless: true
-    });
-  } catch (e) {
-    if (process.dev) {
-      console.warn("Failed to load chromium instance. Ensure you have chrome installed, otherwise add the dependency: `npm add -D playwright`.");
-    } else {
-      console.error("Failed to load browser instance. Please open an issue with the exception: https://github.com/harlan-zw/nuxt-og-image/issues.");
-      throw e;
-    }
-  }
-}
-
-async function screenshot(browser, options) {
-  const page = await browser.newPage({
-    colorScheme: options.colorScheme
-  });
-  await page.setViewportSize({
-    width: options.width || 1200,
-    height: options.height || 630
-  });
-  const isHtml = options.html || options.path?.startsWith("html:");
-  if (isHtml) {
-    const html = options.html || options.path?.substring(5);
-    await page.evaluate((html2) => {
-      document.open("text/html");
-      document.write(html2);
-      document.close();
-    }, html);
-    await page.waitForLoadState("networkidle");
-  } else {
-    await page.goto(withBase(options.path, options.host), {
-      timeout: 1e4,
-      waitUntil: "networkidle"
-    });
-  }
-  const screenshotOptions = {
-    timeout: 1e4
-  };
-  if (options.delay)
-    await page.waitForTimeout(options.delay);
-  if (options.mask) {
-    await page.evaluate((mask) => {
-      for (const el of document.querySelectorAll(mask))
-        el.style.display = "none";
-    }, options.mask);
-  }
-  if (options.selector)
-    return await page.locator(options.selector).screenshot(screenshotOptions);
-  const screenshot2 = await page.screenshot(screenshotOptions);
-  await page.close();
-  return screenshot2;
-}
-
-function setupPlaygroundRPC(nuxt, config) {
-  const serverFunctions = {
-    getConfig() {
-      return config;
-    },
-    async openInEditor(input) {
-      if (input.startsWith("./"))
-        input = resolve(process.cwd(), input);
-      const match = input.match(/^(.*?)([:\d]*)$/);
-      let suffix = "";
-      if (match) {
-        input = match[1];
-        suffix = match[2];
-      }
-      const file = [
-        input,
-        `${input}.js`,
-        `${input}.mjs`,
-        `${input}.ts`
-      ].find((i) => existsSync(i));
-      if (file) {
-        await import('launch-editor').then((r) => (r.default || r)(file + suffix));
-      } else {
-        console.error("File not found:", input);
-      }
-    }
-  };
-  const clients = /* @__PURE__ */ new Set();
-  const birpc = createBirpcGroup(serverFunctions, []);
-  nuxt.hook("builder:watch", (e, path) => {
-    if (e === "change")
-      birpc.broadcast.refresh.asEvent(path);
-  });
-  const middleware = async (req, res) => {
-    if (req.ws) {
-      const ws = await req.ws();
-      clients.add(ws);
-      const channel = {
-        post: (d) => ws.send(d),
-        on: (fn) => ws.on("message", fn),
-        serialize: stringify,
-        deserialize: parse
-      };
-      birpc.updateChannels((c) => {
-        c.push(channel);
-      });
-      ws.on("close", () => {
-        clients.delete(ws);
-        birpc.updateChannels((c) => {
-          const index = c.indexOf(channel);
-          if (index >= 0)
-            c.splice(index, 1);
-        });
-      });
-    } else if (req.method === "POST") {
-      const body = await getBodyJson(req);
-      if (body.method === "setPayload") ; else {
-        res.statusCode = 400;
-      }
-      res.end();
-    }
-  };
-  return {
-    middleware,
-    birpc
-  };
-}
-function getBodyJson(req) {
-  return new Promise((resolve2, reject) => {
-    let body = "";
-    req.on("data", (chunk) => body += chunk);
-    req.on("error", reject);
-    req.on("end", () => {
-      try {
-        resolve2(JSON.parse(body) || {});
-      } catch (e) {
-        reject(e);
-      }
-    });
-  });
-}
-
-function decodeHtml(html) {
-  return html.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&cent;/g, "\xA2").replace(/&pound;/g, "\xA3").replace(/&yen;/g, "\xA5").replace(/&euro;/g, "\u20AC").replace(/&copy;/g, "\xA9").replace(/&reg;/g, "\xAE").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/").replace(/&#([0-9]+);/g, (full, int) => {
-    return String.fromCharCode(Number.parseInt(int));
-  });
-}
-function decodeObjectHtmlEntities(obj) {
-  Object.entries(obj).forEach(([key, value]) => {
-    if (typeof value === "string")
-      obj[key] = decodeHtml(value);
-  });
-  return obj;
-}
-function extractAndNormaliseOgImageOptions(path, html, routeRules, defaults) {
-  const htmlPayload = html.match(/<script.+id="nuxt-og-image-options"[^>]*>(.+?)<\/script>/)?.[1];
-  if (!htmlPayload)
-    return false;
-  let options;
-  try {
-    const payload = JSON.parse(htmlPayload);
-    Object.entries(payload).forEach(([key, value]) => {
-      if (!value)
-        delete payload[key];
-    });
-    options = defu(payload, routeRules);
-  } catch (e) {
-    options = routeRules;
-    if (process.dev)
-      console.warn("Failed to parse #nuxt-og-image-options", e, options);
-  }
-  if (!options)
-    return false;
-  if (!options.description) {
-    const description = html.match(/<meta property="og:description" content="(.*?)">/)?.[1];
-    if (description)
-      options.description = description;
-    else
-      options.description = html.match(/<meta name="description" content="(.*?)">/)?.[1];
-  }
-  const decoded = decodeObjectHtmlEntities(options);
-  return defu(
-    decoded,
-    // runtime options
-    { path },
-    defaults
-  );
-}
-
-const SVG2PNGWasmPlaceholder = '"/* NUXT_OG_IMAGE_SVG2PNG_WASM */"';
-const YogaWasmPlaceholder = '"/* NUXT_OG_IMAGE_YOGA_WASM */"';
-const ReSVGWasmPlaceholder = '"/* NUXT_OG_IMAGE_RESVG_WASM */"';
-const Wasms = [
-  {
-    placeholder: SVG2PNGWasmPlaceholder,
-    path: "svg2png/svg2png.wasm",
-    file: "svg2png.wasm"
-  },
-  {
-    placeholder: ReSVGWasmPlaceholder,
-    path: "resvg/resvg.wasm",
-    file: "resvg.wasm"
-  },
-  {
-    placeholder: YogaWasmPlaceholder,
-    path: "yoga/yoga.wasm",
-    file: "yoga.wasm"
-  }
-];
-const DefaultRuntimeCompatibility = {
+const autodetectableProviders = {
+  azure_static: "azure",
+  cloudflare_pages: "cloudflare-pages",
+  netlify: "netlify",
+  stormkit: "stormkit",
+  vercel: "vercel",
+  cleavr: "cleavr",
+  stackblitz: "stackblitz"
+};
+const autodetectableStaticProviders = {
+  netlify: "netlify-static",
+  vercel: "vercel-static"
+};
+const NodeRuntime = {
   // node-server runtime
-  browser: "playwright",
-  satori: "default",
-  wasm: "fetch",
-  png: "resvg-node",
-  node: true,
-  cssInline: true
+  bindings: {
+    "chromium": "node",
+    "css-inline": "node",
+    "resvg": "node",
+    "satori": "node",
+    "sharp": "node"
+  },
+  wasmStrategy: "import"
 };
 const cloudflare = {
-  browser: false,
-  wasm: "import",
-  png: "resvg-wasm",
-  node: false,
-  cssInline: false
+  bindings: {
+    "chromium": false,
+    "css-inline": "node",
+    "resvg": "wasm",
+    "satori": "node",
+    "sharp": false
+  },
+  wasmStrategy: "import"
 };
 const awsLambda = {
-  browser: false,
-  // too difficult to support
-  wasm: "inline",
-  cssInline: false
+  bindings: {
+    "chromium": false,
+    "css-inline": "node",
+    "resvg": "wasm",
+    "satori": "node",
+    "sharp": "node"
+  },
+  wasmStrategy: "inline"
 };
 const RuntimeCompatibility = {
-  "nitro-dev": {
-    wasm: "fetch",
-    browser: "universal"
-  },
+  "nitro-dev": NodeRuntime,
+  "nitro-prerender": NodeRuntime,
+  "node-server": NodeRuntime,
   "stackblitz": {
-    browser: false,
-    satori: "yoga-wasm",
-    wasm: "inline",
-    png: "resvg-wasm",
-    cssInline: false
+    bindings: {
+      "chromium": false,
+      "css-inline": "node",
+      "resvg": "wasm",
+      "satori": "node",
+      "sharp": "node"
+    },
+    wasmStrategy: "inline"
   },
   "aws-lambda": awsLambda,
   "netlify": awsLambda,
   "netlify-edge": {
-    wasm: "inline",
-    png: "resvg-wasm",
-    node: false,
-    cssInline: false
+    bindings: {
+      "chromium": false,
+      "css-inline": "node",
+      "resvg": "wasm",
+      "satori": "node",
+      "sharp": "node"
+    },
+    wasmStrategy: "inline"
   },
   "vercel": {
-    // exceeds 50mb limit
-    browser: false
+    bindings: {
+      "chromium": false,
+      "css-inline": "node",
+      "resvg": "wasm",
+      "satori": "node",
+      "sharp": "node"
+    },
+    wasmStrategy: "inline"
   },
   "vercel-edge": {
-    browser: false,
-    wasm: "import",
-    wasmImportQuery: "?module",
-    png: "resvg-wasm",
-    node: false,
-    cssInline: false
+    bindings: {
+      "chromium": false,
+      "css-inline": "node",
+      "resvg": "wasm",
+      "satori": "node",
+      "sharp": "node"
+    },
+    wasmStrategy: "inline",
+    wasmImportQuery: "?module"
   },
   "cloudflare-pages": cloudflare,
   "cloudflare": cloudflare
 };
-
-const autodetectableProviders = {
-  azure_static: "azure",
-  cloudflare_pages: "cloudflare-pages",
-  netlify: "netlify",
-  stormkit: "stormkit",
-  vercel: "vercel",
-  cleavr: "cleavr",
-  stackblitz: "stackblitz"
-};
-const autodetectableStaticProviders = {
-  netlify: "netlify-static",
-  vercel: "vercel-static"
-};
 function detectTarget(options = {}) {
   return options?.static ? autodetectableStaticProviders[provider] : autodetectableProviders[provider];
 }
-function getNitroPreset(nuxt = useNuxt()) {
-  return process.env.NITRO_PRESET || nuxt.options.nitro.preset || detectTarget() || "node-server";
+function resolveNitroPreset(nitroConfig) {
+  if (provider === "stackblitz")
+    return "stackblitz";
+  let preset;
+  if (nitroConfig && nitroConfig?.preset)
+    preset = nitroConfig.preset;
+  if (!preset)
+    preset = env.NITRO_PRESET || detectTarget() || "node-server";
+  return preset.replace("_", "-");
 }
-function getNitroProviderCompatibility(overrides, nuxt = useNuxt()) {
-  let compatibility;
-  if (provider === "stackblitz") {
-    compatibility = RuntimeCompatibility.stackblitz;
-  } else if (nuxt.options.dev || nuxt.options._prepare || nuxt.options._generate) {
-    compatibility = {
-      wasm: "fetch",
-      browser: "universal"
-    };
-  } else {
-    const target = getNitroPreset(nuxt);
-    const lookup = RuntimeCompatibility[target];
-    if (lookup === false)
-      return false;
-    compatibility = lookup || {};
-  }
-  compatibility = defu$1(overrides, compatibility, DefaultRuntimeCompatibility);
+function getPresetNitroPresetCompatibility(target) {
+  let compatibility = RuntimeCompatibility[target];
+  if (!compatibility)
+    compatibility = RuntimeCompatibility["nitro-dev"];
   return compatibility;
 }
-function ensureDependencies(nuxt, dep) {
-  return Promise.all(dep.map((d) => {
-    return addDependency(d, { cwd: nuxt.options.rootDir });
-  }));
+function applyNitroPresetCompatibility(nitroConfig, options) {
+  let compatibility = options?.compatibility;
+  const target = resolveNitroPreset(nitroConfig);
+  if (!compatibility)
+    compatibility = getPresetNitroPresetCompatibility(target);
+  const resolve = options.resolve;
+  function applyBinding(key) {
+    const binding = compatibility.bindings[key];
+    if (binding === false)
+      return { [`#nuxt-og-image/bindings/${key}`]: "unenv/runtime/mock/empty" };
+    return { [`#nuxt-og-image/bindings/${key}`]: resolve(`./runtime/core/bindings/${key}/${binding}`) };
+  }
+  nitroConfig.alias = defu(
+    applyBinding("chromium"),
+    applyBinding("satori"),
+    applyBinding("resvg"),
+    applyBinding("sharp"),
+    nitroConfig.alias || {}
+  );
+  if (target.includes("cloudflare")) {
+    nitroConfig.rollupConfig = nitroConfig.rollupConfig || {};
+    nitroConfig.rollupConfig.output.inlineDynamicImports = true;
+  }
+  return compatibility;
 }
 
 function extendTypes(module, template) {
@@ -367,9 +169,113 @@ export {}
   });
 }
 
-const PATH = "/__nuxt_og_image__";
-const PATH_ENTRY = `${PATH}/entry`;
-const PATH_PLAYGROUND = `${PATH}/client`;
+const DEVTOOLS_UI_ROUTE = "/__nuxt-og-image";
+const DEVTOOLS_UI_LOCAL_PORT = 3030;
+function setupDevToolsUI(options, resolve, nuxt = useNuxt()) {
+  const clientPath = resolve("./client");
+  const isProductionBuild = existsSync(clientPath);
+  if (isProductionBuild) {
+    nuxt.hook("vite:serverCreated", async (server) => {
+      const sirv = await import('sirv').then((r) => r.default || r);
+      server.middlewares.use(
+        DEVTOOLS_UI_ROUTE,
+        sirv(clientPath, { dev: true, single: true })
+      );
+    });
+  } else {
+    nuxt.hook("vite:extendConfig", (config) => {
+      config.server = config.server || {};
+      config.server.proxy = config.server.proxy || {};
+      config.server.proxy[DEVTOOLS_UI_ROUTE] = {
+        target: `http://localhost:${DEVTOOLS_UI_LOCAL_PORT}${DEVTOOLS_UI_ROUTE}`,
+        changeOrigin: true,
+        followRedirects: true,
+        rewrite: (path) => path.replace(DEVTOOLS_UI_ROUTE, "")
+      };
+    });
+  }
+  onDevToolsInitialized(async () => {
+    const rpc = extendServerRpc("nuxt-og-image", {});
+    nuxt.hook("builder:watch", (e, path) => {
+      if ((e === "change" || e.includes("link")) && path.startsWith("pages")) {
+        rpc.broadcast.refreshRouteData(path).catch(() => {
+        });
+      }
+      if (options.componentDirs.some((dir) => path.includes(dir)))
+        rpc.broadcast.refreshGlobalData().catch(() => {
+        });
+    });
+  });
+  nuxt.hook("devtools:customTabs", (tabs) => {
+    tabs.push({
+      // unique identifier
+      name: "nuxt-og-image",
+      // title to display in the tab
+      title: "OG Image",
+      // any icon from Iconify, or a URL to an image
+      icon: "carbon:image-search",
+      // iframe view
+      view: {
+        type: "iframe",
+        src: DEVTOOLS_UI_ROUTE
+      }
+    });
+  });
+}
+
+function setupDevHandler(options, resolve, nuxt = useNuxt()) {
+  nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
+    nitroConfig.alias["#nuxt-og-image/renderers/satori"] = options.runtimeSatori ? resolve("./runtime/core/renderers/satori") : "unenv/runtime/mock/empty";
+    nitroConfig.alias["#nuxt-og-image/renderers/chromium"] = options.runtimeBrowser ? resolve("./runtime/core/renderers/chromium") : "unenv/runtime/mock/empty";
+    applyNitroPresetCompatibility(nitroConfig, { resolve });
+  });
+}
+
+function setupGenerateHandler(options, resolve, nuxt = useNuxt()) {
+  nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
+    nitroConfig.alias["#nuxt-og-image/renderers/satori"] = "unenv/runtime/mock/empty";
+    nitroConfig.alias["#nuxt-og-image/renderers/chromium"] = "unenv/runtime/mock/empty";
+    applyNitroPresetCompatibility(nitroConfig, {
+      compatibility: {
+        bindings: {
+          "css-inline": false,
+          "chromium": false,
+          "resvg": false,
+          "satori": false,
+          "sharp": false
+        }
+      },
+      resolve
+    });
+  });
+}
+
+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 });
+    });
+  });
+}
+
+async function setupBuildHandler(config, resolve, nuxt = useNuxt()) {
+  nuxt.options.nitro.storage = nuxt.options.nitro.storage || {};
+  if (typeof config.runtimeCacheStorage === "object")
+    nuxt.options.nitro.storage["og-image"] = config.runtimeCacheStorage;
+  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 });
+    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";
+  });
+}
+
 const module = defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
@@ -383,10 +289,10 @@ const module = defineNuxtModule({
     return {
       enabled: true,
       defaults: {
-        provider: "satori",
-        component: "OgImageTemplateFallback",
+        renderer: "satori",
+        component: "Fallback",
         width: 1200,
-        height: 630,
+        height: 600,
         cache: true,
         // default is to cache the image for 1 day (24 hours)
         cacheTtl: 24 * 60 * 60 * 1e3
@@ -396,8 +302,7 @@ const module = defineNuxtModule({
       runtimeBrowser: nuxt.options.dev,
       fonts: [],
       runtimeCacheStorage: true,
-      satoriOptions: {},
-      playground: process.env.NODE_ENV === "development" || nuxt.options.dev,
+      playground: env.NODE_ENV === "development" || nuxt.options.dev,
       debug: false
     };
   },
@@ -408,95 +313,41 @@ const module = defineNuxtModule({
       logger.debug("The module is disabled, skipping setup.");
       return;
     }
-    const { resolve } = createResolver(import.meta.url);
-    logger.debug("Using Nitro preset", getNitroPreset());
-    const nitroCompatibility = getNitroProviderCompatibility(config.runtimeCompatibility || {});
-    logger.debug("Nitro compatibility", nitroCompatibility);
-    const nitroTarget = process.env.NITRO_PRESET || nuxt.options.nitro.preset || provider;
-    if (!nitroCompatibility) {
-      logger.warn(`\`nuxt-og-image\` does not support the nitro preset \`${nitroTarget}\`. Please make an issue. `);
+    if (config.enabled && !nuxt.options.ssr) {
+      logger.warn("Nuxt OG Image is enabled but SSR is disabled.\n\nYou should enable SSR (`ssr: true`) or disable the module (`ogImage: { enabled: false }`).");
       return;
     }
-    if (!nitroCompatibility.browser && config.runtimeBrowser) {
-      config.runtimeBrowser = false;
-      logger.warn(`\`nuxt-og-image\` does not support the nitro target \`${nitroTarget}\` with the runtime browser. Set runtimeBrowser: false to stop seeing this.`);
-    }
-    if (config.runtimeBrowser && nitroCompatibility.browser === "lambda") {
-      logger.info(`\`nuxt-og-image\` is deploying to nitro target \`${nitroTarget}\` that installs extra dependencies.`);
-      await ensureDependencies(nuxt, ["puppeteer-core@14.1.1", "@sparticuz/chrome-aws-lambda@14.1.1"]);
-    }
+    const { resolve } = createResolver(import.meta.url);
+    const preset = resolveNitroPreset(nuxt.options.nitro);
+    const compatibility = getPresetNitroPresetCompatibility(preset);
+    config.defaults.extension = "jpg";
+    if (!compatibility.bindings.sharp)
+      config.defaults.extension = "png";
     await installNuxtSiteConfig();
-    updateSiteConfig({
-      _context: "nuxt-og-image:config",
-      url: config.siteUrl || config.host
-    });
-    nuxt.options.nitro.storage = nuxt.options.nitro.storage || {};
-    if (nuxt.options._generate) {
-      nuxt.options.nitro.storage["og-image"] = {
-        driver: "memory"
-      };
-    } else if (config.runtimeCacheStorage && !nuxt.options.dev && typeof config.runtimeCacheStorage === "object") {
-      nuxt.options.nitro.storage["og-image"] = config.runtimeCacheStorage;
+    if (hasNuxtModule("@nuxt/content")) {
+      addServerPlugin(resolve("./runtime/nitro/plugins/nuxt-content"));
+      addPlugin(resolve("./runtime/nuxt/plugins/nuxt-content-canonical-urls"));
     }
     if (!config.fonts.length)
       config.fonts = ["Inter:400", "Inter:700"];
-    const distResolve = (p) => {
-      const cwd = resolve(".");
-      if (cwd.endsWith("/dist"))
-        return resolve(p);
-      return resolve(`../dist/${p}`);
-    };
     nuxt.options.experimental.componentIslands = true;
-    extendTypes("nuxt-og-image", ({ typesPath }) => {
-      return `
-declare module 'nitropack' {
-  interface NitroRouteRules {
-    ogImage?: false | import('${typesPath}').OgImageOptions
-  }
-  interface NitroRouteConfig {
-    ogImage?: false | import('${typesPath}').OgImageOptions
-  }
-}`;
-    });
     addServerHandler({
       lazy: true,
-      handler: resolve("./runtime/nitro/middleware/og.png")
-    });
-    ["html", "options", "svg", "vnode", "font", "debug"].forEach((type) => {
-      if (type !== "debug" || config.debug) {
-        addServerHandler({
-          lazy: true,
-          route: `/api/og-image-${type}`,
-          handler: resolve(`./runtime/nitro/routes/${type}`)
-        });
-      }
-    });
-    nuxt.hook("devtools:customTabs", (iframeTabs) => {
-      iframeTabs.push({
-        name: "ogimage",
-        title: "OG Image",
-        icon: "carbon:image-search",
-        view: {
-          type: "iframe",
-          src: "/__nuxt_og_image__/client/"
-        }
-      });
+      route: "/__og-image__/font/**",
+      handler: resolve("./runtime/server/routes/__og-image__/font-[name]-[weight].[extension]")
     });
-    if (config.playground) {
-      const playgroundDir = distResolve("./client");
-      const {
-        middleware: rpcMiddleware
-      } = setupPlaygroundRPC(nuxt, config);
-      nuxt.hook("vite:serverCreated", async (server) => {
-        server.middlewares.use(PATH_ENTRY, tinyws());
-        server.middlewares.use(PATH_ENTRY, rpcMiddleware);
-        if (await pathExists(playgroundDir))
-          server.middlewares.use(PATH_PLAYGROUND, sirv(playgroundDir, { single: true, dev: true }));
-      });
+    if (config.debug || nuxt.options.dev) {
       addServerHandler({
-        handler: resolve("./runtime/nitro/middleware/playground")
+        lazy: true,
+        route: "/__og-image__/debug.json",
+        handler: resolve("./runtime/server/routes/__og-image__/debug.json")
       });
     }
+    addServerHandler({
+      lazy: true,
+      route: "/__og-image__/image/**",
+      handler: resolve("./runtime/server/routes/__og-image__/image-[path]-og.[extension]")
+    });
     nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"] = [];
     [
       // deprecated
@@ -505,6 +356,7 @@ declare module 'nitropack' {
       // new
       "index",
       "Cached",
+      "Component",
       "WithoutCache",
       "Screenshot"
     ].forEach((name) => {
@@ -515,9 +367,12 @@ declare module 'nitropack' {
       });
       nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"].push(name);
     });
-    await addComponent({
-      name: "OgImageTemplateFallback",
-      filePath: resolve("./runtime/components/OgImageTemplate/Fallback.vue"),
+    await addComponentsDir({
+      path: resolve("./runtime/components/Templates/Community"),
+      island: true
+    });
+    await addComponentsDir({
+      path: resolve("./runtime/components/Templates/Official"),
       island: true
     });
     [
@@ -536,55 +391,99 @@ declare module 'nitropack' {
         filePath: resolve(`./runtime/components/OgImage/${name}`)
       });
     });
-    const ogImageComponents = [];
+    addPlugin(resolve("./runtime/nuxt/plugins/route-rule-og-image.server"));
+    const ogImageComponentCtx = { components: [] };
     nuxt.hook("components:extend", (components) => {
+      ogImageComponentCtx.components = [];
       components.forEach((component) => {
         let valid = false;
         config.componentDirs.forEach((dir) => {
           if (component.pascalName.startsWith(dir) || component.kebabName.startsWith(dir) || component.shortPath.includes(`/${dir}/`))
             valid = true;
         });
-        if (valid || component.pascalName === "OgImageTemplateFoo") {
+        if (component.filePath.includes(resolve("./runtime/components/Templates")))
+          valid = true;
+        if (valid && fs.existsSync(component.filePath)) {
           component.island = true;
           component.mode = "server";
-          ogImageComponents.push({
+          let category = "app";
+          if (component.filePath.includes(resolve("./runtime/components/Templates/Community")))
+            category = "community";
+          else if (component.filePath.includes(resolve("./runtime/components/Templates/Official")))
+            category = "official";
+          const componentFile = fs.readFileSync(component.filePath, "utf-8");
+          const credits = componentFile.split("\n").find((line) => line.startsWith(" * @credits"))?.replace("* @credits", "").trim();
+          ogImageComponentCtx.components.push({
             // purge cache when component changes
-            hash: hash(fs.readFileSync(component.filePath, "utf-8")),
+            hash: hash(componentFile),
             pascalName: component.pascalName,
-            kebabName: component.kebabName
+            kebabName: component.kebabName,
+            path: nuxt.options.dev ? component.filePath : void 0,
+            category,
+            credits
           });
         }
       });
+      nuxt.hooks.hook("nuxt-og-image:components", ogImageComponentCtx);
     });
     addTemplate({
       filename: "og-image-component-names.mjs",
       getContents() {
-        return `export const componentNames = ${JSON.stringify(ogImageComponents)}`;
+        return `export const componentNames = ${JSON.stringify(ogImageComponentCtx.components)}`;
       },
       options: { mode: "server" }
     });
-    const runtimeDir = resolve("./runtime");
-    nuxt.options.build.transpile.push(runtimeDir);
-    addServerPlugin(resolve("./runtime/nitro/plugins/prerender"));
-    const customAssetDirs = [
-      // allows us to show custom error images
-      resolve("./runtime/public-assets")
-    ];
-    if (config.runtimeSatori) {
-      if (config.fonts.includes("Inter:400"))
-        customAssetDirs.push(resolve("./runtime/public-assets-optional/inter-font"));
-      if (nitroCompatibility.png === "resvg-wasm" && nitroCompatibility.wasm === "fetch")
-        customAssetDirs.push(resolve("./runtime/public-assets-optional/resvg"));
-      else if (nitroCompatibility.png === "svg2png" && nitroCompatibility.wasm === "fetch")
-        customAssetDirs.push(resolve("./runtime/public-assets-optional/svg2png"));
-      if (nitroCompatibility.satori === "yoga-wasm")
-        customAssetDirs.push(resolve("./runtime/public-assets-optional/yoga"));
-    }
+    nuxt.options.nitro.virtual = nuxt.options.nitro.virtual || {};
+    nuxt.options.nitro.virtual["#nuxt-og-image/component-names.mjs"] = () => {
+      return `export const componentNames = ${JSON.stringify(ogImageComponentCtx.components)}`;
+    };
+    extendTypes("nuxt-og-image", ({ typesPath }) => {
+      const componentImports = ogImageComponentCtx.components.map((component) => {
+        const relativeComponentPath = relative(resolve(nuxt.options.rootDir, nuxt.options.buildDir, "module"), component.path);
+        return `    '${component.pascalName}': typeof import('${relativeComponentPath}')['default']`;
+      }).join("\n");
+      return `
+declare module 'nitropack' {
+  interface NitroRouteRules {
+    ogImage?: false | import('${typesPath}').OgImageOptions
+  }
+  interface NitroRouteConfig {
+    ogImage?: false | import('${typesPath}').OgImageOptions
+  }
+}
+declare module '#nuxt-og-image/components' {
+  export interface OgImageComponents {
+${componentImports}
+  }
+}
+`;
+    });
     nuxt.hooks.hook("modules:done", async () => {
       nuxt.hooks.callHook("og-image:config", config);
+      const normalisedFonts = config.fonts.map((f) => {
+        if (typeof f === "string") {
+          const [name, weight] = f.split(":");
+          return {
+            name,
+            weight,
+            path: void 0
+          };
+        }
+        return f;
+      });
+      if (!nuxt.options._generate && nuxt.options.build) {
+        nuxt.options.nitro.prerender = nuxt.options.nitro.prerender || {};
+        nuxt.options.nitro.prerender.routes = nuxt.options.nitro.prerender.routes || [];
+        normalisedFonts.filter((f) => !f.path).forEach(({ name, weight }) => {
+          nuxt.options.nitro.prerender.routes.push(`/__og-image__/font/${name}/${weight}.ttf`);
+        });
+      }
       nuxt.options.runtimeConfig["nuxt-og-image"] = {
         version,
-        satoriOptions: config.satoriOptions,
+        // binding options
+        satoriOptions: config.satoriOptions || {},
+        resvgOptions: config.resvgOptions || {},
+        sharpOptions: config.sharpOptions || {},
         runtimeSatori: config.runtimeSatori,
         runtimeBrowser: config.runtimeBrowser,
         // @ts-expect-error runtime type
@@ -592,247 +491,22 @@ declare module 'nitropack' {
         // avoid adding credentials
         runtimeCacheStorage: typeof config.runtimeCacheStorage === "boolean" ? "default" : config.runtimeCacheStorage.driver,
         // convert the fonts to uniform type to fix ts issue
-        fonts: config.fonts.map((f) => {
-          if (typeof f === "string") {
-            const [name, weight] = f.split(":");
-            return {
-              name,
-              weight
-            };
-          }
-          return f;
-        }),
-        assetDirs: [
-          resolve(nuxt.options.srcDir, nuxt.options.dir.public),
-          ...customAssetDirs,
-          // always add runtime dirs for prerendering to work, these are just used as scan roots
-          resolve("./runtime/public-assets-optional/inter-font"),
-          resolve("./runtime/public-assets-optional/resvg"),
-          resolve("./runtime/public-assets-optional/yoga"),
-          resolve("./runtime/public-assets-optional/svg2png")
-        ]
-      };
-    });
-    nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
-      nitroConfig.externals = defu$1(nitroConfig.externals || {}, {
-        inline: [runtimeDir]
-      });
-      if (!nitroCompatibility.node) {
-        nitroConfig.alias = nitroConfig.alias || {};
-        if (config.runtimeBrowser) {
-          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";
-      }
-      if (nitroCompatibility.png === "resvg-wasm")
-        nitroConfig.alias["@resvg/resvg-js"] = "unenv/runtime/mock/proxy-cjs";
-      nitroConfig.publicAssets = nitroConfig.publicAssets || [];
-      customAssetDirs.forEach((dir) => {
-        nitroConfig.publicAssets.push({ dir, maxAge: 31536e3 });
-      });
-      const providerPath = `${runtimeDir}/nitro/providers`;
-      nitroConfig.virtual["#nuxt-og-image/css-inline"] = `import cssInline from '${providerPath}/css-inline/${nitroCompatibility.cssInline ? "css-inline" : "mock"}'
-export default function() {
- return cssInline
-}
-`;
-      if (config.runtimeBrowser) {
-        nitroConfig.virtual["#nuxt-og-image/browser"] = `
-let browser
-export default async function() {
-  browser = browser || await import('${providerPath}/browser/${nitroCompatibility.browser}').then((m) => m.default || m)
-  return browser
-}
-`;
-      }
-      if (config.runtimeSatori) {
-        nitroConfig.virtual["#nuxt-og-image/satori"] = `import satori from '${providerPath}/satori/${nitroCompatibility.satori}'
-export default function() {
-  return satori
-}`;
-        nitroConfig.virtual["#nuxt-og-image/png"] = `import png from '${providerPath}/png/${nitroCompatibility.png}'
-export default function() {
- return png
-}
-`;
-      }
-      const rendererPath = `${runtimeDir}/nitro/renderers`;
-      nitroConfig.virtual["#nuxt-og-image/provider"] = `
-${config.runtimeSatori ? `import satori from '${rendererPath}/satori'` : ""}
-${config.runtimeBrowser ? `import browser from '${rendererPath}/browser'` : ""}
-
-export async function useProvider(provider) {
-  if (provider === 'satori')
-    return ${config.runtimeSatori ? "satori" : "null"}
-  if (provider === 'browser')
-    return ${config.runtimeBrowser ? "browser" : "null"}
-  return null
-}
-      `;
-    });
-    nuxt.hooks.hook("nitro:init", async (nitro) => {
-      let screenshotQueue = [];
-      nitro.hooks.hook("compiled", async (_nitro) => {
-        if (!config.runtimeSatori || nuxt.options.dev)
-          return;
-        if (config.fonts.includes("Inter:400"))
-          await copy(resolve("./runtime/public-assets-optional/inter-font/inter-latin-ext-400-normal.woff"), resolve(_nitro.options.output.publicDir, "inter-latin-ext-400-normal.woff"));
-        if (config.fonts.includes("Inter:700"))
-          await copy(resolve("./runtime/public-assets-optional/inter-font/inter-latin-ext-700-normal.woff"), resolve(_nitro.options.output.publicDir, "inter-latin-ext-700-normal.woff"));
-        const configuredEntry = nitro.options.rollupConfig?.output.entryFileNames;
-        const wasmProviderPath = resolve(_nitro.options.output.serverDir, typeof configuredEntry === "string" ? configuredEntry : "index.mjs");
-        const paths = [wasmProviderPath];
-        const chunks = await globby([`${_nitro.options.output.serverDir}/chunks/**/*.mjs`], { absolute: true });
-        paths.push(...chunks);
-        for (const path of paths) {
-          if (!await pathExists(path))
-            continue;
-          let contents = await readFile(path, "utf-8");
-          let updated = false;
-          for (const wasm of Wasms) {
-            if (contents.includes(wasm.placeholder)) {
-              if (nitroCompatibility.wasm === "import") {
-                contents = contents.replace(wasm.placeholder, `import("./${wasm.file}${nitroCompatibility.wasmImportQuery || ""}").then(m => m.default || m)`);
-                await copy(resolve(`./runtime/public-assets-optional/${wasm.path}`), resolve(dirname(path), wasm.file));
-              } else if (nitroCompatibility.wasm === "inline") {
-                const wasmBuffer = await readFile(resolve(`./runtime/public-assets-optional/${wasm.path}`));
-                contents = contents.replace(wasm.placeholder, `Buffer.from("${wasmBuffer}", "base64")`);
-              }
-              updated = true;
-            }
-          }
-          if (updated)
-            await writeFile(path, contents, { encoding: "utf-8" });
-        }
-      });
-      const _routeRulesMatcher = toRouteMatcher(
-        createRouter({ routes: nitro.options.routeRules })
-      );
-      nitro.hooks.hook("prerender:generate", async (ctx) => {
-        if (ctx.route.includes("."))
-          return;
-        const html = ctx.contents;
-        if (!html)
-          return;
-        const routeRules = defu$1({}, ..._routeRulesMatcher.matchAll(ctx.route).reverse());
-        const extractedOptions = extractAndNormaliseOgImageOptions(ctx.route, html, routeRules.ogImage || {}, config.defaults);
-        if (!extractedOptions || routeRules.ogImage === false)
-          return;
-        const isPageScreenshot = extractedOptions.component === "PageScreenshot";
-        const entry = {
-          route: parsePath(ctx.route).pathname,
-          // drop hash and query
-          path: !isPageScreenshot ? `/api/og-image-html?path=${ctx.route}` : ctx.route,
-          ...extractedOptions
-        };
-        if (screenshotQueue.some((r) => r.route === entry.route))
-          return;
-        if ((nuxt.options._generate || entry.cache) && 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;
-        nitro.logger.info("Ensuring chromium install for og:image generation...");
-        const installChromeProcess = execa("npx", ["playwright", "install", "chromium"], {
-          stdio: "inherit"
-        });
-        installChromeProcess.stderr?.pipe(process.stderr);
-        await new Promise((resolve2) => {
-          installChromeProcess.on("exit", (e) => {
-            if (e !== 0)
-              nitro.logger.error("Failed to install Playwright dependency for og:image generation. Trying anyway...");
-            resolve2(true);
-          });
-        });
-        installChromeProcess.pid && terminate(installChromeProcess.pid);
-        const browser = await createBrowser();
-        if (!browser) {
-          nitro.logger.log(chalk.red("Failed to create a browser to create og:images."));
-          return;
-        }
-        nitro.logger.info("Creating server for og:image generation...");
-        const previewProcess = execa("npx", ["serve", nitro.options.output.publicDir]);
-        try {
-          const host = (await new Promise((resolve2) => {
-            previewProcess.stdout?.on("data", (data) => {
-              if (data.includes("Accepting connections at")) {
-                resolve2(data.toString().split("Accepting connections at ")[1]);
-              }
-            });
-          })).trim();
-          previewProcess.removeAllListeners("data");
-          nitro.logger.info(`Prerendering ${screenshotQueue.length} og:image screenshots...`);
-          for (const k in screenshotQueue) {
-            let entry = screenshotQueue[k];
-            if (entry.route && Object.keys(entry).length === 1) {
-              const html = await $fetch(entry.route, { baseURL: withBase(nuxt.options.app.baseURL, host) });
-              const routeRules = defu$1({}, ..._routeRulesMatcher.matchAll(entry.route).reverse());
-              const extractedOptions = extractAndNormaliseOgImageOptions(entry.route, html, routeRules.ogImage || {}, {
-                ...config.defaults,
-                component: "PageScreenshot"
-              });
-              if (!extractedOptions || routeRules.ogImage === false) {
-                entry.skip = true;
-                continue;
-              }
-              screenshotQueue[k] = entry = defu$1(
-                { path: extractedOptions.component !== "PageScreenshot" ? `/api/og-image-html?path=${entry.route}` : entry.route },
-                entry,
-                extractedOptions
-              );
-            }
-            if (!entry.skip && entry.component !== "PageScreenshot")
-              entry.html = await globalThis.$fetch(entry.path);
-          }
-          for (const k in screenshotQueue) {
-            const entry = screenshotQueue[k];
-            if (entry.skip)
-              continue;
-            const start = Date.now();
-            let hasError = false;
-            const dirname2 = joinURL(nitro.options.output.publicDir, entry.route, "/__og_image__/");
-            const filename = joinURL(dirname2, "/og.png");
-            try {
-              const imgBuffer = await screenshot(browser, {
-                ...config.defaults || {},
-                ...entry || {},
-                host
-              });
-              try {
-                await mkdirp(dirname2);
-              } catch (e) {
-              }
-              await writeFile(filename, imgBuffer);
-            } catch (e) {
-              hasError = true;
-              console.error(e);
-            }
-            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)}%`
-            ));
-          }
-        } catch (e) {
-          console.error(e);
-        } finally {
-          await browser?.close();
-          previewProcess.pid && terminate(previewProcess.pid);
-        }
-        screenshotQueue = [];
+        fonts: normalisedFonts,
+        hasNuxtIcon: hasNuxtModule("nuxt-icon")
       };
-      nitro.hooks.hook("rollup:before", async () => {
-        await captureScreenshots();
-      });
-      nitro.hooks.hook("close", async () => {
-        await captureScreenshots();
-      });
     });
+    nuxt.options.nitro.experimental = nuxt.options.nitro.experimental || {};
+    nuxt.options.nitro.experimental.wasm = true;
+    if (nuxt.options.dev) {
+      setupDevHandler(config, resolve);
+      setupDevToolsUI(config, resolve);
+    } else if (nuxt.options._generate) {
+      setupGenerateHandler(config, resolve);
+    } else if (nuxt.options.build) {
+      await setupBuildHandler(config, resolve);
+    }
+    if (nuxt.options.nitro.prerender?.routes || nuxt.options._generate)
+      setupPrerenderHandler(config, resolve);
   }
 });