nuxt-og-image 2.0.0-beta.6 → 2.0.0-beta.61

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

@@ -1,33 +1,65 @@
 import { withBase } from "ufo";
 import { renderSSRHead } from "@unhead/ssr";
 import { createHeadCore } from "@unhead/vue";
-import { defineEventHandler, getQuery, sendRedirect } from "h3";
-import { fetchOptions, renderIsland, useHostname } from "../utils.mjs";
-import { useRuntimeConfig } from "#internal/nitro";
+import { createError, defineEventHandler, getQuery, sendRedirect } from "h3";
+import { hash } from "ohash";
+import twemoji from "twemoji";
+import { fetchOptions } from "../utils.mjs";
+import { useNitroOrigin, useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
-  const { fonts, defaults } = useRuntimeConfig()["nuxt-og-image"];
-  const path = getQuery(e).path || "/";
-  const scale = getQuery(e).scale;
-  const mode = getQuery(e).mode || "light";
+  const { fonts, defaults, 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";
   let options;
-  if (getQuery(e).options)
-    options = JSON.parse(getQuery(e).options);
+  if (query.options) {
+    try {
+      options = JSON.parse(query.options);
+    } catch {
+    }
+  }
   if (!options)
     options = await fetchOptions(e, path);
-  if (options.provider === "browser" && !options.component)
-    return sendRedirect(e, withBase(path, useHostname(e)));
-  const island = await renderIsland(options);
+  if (options.provider === "browser" && !options.component) {
+    const pathWithoutBase = path.replace(new RegExp(`^${useRuntimeConfig().app.baseURL}`), "");
+    return sendRedirect(e, withBase(pathWithoutBase, useNitroOrigin(e)));
+  }
+  if (!options.component) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: `Nuxt OG Image trying to render an invalid component. Received options ${JSON.stringify(options)}`
+    });
+  }
+  const hashId = hash([options.component, options]);
+  const island = await $fetch(`/__nuxt_island/${options.component}_${hashId}`, {
+    params: {
+      props: JSON.stringify(options)
+    }
+  });
   const head = createHeadCore();
   head.push(island.head);
+  let defaultFontFamily = "sans-serif";
+  const firstFont = fonts[0];
+  if (firstFont)
+    defaultFontFamily = firstFont.name;
+  let html = island.html;
+  try {
+    html = twemoji.parse(html, {
+      folder: "svg",
+      ext: ".svg"
+    });
+  } catch (e2) {
+  }
   head.push({
     style: [
       {
         // default font is the first font family
-        innerHTML: `body { font-family: '${fonts[0].split(":")[0].replace("+", " ")}', sans-serif;  }`
+        innerHTML: `body { font-family: '${defaultFontFamily.replace("+", " ")}', sans-serif;  }`
       },
-      scale ? {
+      {
         innerHTML: `body {
-    transform: scale(${scale});
+    transform: scale(${scale || 1});
     transform-origin: top left;
     max-height: 100vh;
     position: relative;
@@ -41,9 +73,18 @@ img.emoji {
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
-}
-`
-      } : {}
+}`
+      },
+      ...fonts.filter((font) => font.path).map((font) => {
+        return `
+          @font-face {
+            font-family: '${font.name}';
+            font-style: normal;
+            font-weight: ${font.weight};
+            src: url('${font.path}') format('truetype');
+          }
+          `;
+      })
     ],
     meta: [
       {
@@ -54,12 +95,12 @@ img.emoji {
       {
         src: "https://cdn.tailwindcss.com"
       },
-      // @todo merge with users tailwind
       {
         innerHTML: `tailwind.config = {
   corePlugins: {
     preflight: false,
-  }
+  },
+  theme: ${JSON.stringify(satoriOptions?.tailwindConfig?.theme || {})}
 }`
       }
     ],
@@ -70,19 +111,53 @@ img.emoji {
         rel: "stylesheet"
       },
       // have to add each weight as their own stylesheet
-      ...fonts.map((font) => {
-        const [name, weight] = font.split(":");
+      ...fonts.filter((font) => !font.path).map((font) => {
         return {
-          href: `https://fonts.googleapis.com/css2?family=${name}:wght@${weight}&display=swap`,
+          href: `https://fonts.googleapis.com/css2?family=${font.name}:wght@${font.weight}&display=swap`,
           rel: "stylesheet"
         };
       })
     ]
   });
   const headChunk = await renderSSRHead(head);
