nuxt-og-image 1.1.1 → 1.2.0

package/README.md

@@ -39,6 +39,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
+- ⚙️ Edge / WASM compatible
 
 ## Install
 
@@ -94,16 +95,14 @@ For this guide, you will create your Satori OG image using the default component
 
 Within your `pages/index.vue`, use `defineOgImageStatic` or `OgImageStatic` to define your `og:image` component.
 
-Make sure you have defined some metadata for your page with `useHead` as props will be inferred from it.
+Make sure you have defined some metadata as props will be inferred from it.
 
 ```vue
 <script lang="ts" setup>
 // 1. make sure you have some meta
-useHead({
+useSeoMeta({
   title: 'Home',
-  meta: [
-    { name: 'description', content: 'My awesome home page.' },
-  ],
+  description: 'My awesome home page.',
 })
 // 2a. Use the Composition API
 defineOgImageStatic()

package/dist/module.json

@@ -5,5 +5,5 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "1.1.1"
+  "version": "1.2.0"
 }

package/dist/module.mjs

@@ -10,6 +10,7 @@ import { resolve, relative } from 'pathe';
 import { tinyws } from 'tinyws';
 import sirv from 'sirv';
 import { copy } from 'fs-extra';
+import { provider } from 'std-env';
 import { createBirpcGroup } from 'birpc';
 import { stringify, parse } from 'flatted';
 
@@ -219,7 +220,7 @@ const module = defineNuxtModule({
       return resolve(`../dist/${p}`);
     };
     nuxt.options.experimental.componentIslands = true;
-    const isEdge = (process.env.NITRO_PRESET || "").includes("edge");
+    const isEdge = provider === "stackblitz" || (process.env.NITRO_PRESET || "").includes("edge");
     addTemplate({
       filename: "nuxt-og-image.d.ts",
       getContents: () => {
@@ -295,7 +296,11 @@ export {}
       });
       nitroConfig.publicAssets = nitroConfig.publicAssets || [];
       nitroConfig.publicAssets.push({ dir: fontDir, maxAge: 31536e3 });
-      nitroConfig.virtual["#nuxt-og-image/browser"] = `export { createBrowser } from '${runtimeDir}/nitro/browsers/${isEdge ? "lambda" : "default"}'`;
+      if (isEdge && config.experimentalNitroBrowser)
+        nitroConfig.virtual["#nuxt-og-image/browser"] = `export { createBrowser } from '${runtimeDir}/nitro/browsers/${isEdge ? "lambda" : "default"}'`;
+      else
+        nitroConfig.virtual["#nuxt-og-image/browser"] = `export { createBrowser } from '${runtimeDir}/nitro/browsers/default'`;
+      nitroConfig.virtual["#nuxt-og-image/resvg"] = `import resvg from '${runtimeDir}/nitro/resvg/${isEdge ? "wasm" : "node"}'; export { resvg }`;
       nitroConfig.virtual["#nuxt-og-image/provider"] = `
       import satori from '${runtimeDir}/nitro/providers/satori'
       import browser from '${runtimeDir}/nitro/providers/browser'

package/dist/runtime/nitro/providers/satori/index.mjs

@@ -1,7 +1,6 @@
 import { html as convertHtmlToSatori } from "satori-html";
 import satori from "satori";
 import { parseURL } from "ufo";
-import { Resvg } from "@resvg/resvg-js";
 import twemoji from "twemoji";
 import { loadFont, walkSatoriTree } from "./utils.mjs";
 import imageSrc from "./plugins/imageSrc.mjs";
@@ -9,13 +8,12 @@ import twClasses from "./plugins/twClasses.mjs";
 import flex from "./plugins/flex.mjs";
 import emojis from "./plugins/emojis.mjs";
 import { fonts, satoriOptions } from "#nuxt-og-image/config";
+import { resvg } from "#nuxt-og-image/resvg";
 export default {
   name: "satori",
   createPng: async function createPng(baseUrl, options) {
     const svg = await this.createSvg(baseUrl, options);
-    const resvg = new Resvg(svg, {});
-    const pngData = resvg.render();
-    return pngData.asPng();
+    return resvg(svg, options);
   },
   createVNode: async function createVNode(baseUrl, options) {
     const url = parseURL(baseUrl);

package/dist/runtime/nitro/resvg/node.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="node" />
+import type { ResvgRenderOptions } from '@resvg/resvg-js';
+export default function (svg: string, options: ResvgRenderOptions): Promise<Buffer>;

package/dist/runtime/nitro/resvg/node.mjs

@@ -0,0 +1,6 @@
+import { Resvg } from "@resvg/resvg-js";
+export default async function(svg, options) {
+  const resvg = new Resvg(svg, options);
+  const pngData = resvg.render();
+  return pngData.asPng();
+}

package/dist/runtime/nitro/resvg/wasm.d.ts

@@ -0,0 +1,2 @@
+import type { ResvgRenderOptions } from '@resvg/resvg-wasm';
+export default function (svg: string, options: ResvgRenderOptions): Promise<false | Uint8Array>;

package/dist/runtime/nitro/resvg/wasm.mjs

@@ -0,0 +1,31 @@
+import { Resvg, initWasm } from "@resvg/resvg-wasm";
+import { resolvePath } from "mlly";
+import { dirname, join } from "pathe";
+import { $fetch } from "ofetch";
+let wasm = null;
+async function useResvgWasm() {
+  if (wasm)
+    return wasm;
+  try {
+    const path = join(
+      dirname(await resolvePath("@resvg/resvg-wasm")),
+      "index_bg.wasm"
+    );
+    const fs = await import("node:fs/promises");
+    wasm = await fs.readFile(path);
+  } catch (e) {
+    wasm = await $fetch("https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm", {
+      responseType: "arrayBuffer"
+    });
+  }
+  return wasm;
+}
+export default async function(svg, options) {
+  const resvgWasm = await useResvgWasm();
+  if (!resvgWasm)
+    return false;
+  await initWasm(resvgWasm);
+  const resvg = new Resvg(svg, options);
+  const pngData = resvg.render();
+  return pngData.asPng();
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "packageManager": "pnpm@7.8.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -28,6 +28,7 @@
   "dependencies": {
     "@nuxt/kit": "3.1.0",
     "@resvg/resvg-js": "^2.2.0",
+    "@resvg/resvg-wasm": "^2.2.0",
     "@types/fs-extra": "^11.0.1",
     "birpc": "^0.2.3",
     "chalk": "^5.2.0",
@@ -45,6 +46,7 @@
     "satori": "^0.1.1",
     "satori-html": "^0.3.2",
     "sirv": "^2.0.2",
+    "std-env": "^3.3.1",
     "tinyws": "^0.1.0",
     "twemoji": "^14.0.2",
     "ufo": "^1.0.1"