nuxt-og-image 2.0.0 → 2.0.2

package/dist/module.mjs

@@ -11,12 +11,12 @@ import sirv from 'sirv';
 import { pathExists, copy, mkdirp } from 'fs-extra';
 import { globby } from 'globby';
 import { installNuxtSiteConfig, updateSiteConfig, requireSiteConfig } from 'nuxt-site-config-kit';
+import { provider } from 'std-env';
 import playwrightCore from 'playwright-core';
 import { existsSync } from 'node:fs';
 import { createBirpcGroup } from 'birpc';
 import { stringify, parse } from 'flatted';
 import { addDependency } from 'nypm';
-import { provider } from 'std-env';
 
 async function createBrowser() {
   if (process.dev || process.env.prerender) {
@@ -236,7 +236,14 @@ const DefaultRuntimeCompatibility = {
   browser: "playwright",
   satori: "default",
   wasm: "fetch",
-  png: "resvg-node"
+  png: "resvg-node",
+  node: true
+};
+const cloudflare = {
+  browser: false,
+  wasm: "import",
+  png: "resvg-wasm",
+  node: false
 };
 const RuntimeCompatibility = {
   "nitro-dev": {
@@ -255,7 +262,8 @@ const RuntimeCompatibility = {
   },
   "netlify-edge": {
     wasm: "inline",
-    png: "resvg-wasm"
+    png: "resvg-wasm",
+    node: false
   },
   "vercel": {
     // exceeds 50mb limit
@@ -265,17 +273,11 @@ const RuntimeCompatibility = {
     browser: false,
     wasm: "import",
     wasmImportQuery: "?module",
-    png: "resvg-wasm"
-  },
-  "cloudflare-pages": {
-    browser: false,
-    wasm: "import",
-    png: "resvg-wasm"
+    png: "resvg-wasm",
+    node: false
   },
-  "cloudflare": {
-    browser: false,
-    wasm: "import"
-  }
+  "cloudflare-pages": cloudflare,
+  "cloudflare": cloudflare
 };
 
 const autodetectableProviders = {
@@ -294,23 +296,28 @@ const autodetectableStaticProviders = {
 function detectTarget(options = {}) {
   return options?.static ? autodetectableStaticProviders[provider] : autodetectableProviders[provider];
 }
-function getNitroPreset(nuxt) {
+function getNitroPreset(nuxt = useNuxt()) {
   return process.env.NITRO_PRESET || nuxt.options.nitro.preset || detectTarget() || "node-server";
 }
-function getNitroProviderCompatibility(nuxt) {
-  if (provider === "stackblitz")
-    return defu(RuntimeCompatibility.stackblitz, DefaultRuntimeCompatibility);
-  if (nuxt.options.dev || nuxt.options._prepare || nuxt.options._generate) {
-    return defu({
+function getNitroProviderCompatibility(defaults, 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"
-    }, DefaultRuntimeCompatibility);
+    };
+  } else {
+    const target = getNitroPreset(nuxt);
+    const lookup = RuntimeCompatibility[target];
+    if (lookup === false)
+      return false;
+    compatibility = lookup || {};
   }
-  const target = getNitroPreset(nuxt);
-  const compatibility = RuntimeCompatibility[target];
-  if (compatibility === false)
-    return false;
-  return defu(compatibility || {}, DefaultRuntimeCompatibility);
+  compatibility = defu(compatibility, defaults);
+  compatibility.inlineCss = compatibility.inlineCss || (compatibility.node ? "node" : "mock");
+  return compatibility;
 }
 function ensureDependencies(nuxt, dep) {
   return Promise.all(dep.map((d) => {
@@ -358,6 +365,7 @@ const module = defineNuxtModule({
         cache: true,
         cacheTtl: 24 * 60 * 60 * 1e3
       },
+      runtimeCompatibility: DefaultRuntimeCompatibility,
       componentDirs: ["OgImage", "OgImageTemplate"],
       runtimeSatori: true,
       runtimeBrowser: nuxt.options.dev,
@@ -376,12 +384,12 @@ const module = defineNuxtModule({
       return;
     }
     const { resolve } = createResolver(import.meta.url);
-    logger.debug("Using Nitro preset", getNitroPreset(nuxt));
-    const nitroCompatibility = getNitroProviderCompatibility(nuxt);
+    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;
+    const nitroTarget = process.env.NITRO_PRESET || nuxt.options.nitro.preset || provider;
     if (!nitroCompatibility) {
-      logger.warn(`\`nuxt-og-image\` does not support the nitro target \`${nitroTarget}\`. Please make an issue. `);
+      logger.warn(`\`nuxt-og-image\` does not support the nitro preset \`${nitroTarget}\`. Please make an issue. `);
       return;
     }
     if (!nitroCompatibility.browser && config.runtimeBrowser) {
@@ -585,6 +593,8 @@ declare module 'nitropack' {
         nitroConfig.alias.bufferutil = "unenv/runtime/mock/proxy-cjs";
         nitroConfig.alias["utf-8-validate"] = "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 });
@@ -608,6 +618,11 @@ export default function() {
 export default function() {
  return png
 }
+`;
+        nitroConfig.virtual["#nuxt-og-image/inline-css"] = `import inlineCss from '${providerPath}/inline-css/${nitroCompatibility.inlineCss || "mock"}'
+export default function() {
+ return inlineCss
+}
 `;
       }
       nitroConfig.virtual["#nuxt-og-image/provider"] = `

package/dist/runtime/nitro/providers/inline-css/mock.d.ts

@@ -0,0 +1,5 @@
+declare const mockFn: {
+    (s: string): string;
+    __mock: boolean;
+};
+export default mockFn;

package/dist/runtime/nitro/providers/inline-css/mock.mjs

@@ -0,0 +1,3 @@
+const mockFn = (s) => s;
+mockFn.__mock = true;
+export default mockFn;

package/dist/runtime/nitro/providers/inline-css/node.d.ts

@@ -0,0 +1,5 @@
+declare function nodeFn(html: string, options: any): any;
+declare namespace nodeFn {
+    var __mock: boolean;
+}
+export default nodeFn;

package/dist/runtime/nitro/providers/inline-css/node.mjs

@@ -0,0 +1,11 @@
+import inlineCss from "inline-css";
+function nodeFn(html, options) {
+  return inlineCss(html, {
+    ...options,
+    applyLinkTags: false,
+    removeLinkTags: false,
+    removeStyleTags: false
+  });
+}
+nodeFn.__mock = false;
+export default nodeFn;

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

@@ -7,12 +7,14 @@ import twemoji from "twemoji";
 import { defu } from "defu";
 import { fetchOptions } from "../utils.mjs";
 import { useNitroOrigin, useRuntimeConfig } from "#imports";
+import loadInlineCSS from "#nuxt-og-image/inline-css";
 export default defineEventHandler(async (e) => {
   const { fonts, satoriOptions } = useRuntimeConfig()["nuxt-og-image"];
   const query = getQuery(e);
   const path = withBase(query.path || "/", useRuntimeConfig().app.baseURL);
   const scale = query.scale;
   const mode = query.mode || "light";
+  const nitroOrigin = useNitroOrigin(e);
   let queryOptions;
   if (query.options) {
     try {
@@ -25,7 +27,7 @@ export default defineEventHandler(async (e) => {
     options = defu(queryOptions, options);
   if (options.provider === "browser" && !options.component) {
     const pathWithoutBase = path.replace(new RegExp(`^${useRuntimeConfig().app.baseURL}`), "");
-    return sendRedirect(e, withBase(pathWithoutBase, useNitroOrigin(e)));
+    return sendRedirect(e, withBase(pathWithoutBase, nitroOrigin));
   }
   if (!options.component) {
     throw createError({
@@ -127,39 +129,39 @@ img.emoji {
 <head>${headChunk.headTags}</head>
 <body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div style="position: relative; display: flex; margin: 0 auto; width: ${options.width}px; height: ${options.height}px; overflow: hidden;">${html}</div>${headChunk.bodyTags}</body>
 </html>`;
-  let hasInlineStyles = false;
-  const stylesheets = htmlTemplate.match(/<link rel="stylesheet" href=".*?">/g);
-  if (stylesheets) {
-    for (const stylesheet of stylesheets) {
-      if (!stylesheet.includes(`${options.component}.vue`)) {
-        htmlTemplate = htmlTemplate.replace(stylesheet, "");
-      } else {
-        const href = stylesheet.match(/href="(.*?)"/)[1];
-        try {
-          let css = await (await $fetch(href, {
-            baseURL: useNitroOrigin(e)
-          })).text();
-          if (css.includes("const __vite__css =")) {
-            css = css.match(/const __vite__css = "(.*)"/)[1].replace(/\\n/g, "\n");
+  const inlineCss = loadInlineCSS();
+  if (!inlineCss.__mock) {
+    let hasInlineStyles = false;
+    const stylesheets = htmlTemplate.match(/<link rel="stylesheet" href=".*?">/g);
+    if (stylesheets) {
+      for (const stylesheet of stylesheets) {
+        if (!stylesheet.includes(`${options.component.replace("OgImageTemplate", "").replace("OgImage", "")}.vue`)) {
+          htmlTemplate = htmlTemplate.replace(stylesheet, "");
+        } else {
+          const href = stylesheet.match(/href="(.*?)"/)[1];
+          try {
+            let css = await (await $fetch(href, {
+              baseURL: nitroOrigin
+            })).text();
+            if (css.includes("const __vite__css =")) {
+              css = css.match(/const __vite__css = "(.*)"/)[1].replace(/\\n/g, "\n");
+            }
+            css = css.replace(/\/\*# sourceMappingURL=.*?\*\//g, "").replaceAll("! important", "").replaceAll("!important");
+            htmlTemplate = htmlTemplate.replace(stylesheet, `<style>${css}</style>`);
+            hasInlineStyles = true;
+          } catch {
           }
-          htmlTemplate = htmlTemplate.replace(stylesheet, `<style>${css.replace(/\/\/# sourceMappingURL=.*/, "")}</style>`);
-          hasInlineStyles = true;
-        } catch {
         }
       }
     }
-  }
-  try {
     if (hasInlineStyles) {
-      const inlineCss = await import("inline-css").then((m) => m?.default || m);
-      htmlTemplate = inlineCss(htmlTemplate, {
-        url: useNitroOrigin(e),
-        applyLinkTags: false,
-        removeLinkTags: false,
-        removeStyleTags: false
-      });
+      try {
+        htmlTemplate = await inlineCss(htmlTemplate, {
+          url: nitroOrigin
+        });
+      } catch {
+      }
     }
-  } catch {
   }
   return htmlTemplate;
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "packageManager": "pnpm@8.6.5",
   "description": "Enlightened OG Image generation for Nuxt.",
   "license": "MIT",