-  return `<!DOCTYPE html>
+  let htmlTemplate = `<!DOCTYPE html>
 <html ${headChunk.htmlAttrs}>
 <head>${headChunk.headTags}</head>
-<body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div style="position: relative; display: flex; margin: 0 auto; width: 1200px; height: 630px;">${island.html}</div>${headChunk.bodyTags}</body>
+<body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div style="position: relative; display: flex; margin: 0 auto; width: 1200px; height: 630px;">${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");
+          }
+          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
+      });
+    }
+  } catch {
+  }
+  return htmlTemplate;
 });

package/dist/runtime/nitro/routes/options.d.ts

@@ -1,3 +1,3 @@
-import type { OgImageOptions } from '../../../types';
-declare const _default: import("h3").EventHandler<false | OgImageOptions>;
+import type { RuntimeOgImageOptions } from '../../../types';
+declare const _default: import("h3").EventHandler<false | RuntimeOgImageOptions>;
 export default _default;

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

@@ -1,17 +1,21 @@
-import { createError, defineEventHandler, getHeaders, getQuery } from "h3";
-import { extractOgImageOptions, useHostname } from "../utils.mjs";
-import { getRouteRules, useRuntimeConfig } from "#internal/nitro";
+import { createError, defineEventHandler, getQuery } from "h3";
+import { withoutBase } from "ufo";
+import { defu } from "defu";
+import { extractOgImageOptions } from "../utils.mjs";
+import { getRouteRules } from "#internal/nitro";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
   const query = getQuery(e);
-  const path = query.path || "/";
-  const fetchOptions = process.dev || process.env.prerender ? {
-    headers: getHeaders(e)
-  } : {
-    baseURL: useHostname(e)
-  };
-  const html = await globalThis.$fetch(path, {
-    ...fetchOptions
-  });
+  const path = withoutBase(query.path || "/", useRuntimeConfig().app.baseURL);
+  let html;
+  try {
+    html = await globalThis.$fetch(path);
+  } catch (err) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: `Failed to read the path ${path} for og-image extraction. ${err.message}.`
+    });
+  }
   const extractedPayload = extractOgImageOptions(html);
   if (!extractedPayload) {
     throw createError({
@@ -20,20 +24,19 @@ export default defineEventHandler(async (e) => {
     });
   }
   e.node.req.url = path;
+  const oldRouteRules = e.context._nitro.routeRules;
   e.context._nitro.routeRules = void 0;
   const routeRules = getRouteRules(e)?.ogImage;
+  e.context._nitro.routeRules = oldRouteRules;
   e.node.req.url = e.path;
   if (routeRules === false)
     return false;
   const { defaults } = useRuntimeConfig()["nuxt-og-image"];
-  return {
-    path,
-    ...defaults,
-    // use route rules
-    ...routeRules || {},
-    // use provided data
-    ...extractedPayload,
-    // use query data
-    ...query
-  };
+  return defu(
+    extractedPayload,
+    routeRules,
+    // runtime options
+    { path },
+    defaults
+  );
 });

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

@@ -1,9 +1,11 @@
 import { createError, defineEventHandler, getQuery, setHeader } from "h3";
 import { withBase } from "ufo";
-import { fetchOptions, useHostname } from "../utils.mjs";
+import { fetchOptions } from "../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
-  const path = getQuery(e).path || "/";
+  const query = getQuery(e);
+  const path = withBase(query.path || "/", useRuntimeConfig().app.baseURL);
   const options = await fetchOptions(e, path);
   setHeader(e, "Content-Type", "image/svg+xml");
   const provider = await useProvider(options.provider);
@@ -13,5 +15,5 @@ export default defineEventHandler(async (e) => {
       statusMessage: `Provider ${options.provider} is missing.`
     });
   }
