nuxt-og-image 1.4.2 → 1.4.4

package/README.md

@@ -43,7 +43,7 @@ Enlightened OG Image generation for Nuxt 3.
 - 🤖 Browser provider: Supporting painless, complex templates
 - ✨ Prerendering enabled for static images
 - 📸 Feeling lazy? Just generate screenshots with options for hiding elements, waiting for animations, and more
-- ⚙️ Works with Cloudflare Workers, Vercel Edge, Netlify, and more
+- ⚙️ Satori support in Vercel Edge and Cloudflare Workers
 
 ## Install
 
@@ -80,7 +80,9 @@ _nuxt.config.ts_
 export default defineNuxtConfig({
   // Recommended 
   runtimeConfig: {
-    siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'https://example.com',
+   public: {
+     siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'https://example.com',
+   }
   },
   // OR
   ogImage: {
@@ -475,7 +477,7 @@ The selector to take a screenshot of. This is useful if you want to exclude head
 
 ```ts
 defineOgImageScreenshot({
-  mask: '.page-content'
+  selector: '.page-content'
 })
 ```
 

package/dist/module.d.ts

@@ -43,6 +43,8 @@ interface ModuleOptions {
     forcePrerender: boolean;
     satoriProvider: boolean;
     browserProvider: boolean;
+    experimentalInlineWasm: boolean;
+    experimentalRuntimeBrowser: boolean;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 

package/dist/module.json

@@ -5,5 +5,5 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "1.4.2"
+  "version": "1.4.4"
 }

package/dist/module.mjs

@@ -186,6 +186,11 @@ function stripOgImageOptions(html) {
 const PATH = "/__nuxt_og_image__";
 const PATH_ENTRY = `${PATH}/entry`;
 const PATH_PLAYGROUND = `${PATH}/client`;
+const edgeProvidersSupported = [
+  "cloudflare",
+  "vercel-edge",
+  "netlify-edge"
+];
 const module = defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
@@ -199,7 +204,7 @@ const module = defineNuxtModule({
     return {
       // when we run `nuxi generate` we need to force prerendering
       forcePrerender: !nuxt.options.dev && nuxt.options._generate,
-      host: nuxt.options.runtimeConfig.public?.siteUrl,
+      host: process.env.NUXT_PUBLIC_SITE_URL || nuxt.options.runtimeConfig.public?.siteUrl,
       defaults: {
         component: "OgImageBasic",
         width: 1200,
@@ -208,7 +213,9 @@ const module = defineNuxtModule({
       satoriProvider: true,
       browserProvider: true,
       fonts: [],
-      satoriOptions: {}
+      satoriOptions: {},
+      experimentalInlineWasm: process.env.NITRO_PRESET === "netlify-edge" || nuxt.options.nitro.preset === "netlify-edge" || false,
+      experimentalRuntimeBrowser: false
     };
   },
   async setup(config, nuxt) {
@@ -305,7 +312,7 @@ export {}
     ];
     exposeModuleConfig("nuxt-og-image", { ...config, assetDirs });
     const nitroPreset = process.env.NITRO_PRESET || nuxt.options.nitro.preset;
-    const isWebWorkerEnv = process.env.NODE_ENV !== "development" && (provider === "stackblitz" || ["cloudflare", "vercel-edge", "netlify-edge", "lambda"].includes(nitroPreset));
+    const isWebWorkerEnv = process.env.NODE_ENV !== "development" && (provider === "stackblitz" || edgeProvidersSupported.includes(nitroPreset));
     nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
       nitroConfig.externals = defu(nitroConfig.externals || {}, {
         inline: [runtimeDir]
@@ -314,8 +321,10 @@ export {}
       nitroConfig.publicAssets.push({ dir: moduleAssetDir, maxAge: 31536e3 });
       const providerPath = `${runtimeDir}/nitro/providers`;
       if (config.browserProvider) {
-        nitroConfig.virtual["#nuxt-og-image/browser"] = `
-export default async function() {
+        nitroConfig.virtual["#nuxt-og-image/browser"] = config.experimentalRuntimeBrowser ? `export default async function() {
+ return await import('${providerPath}/browser/node').then(m => m.default)
+}
+` : `export default async function() {
  return (process.env.prerender || process.env.dev === 'true') ? await import('${providerPath}/browser/node').then(m => m.default) : () => {}
 }
 `;
@@ -337,25 +346,37 @@ export default function() {
         if (provider === 'satori')
           return ${config.satoriProvider ? `await import('${relative(nuxt.options.rootDir, resolve("./runtime/nitro/renderers/satori"))}').then(m => m.default)` : null}
         if (provider === 'browser')
-          return (process.env.prerender || process.env.dev) ? ${config.browserProvider ? `await import('${relative(nuxt.options.rootDir, resolve("./runtime/nitro/renderers/browser"))}').then(m => m.default)` : null} : null
+          ${config.experimentalRuntimeBrowser ? `return await import('${relative(nuxt.options.rootDir, resolve("./runtime/nitro/renderers/browser"))}').then(m => m.default)` : ""}
+          ${!config.experimentalRuntimeBrowser ? `return (process.env.prerender || process.env.dev) ? ${config.browserProvider ? `await import('${relative(nuxt.options.rootDir, resolve("./runtime/nitro/renderers/browser"))}').then(m => m.default)` : null} : null` : ""}
       }
       `;
     });
     nuxt.hooks.hook("nitro:init", async (nitro) => {
       let screenshotQueue = [];
       nitro.hooks.hook("compiled", async (_nitro) => {
-        if (_nitro.options.preset === "cloudflare" || _nitro.options.preset === "vercel-edge") {
+        if (edgeProvidersSupported.includes(_nitro.options.preset)) {
           await copy(resolve("./runtime/public-assets/inter-latin-ext-400-normal.woff"), resolve(_nitro.options.output.publicDir, "inter-latin-ext-400-normal.woff"));
           await copy(resolve("./runtime/public-assets/inter-latin-ext-700-normal.woff"), resolve(_nitro.options.output.publicDir, "inter-latin-ext-700-normal.woff"));
-          await copy(resolve("./runtime/public-assets/svg2png.wasm"), resolve(_nitro.options.output.serverDir, "svg2png.wasm"));
-          await copy(resolve("./runtime/public-assets/yoga.wasm"), resolve(_nitro.options.output.serverDir, "yoga.wasm"));
-          const indexFile = resolve(_nitro.options.output.serverDir, "index.mjs");
+          if (config.experimentalInlineWasm) {
+            await copy(resolve("./runtime/public-assets/svg2png.wasm"), resolve(_nitro.options.output.serverDir, "svg2png.wasm"));
+            await copy(resolve("./runtime/public-assets/yoga.wasm"), resolve(_nitro.options.output.serverDir, "yoga.wasm"));
+          }
+          const indexFile = resolve(_nitro.options.output.serverDir, _nitro.options.preset === "netlify-edge" ? "server.mjs" : "index.mjs");
           if (await pathExists(indexFile)) {
-            const indexContents = await readFile(indexFile, "utf-8");
-            await writeFile(
-              indexFile,
-              indexContents.replace('"/* NUXT_OG_IMAGE_SVG2PNG_WASM */"', 'import("./svg2png.wasm").then(m => m.default || m)').replace('"/* NUXT_OG_IMAGE_YOGA_WASM */"', 'import("./yoga.wasm").then(m => m.default || m)').replace(".cwd(),", '?.cwd || "/",')
-            );
+            const indexContents = (await readFile(indexFile, "utf-8")).replace(".cwd(),", '?.cwd || "/",');
+            if (!config.experimentalInlineWasm) {
+              await writeFile(
+                indexFile,
+                indexContents.replace('"/* NUXT_OG_IMAGE_SVG2PNG_WASM */"', 'import("./svg2png.wasm").then(m => m.default || m)').replace('"/* NUXT_OG_IMAGE_YOGA_WASM */"', 'import("./yoga.wasm").then(m => m.default || m)')
+              );
+            } else {
+              const svg2pngWasm = await readFile(resolve("./runtime/public-assets/svg2png.wasm"), "base64");
+              const yogaWasm = await readFile(resolve("./runtime/public-assets/yoga.wasm"), "base64");
+              await writeFile(
+                indexFile,
+                indexContents.replace('"/* NUXT_OG_IMAGE_SVG2PNG_WASM */"', `Buffer.from("${svg2pngWasm}", "base64")`).replace('"/* NUXT_OG_IMAGE_YOGA_WASM */"', `Buffer.from("${yogaWasm}", "base64")`)
+              );
+            }
           }
         }
       });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "packageManager": "pnpm@7.8.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",