-  return provider.createSvg(withBase(path, useHostname(e)), options);
+  return provider.createSvg(options);
 });

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

@@ -1,9 +1,11 @@
 import { createError, defineEventHandler, getQuery, setHeader } from "h3";
 import { withBase } from "ufo";
-import { fetchOptions, useHostname } from "../utils.mjs";
+import { fetchOptions } from "../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
-  const path = getQuery(e).path || "/";
+  const query = getQuery(e);
+  const path = withBase(query.path || "/", useRuntimeConfig().app.baseURL);
   const options = await fetchOptions(e, path);
   setHeader(e, "Content-Type", "application/json");
   const provider = await useProvider(options.provider);
@@ -13,5 +15,5 @@ export default defineEventHandler(async (e) => {
       statusMessage: `Provider ${options.provider} is missing.`
     });
   }
-  return provider.createVNode(withBase(path, useHostname(e)), options);
+  return provider.createVNode(options);
 });

package/dist/runtime/nitro/utils-pure.d.ts

@@ -1,2 +1,3 @@
-export declare function extractOgImageOptions(html: string): false | Record<string, any>;
-export declare function stripOgImageOptions(html: string): string;
+import type { OgImageOptions } from '../../types';
+export declare function decodeHtml(html: string): string;
+export declare function extractOgImageOptions(html: string): OgImageOptions | false;

package/dist/runtime/nitro/utils-pure.mjs

@@ -1,10 +1,12 @@
-function decodeHtmlEntities(obj) {
+export 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] = value.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(parseInt(int));
-      });
-    }
+    if (typeof value === "string")
+      obj[key] = decodeHtml(value);
   });
   return obj;
 }
@@ -28,10 +30,7 @@ export function extractOgImageOptions(html) {
       else
         options.description = html.match(/<meta name="description" content="(.*?)">/)?.[1];
     }
-    return decodeHtmlEntities(options);
+    return decodeObjectHtmlEntities(options);
   }
   return false;
 }
-export function stripOgImageOptions(html) {
-  return html.replace(/<script id="nuxt-og-image-options" type="application\/json">(.*?)<\/script>/, "");
-}

package/dist/runtime/nitro/utils.d.ts

@@ -1,17 +1,17 @@
 /// <reference types="node" />
+import { Buffer } from 'node:buffer';
 import type { H3Event } from 'h3';
-import type { OgImageOptions } from '../../types';
-export declare function wasmLoader(key: any, fallback: string, baseUrl: string): {
-    loaded(): boolean | Promise<any>;
-    load(): Promise<any>;
+import type { RuntimeOgImageOptions } from '../../types';
+export declare function wasmLoader(asyncModuleLoad: Promise<any> | Buffer | string, fallback: string): {
+    load(options: RuntimeOgImageOptions): Promise<any>;
 };
-export declare function fetchOptions(e: H3Event, path: string): Promise<OgImageOptions>;
+export declare function fetchOptions(e: H3Event, path: string): Promise<RuntimeOgImageOptions>;
 export declare function base64ToArrayBuffer(base64: string): ArrayBuffer;
-export declare function renderIsland(payload: OgImageOptions): Promise<{
-    html: string;
-    head: any;
-}>;
-export declare function useHostname(e: H3Event): any;
 export declare function readPublicAsset(file: string, encoding?: BufferEncoding): Promise<string | Buffer | undefined>;
-export declare function readPublicAssetBase64(file: string): Promise<string | undefined>;
+export declare function readPublicAssetBase64(file: string): Promise<{
+    src: string;
+    width?: number;
+    height?: number;
+} | undefined>;
+export declare function toBase64Image(fileName: string, data: string | ArrayBuffer): string;
 export * from './utils-pure';

package/dist/runtime/nitro/utils.mjs

@@ -1,77 +1,83 @@
 import { existsSync, promises as fsp } from "node:fs";
-import { getHeaders, getQuery, getRequestHeader } from "h3";
+import { Buffer } from "node:buffer";
+import { getQuery } from "h3";
 import { join } from "pathe";
-import { useRuntimeConfig } from "#internal/nitro";
-export function wasmLoader(key, fallback, baseUrl) {
+import { prefixStorage } from "unstorage";
+import sizeOf from "image-size";
+import { useNitroOrigin, useRuntimeConfig, useStorage } from "#imports";
+export function wasmLoader(asyncModuleLoad, fallback) {
   let promise;
-  let loaded = false;
+  let wasm;
   return {
-    loaded() {
-      if (loaded)
-        return true;
+    async load(options) {
       if (typeof promise !== "undefined")
         return promise;
-      return false;
-    },
-    async load() {
+      if (wasm)
+        return wasm;
       promise = promise || new Promise(async (resolve) => {
-        let wasm;
         try {
-          wasm = await key;
+          wasm = await asyncModuleLoad;
           if (typeof wasm === "string")
             wasm = void 0;
         } catch (e) {
         }
-        if (!wasm)
-          wasm = await readPublicAsset(fallback);
         if (!wasm) {
-          const url = new URL(baseUrl);
-          wasm = await (await fetch(`${url.origin}${fallback}`)).arrayBuffer();
+          wasm = await readPublicAsset(fallback, "base64");
+          if (wasm)
+            wasm = Buffer.from(wasm, "base64");
+        }
+        if (!wasm) {
+          wasm = await (await globalThis.$fetch(fallback, { baseURL: options.requestOrigin })).arrayBuffer();
+          wasm = Buffer.from(wasm);
         }
-        loaded = true;
         resolve(wasm);
       });
       return promise;
     }
   };
 }
-export function fetchOptions(e, path) {
-  const fetchOptions2 = process.dev || process.env.prerender ? {
-    headers: getHeaders(e)
-  } : {
-    baseURL: useHostname(e)
+export async function fetchOptions(e, path) {
+  const { runtimeCacheStorage } = useRuntimeConfig()["nuxt-og-image"];
+  const baseCacheKey = runtimeCacheStorage === "default" ? "/cache/og-image" : "/og-image";
+  const cache = runtimeCacheStorage || process.env.prerender ? prefixStorage(useStorage(), `${baseCacheKey}/options`) : false;
+  let key = e.node.req.url.replace("/__og_image__/og.png", "");
+  key = key === "/" || !key ? "index" : key;
+  let options;
+  if (!process.dev && cache && await cache.hasItem(key)) {
+    const cachedValue = await cache.getItem(key);
+    if (cachedValue && cachedValue.value && cachedValue.expiresAt < Date.now())
+      options = cachedValue.value;
+    else
+      await cache.removeItem(key);
+  }
+  if (!options) {
+    options = await globalThis.$fetch("/api/og-image-options", {
+      query: {
+        path
+      },
+      responseType: "json"
+    });
+    if (cache) {
+      await cache.setItem(key, {
+        value: options,
+        expiresAt: Date.now() + (options.cache ? 60 * 60 * 1e3 : 5 * 1e3)
+      });
+    }
+  }
+  return {
+    ...options,
+    // use query data
+    ...getQuery(e),
+    requestOrigin: useNitroOrigin(e)
   };
-  return globalThis.$fetch("/api/og-image-options", {
-    query: {
-      ...getQuery(e),
-      path
-    },
-    ...fetchOptions2
-  });
 }
 export function base64ToArrayBuffer(base64) {
   const buffer = Buffer.from(base64, "base64");
   return new Uint8Array(buffer).buffer;
 }
-export function renderIsland(payload) {
-  return globalThis.$fetch(`/__nuxt_island/${payload.component}`, {
-    query: { props: JSON.stringify(payload) }
-  });
-}
-export function useHostname(e) {
-  const config = useRuntimeConfig()["nuxt-og-image"];
-  if (!process.dev && config.siteUrl)
-    return config.siteUrl;
-  const host = getRequestHeader(e, "host") || process.env.NITRO_HOST || process.env.HOST || "localhost";
-  const protocol = getRequestHeader(e, "x-forwarded-proto") || "http";
-  const useHttp = process.env.NODE_ENV === "development" || host.includes("127.0.0.1") || host.includes("localhost") || protocol === "http";
-  const port = host.includes(":") ? host.split(":").pop() : process.env.NITRO_PORT || process.env.PORT;
-  const base = useRuntimeConfig().app.baseURL;
-  return `http${useHttp ? "" : "s"}://${host.includes(":") ? host.split(":")[0] : host}${port ? `:${port}` : ""}${base}`;
-}
-const r = (base, key) => {
+function r(base, key) {
   return join(base, key.replace(/:/g, "/"));
-};
+}
 export async function readPublicAsset(file, encoding) {
   const { assetDirs } = useRuntimeConfig()["nuxt-og-image"];
   for (const assetDir of assetDirs) {
@@ -83,13 +89,21 @@ export async function readPublicAsset(file, encoding) {
 export async function readPublicAssetBase64(file) {
   const base64 = await readPublicAsset(file, "base64");
   if (base64) {
-    let type = "image/jpeg";
-    const ext = file.split(".").pop();
-    if (ext === "svg")
-      type = "image/svg+xml";
-    else if (ext === "png")
-      type = "image/png";
-    return `data:${type};base64,${base64}`;
+    const dimensions = await sizeOf(Buffer.from(base64, "base64"));
+    return {
+      src: toBase64Image(file, base64),
+      ...dimensions
+    };
   }
 }
+export function toBase64Image(fileName, data) {
+  const base64 = typeof data === "string" ? data : Buffer.from(data).toString("base64");
+  let type = "image/jpeg";
+  const ext = fileName.split(".").pop();
+  if (ext === "svg")
+    type = "image/svg+xml";
+  else if (ext === "png")
+    type = "image/png";
+  return `data:${type};base64,${base64}`;
+}
 export * from "./utils-pure.mjs";

package/dist/types.d.ts

@@ -7,5 +7,11 @@ declare module '@nuxt/schema' {
   interface NuxtHooks extends ModuleHooks {}
 }
 
+declare module 'nuxt/schema' {
+  interface NuxtConfig { ['ogImage']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['ogImage']?: ModuleOptions }
+  interface NuxtHooks extends ModuleHooks {}
+}
+
 
 export { ModuleHooks, ModuleOptions, default } from './module'

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "2.0.0-beta.6",
-  "packageManager": "pnpm@7.8.0",
+  "version": "2.0.0-beta.61",
+  "packageManager": "pnpm@8.6.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
   "homepage": "https://github.com/harlan-zw/nuxt-og-image#readme",
@@ -26,45 +26,56 @@
     "dist"
   ],
   "dependencies": {
-    "@nuxt/kit": "3.3.1",
+    "@nuxt/kit": "^3.6.1",
+    "@resvg/resvg-js": "^2.4.1",
+    "@resvg/resvg-wasm": "^2.4.1",
     "@types/fs-extra": "^11.0.1",
-    "birpc": "^0.2.10",
-    "chalk": "^5.2.0",
-    "chrome-launcher": "^0.15.1",
+    "birpc": "^0.2.12",
+    "chalk": "^5.3.0",
+    "chrome-launcher": "^0.15.2",
     "defu": "^6.1.2",
     "execa": "^7.1.1",
-    "fast-glob": "^3.2.12",
+    "fast-glob": "^3.3.0",
     "flatted": "^3.2.7",
     "fs-extra": "^11.1.1",
+    "globby": "^13.2.1",
+    "image-size": "^1.0.2",
+    "inline-css": "^4.0.2",
     "launch-editor": "^2.6.0",
-    "ohash": "^1.0.0",
-    "pathe": "^1.1.0",
-    "playwright-core": "^1.31.2",
-    "radix3": "^1.0.0",
-    "satori": "0.4.4",
+    "nuxt-icon": "^0.4.2",
+    "nuxt-site-config": "^0.7.5",
+    "nuxt-site-config-kit": "^0.7.5",
+    "nypm": "^0.2.2",
+    "ofetch": "^1.1.1",
+    "ohash": "^1.1.2",
+    "pathe": "^1.1.1",
+    "playwright-core": "^1.35.1",
+    "radix3": "^1.0.1",
+    "satori": "0.10.1",
     "satori-html": "^0.3.2",
-    "sirv": "^2.0.2",
-    "std-env": "^3.3.2",
-    "svg2png-wasm": "^1.3.4",
+    "sirv": "^2.0.3",
+    "std-env": "^3.3.3",
+    "svg2png-wasm": "^1.4.0",
     "tinyws": "^0.1.0",
     "twemoji": "^14.0.2",
-    "ufo": "^1.1.1",
+    "ufo": "^1.1.2",
     "ws": "^8.13.0",
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.37.0",
-    "@nuxt/devtools-edge": "0.2.5-27992993.59d3c52",
-    "@nuxt/module-builder": "^0.2.1",
-    "@nuxt/test-utils": "3.3.1",
+    "@antfu/eslint-config": "^0.39.6",
+    "@nuxt/devtools-edge": "0.6.6-28135918.e26a136",
+    "@nuxt/module-builder": "^0.4.0",
+    "@nuxt/test-utils": "3.6.1",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
-    "@types/ws": "^8.5.4",
-    "bumpp": "^9.0.0",
-    "eslint": "8.36.0",
+    "@types/ws": "^8.5.5",
+    "bumpp": "^9.1.1",
+    "eslint": "8.44.0",
     "jest-image-snapshot": "^6.1.0",
-    "nuxt": "^3.3.1",
-    "puppeteer": "^19.7.5",
-    "vitest": "^0.29.7"
+    "nuxt": "^3.6.1",
+    "playwright": "^1.35.1",
+    "sass": "^1.63.6",
+    "vitest": "^0.32.2"
   },
   "scripts": {
     "build": "pnpm dev:prepare && pnpm build:module && pnpm build:client",
@@ -75,6 +86,6 @@
     "dev:build": "nuxi build .playground",
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare .playground",
     "release": "bumpp package.json --commit --push --tag",
-    "test": "pnpm lint"
+    "test": "vitest"
   }
 }

package/dist/client/_nuxt/IconCSS.a041aca0.js

@@ -1 +0,0 @@
-import{a as p,b as u,e as l,f as t,o as f,h as m,i as _,u as o,j as d}from"./entry.74018bda.js";const x=p({__name:"IconCSS",props:{name:{type:String,required:!0},size:{type:String,default:""}},setup(c){const s=c;u(e=>({"387181c2":o(r)}));const n=l();n?.nuxtIcon?.aliases;const i=t(()=>(n?.nuxtIcon?.aliases||{})[s.name]||s.name),r=t(()=>`url('https://api.iconify.design/${i.value.replace(":","/")}.svg')`),a=t(()=>{if(!s.size&&typeof n.nuxtIcon?.size=="boolean"&&!n.nuxtIcon?.size)return;const e=s.size||n.nuxtIcon?.size||"1em";return String(Number(e))===e?`${e}px`:e});return(e,z)=>(f(),m("span",{style:_({width:o(a),height:o(a)})},null,4))}}),g=d(x,[["__scopeId","data-v-3c47f034"]]);export{g as default};

package/dist/client/_nuxt/ImageLoader.9bf39d71.js

@@ -1 +0,0 @@
-import{a as m,r as c,m as u,w as r,f as d,s as _,o as f,h as g,i as y,j as v}from"./entry.74018bda.js";const h=m({__name:"ImageLoader",props:{src:String,aspectRatio:Number,description:String},setup(a){const s=a,n=c(),o=c(0);function i(e){const t=n.value,p=Date.now();t.src="",o.value=0,t.style.opacity="0",t.onload=()=>{t.style.opacity="1",o.value=Date.now()-p},t.src=e}u(()=>{r(()=>s.src,e=>{i(e)},{immediate:!0})});const l=d(()=>s.description.replace("%s",o.value.toString()));return r(l,e=>{_.value=e}),(e,t)=>(f(),g("img",{ref_key:"image",ref:n,class:"max-h-full border-1 border-light-500 rounded",style:y({aspectRatio:a.aspectRatio})},null,4))}}),x=v(h,[["__scopeId","data-v-23ec6856"]]);export{x as _};