npm - nuxt-og-image - Versions diffs - 3.0.0-beta.5 → 3.0.0-beta.51 - Mend

nuxt-og-image 3.0.0-beta.5 → 3.0.0-beta.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (138) hide show

package/dist/runtime/core/html/{fetch.mjs → devIframeTemplate.mjs} RENAMED Viewed

@@ -1,37 +1,21 @@
-import { createError } from "h3";
-import { hash } from "ohash";
 import { createHeadCore } from "@unhead/vue";
-import twemoji from "twemoji";
 import { renderSSRHead } from "@unhead/ssr";
-import { useRuntimeConfig } from "#imports";
-export async function fetchHTML(e, options) {
-  const { fonts, satoriOptions } = useRuntimeConfig()["nuxt-og-image"];
-  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, Math.random() * 100]);
-  const island = await e.$fetch(`/__nuxt_island/${options.component}_${hashId}.json`, {
-    params: {
-      props: JSON.stringify(options)
-    }
-  });
+import { useOgImageRuntimeConfig } from "../../utils.mjs";
+import { applyEmojis } from "./applyEmojis.mjs";
+import { fetchIsland } from "./fetchIsland.mjs";
+import { theme } from "#nuxt-og-image/unocss-config.mjs";
+export async function devIframeTemplate(ctx) {
+  const { options } = ctx;
+  const { fonts } = useOgImageRuntimeConfig();
+  const island = await fetchIsland(ctx);
   const head = createHeadCore();
   head.push(island.head);
   let defaultFontFamily = "sans-serif";
   const firstFont = fonts[0];
   if (firstFont)
     defaultFontFamily = firstFont.name;
+  await applyEmojis(ctx, island);
   let html = island.html;
-  try {
-    html = twemoji.parse(html, {
-      folder: "svg",
-      ext: ".svg"
-    });
-  } catch (e2) {
-  }
   const googleFonts = {};
   fonts.filter((font) => !font.path).forEach((font) => {
     if (!googleFonts[font.name])
@@ -46,21 +30,23 @@ export async function fetchHTML(e, options) {
       },
       {
         innerHTML: `body {
-    transform: scale(${options.scale || 1});
+    transform: scale(${options.props.scale || 1});
     transform-origin: top left;
     max-height: 100vh;
     position: relative;
     width: ${options.width}px;
     height: ${options.height}px;
     overflow: hidden;
-    background-color: ${options.mode === "dark" ? "#1b1b1b" : "#fff"};
+    background-color: ${options.props.colorMode === "dark" ? "#1b1b1b" : "#fff"};
+}
+div {
+  display: flex;
+  flex-direction: column;
+}
+svg[data-emoji] {
+  display: inline-block;
 }
-img.emoji {
-   height: 1em;
-   width: 1em;
-   margin: 0 .05em 0 .1em;
-   vertical-align: -0.1em;
-}`
+`
       },
       ...fonts.filter((font) => font.path).map((font) => {
         return `
@@ -80,15 +66,20 @@ img.emoji {
     ],
     script: [
       {
-        src: "https://cdn.tailwindcss.com"
+        src: "https://cdn.jsdelivr.net/npm/@unocss/runtime/preset-wind.global.js"
+      },
+      {
+        innerHTML: `
+  window.__unocss = {
+    theme: ${JSON.stringify(theme)},
+    presets: [
+      () => window.__unocss_runtime.presets.presetWind(),
+    ],
+  }
+`
       },
       {
-        innerHTML: `tailwind.config = {
-  corePlugins: {
-    preflight: false,
-  },
-  theme: ${JSON.stringify(satoriOptions?.tailwindConfig?.theme || {})}
-}`
+        src: "https://cdn.jsdelivr.net/npm/@unocss/runtime/core.global.js"
       }
     ],
     link: [
@@ -98,6 +89,7 @@ img.emoji {
         rel: "stylesheet"
       },
       // have to add each weight as their own stylesheet
+      // we should use the local font file no?
       ...Object.entries(googleFonts).map(([name, fonts2]) => {
         return {
           href: `https://fonts.googleapis.com/css2?family=${name}:wght@${fonts2.map((f) => f.weight).join(";")}&display=swap`,
@@ -108,10 +100,9 @@ img.emoji {
   });
   html = html.replaceAll(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
   const headChunk = await renderSSRHead(head);
-  const htmlTemplate = `<!DOCTYPE html>
+  return `<!DOCTYPE html>
 <html ${headChunk.htmlAttrs}>
 <head>${headChunk.headTags}</head>
 <body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div data-v-inspector-ignore="true" style="position: relative; display: flex; margin: 0 auto; width: ${options.width}px; height: ${options.height}px; overflow: hidden;">${html}</div>${headChunk.bodyTags}</body>
 </html>`;
-  return htmlTemplate;
 }

package/dist/runtime/core/html/fetchIsland.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import type { NuxtIslandResponse } from 'nuxt/dist/core/runtime/nitro/renderer';
+import type { OgImageRenderEventContext } from '../../types';
+export declare function fetchIsland({ options, e }: OgImageRenderEventContext): Promise<NuxtIslandResponse>;

package/dist/runtime/core/html/fetchIsland.mjs ADDED Viewed

@@ -0,0 +1,17 @@
+import { createError } from "h3";
+import { hash } from "ohash";
+export function fetchIsland({ options, 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 props = typeof options.props !== "undefined" ? options.props : options;
+  return e.$fetch(`/__nuxt_island/${options.component}_${hashId}.json`, {
+    params: {
+      props: JSON.stringify(props)
+    }
+  });
+}

package/dist/runtime/core/options/fetch.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import { type H3Error, type H3Event } from 'h3';
 import type { OgImageOptions } from '../../types';
-export declare function fetchPathHtmlAndExtractOptions(e: H3Event, path: string): Promise<H3Error | OgImageOptions>;
+export declare function fetchPathHtmlAndExtractOptions(e: H3Event, path: string, key: string): Promise<H3Error | OgImageOptions>;

package/dist/runtime/core/options/fetch.mjs CHANGED Viewed

@@ -1,6 +1,10 @@
 import { createError } from "h3";
+import { htmlPayloadCache } from "../cache/htmlPayload.mjs";
 import { extractAndNormaliseOgImageOptions } from "./extract.mjs";
-export async function fetchPathHtmlAndExtractOptions(e, path) {
+export async function fetchPathHtmlAndExtractOptions(e, path, key) {
+  const cachedHtmlPayload = await htmlPayloadCache.getItem(key);
+  if (cachedHtmlPayload && cachedHtmlPayload.expiresAt < Date.now())
+    return cachedHtmlPayload.value;
   let html;
   try {
     html = await e.$fetch(path);
@@ -11,10 +15,11 @@ export async function fetchPathHtmlAndExtractOptions(e, path) {
     });
   }
   const payload = extractAndNormaliseOgImageOptions(html);
-  if (!payload) {
-    return createError({
-      statusCode: 400,
-      statusMessage: `The path is missing the Nuxt OG Image payload. Did you forget to use defineOgImage()?`
+  if (payload) {
+    await htmlPayloadCache.setItem(key, {
+      // 60 minutes for prerender, 10 seconds for runtime
+      expiresAt: Date.now() + 1e3 * (import.meta.prerender ? 60 * 60 : 10),
+      value: payload
     });
   }
   return payload;

package/dist/runtime/core/renderers/chromium/index.mjs CHANGED Viewed

@@ -1,24 +1,20 @@
-import { getOgImagePath } from "../../../utilts.mjs";
-import { prerenderChromiumContext } from "../../cache/prerender.mjs";
 import { createScreenshot } from "./screenshot.mjs";
 import { createBrowser } from "#nuxt-og-image/bindings/chromium";
 const ChromiumRenderer = {
   name: "chromium",
-  supportedFormats: ["png", "jpeg"],
-  async createImage(e, options) {
-    const browser = (import.meta.prerender ? prerenderChromiumContext.browser : null) || await createBrowser();
-    if (!browser) {
+  supportedFormats: ["png", "jpeg", "jpg"],
+  async debug() {
+    return {};
+  },
+  async createImage(ctx) {
+    const browser = await createBrowser();
+    if (!browser.isConnected()) {
       return createError({
         statusCode: 400,
-        statusMessage: "Failed to create Local Chromium Browser."
+        statusMessage: "Failed to create connect to Chromium Browser."
       });
     }
-    if (import.meta.prerender)
-      prerenderChromiumContext.browser = browser;
-    return createScreenshot(e, browser, {
-      ...options,
-      path: options.component === "PageScreenshot" ? options.path : getOgImagePath(options.path, "html")
-    }).finally(async () => {
+    return await createScreenshot(ctx, browser).finally(async () => {
       await browser.close();
     });
   }

package/dist/runtime/core/renderers/chromium/screenshot.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 /// <reference types="node" />
 import type { Buffer } from 'node:buffer';
 import type { Browser } from 'playwright-core';
-import type { H3Event } from 'h3';
-import type { RendererOptions } from '../../../types';
-export declare function createScreenshot(e: H3Event, browser: Browser, options: RendererOptions): Promise<Buffer>;
+import type { OgImageRenderEventContext } from '../../../types';
+export declare function createScreenshot({ basePath, e, options, extension }: OgImageRenderEventContext, browser: Browser): Promise<Buffer>;

package/dist/runtime/core/renderers/chromium/screenshot.mjs CHANGED Viewed

@@ -1,21 +1,23 @@
-import { withQuery } from "ufo";
+import { joinURL, withQuery } from "ufo";
+import { useOgImageRuntimeConfig } from "../../../utils.mjs";
 import { useNitroOrigin } from "#imports";
-export async function createScreenshot(e, browser, options) {
+export async function createScreenshot({ basePath, e, options, extension }, browser) {
+  const { colorPreference } = useOgImageRuntimeConfig();
+  const path = options.component === "PageScreenshot" ? basePath : joinURL("/__og-image__/image", basePath, `og.html`);
   const page = await browser.newPage({
-    colorScheme: options.colorScheme,
+    colorScheme: colorPreference || "no-preference",
     baseURL: useNitroOrigin(e)
   });
   if (import.meta.prerender && !options.html) {
-    options.html = await e.$fetch(options.path);
+    options.html = await e.$fetch(path);
   }
   try {
     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);
+    if (options.html) {
+      const html = options.html;
       await page.evaluate((html2) => {
         document.open("text/html");
         document.write(html2);
@@ -23,7 +25,7 @@ export async function createScreenshot(e, browser, options) {
       }, html);
       await page.waitForLoadState("networkidle");
     } else {
-      await page.goto(withQuery(options.path, options), {
+      await page.goto(withQuery(path, options.props), {
         timeout: 1e4,
         waitUntil: "networkidle"
       });
@@ -31,16 +33,19 @@ export async function createScreenshot(e, browser, options) {
     const screenshotOptions = {
       timeout: 1e4,
       animations: "disabled",
-      type: options.extension
+      type: extension === "png" ? "png" : "jpeg"
     };
-    if (options.mask) {
+    const _options = options.screenshot || {};
+    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);
+      }, _options.mask);
     }
-    if (options.selector)
-      return await page.locator(options.selector).screenshot(screenshotOptions);
+    if (_options.selector)
+      return await page.locator(_options.selector).screenshot(screenshotOptions);
     return await page.screenshot(screenshotOptions);
   } finally {
     await page.close();

package/dist/runtime/core/renderers/satori/fonts.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
-import type { FontConfig } from '../../../types';
+import type { FontConfig, OgImageRenderEventContext } from '../../../types';
 export declare const satoriFonts: any[];
-export declare function loadFonts(baseURL: string, fonts: FontConfig[]): Promise<any>;
+export declare function loadFonts(e: OgImageRenderEventContext, fonts: FontConfig[]): Promise<any>;

package/dist/runtime/core/renderers/satori/fonts.mjs CHANGED Viewed

@@ -1,8 +1,8 @@
 import { loadFont } from "../../font/fetch.mjs";
 export const satoriFonts = [];
 let fontLoadPromise = null;
-export function loadFonts(baseURL, fonts) {
+export function loadFonts(e, fonts) {
   if (fontLoadPromise)
     return fontLoadPromise;
-  return fontLoadPromise = Promise.all(fonts.map((font) => loadFont(baseURL, font)));
+  return fontLoadPromise = Promise.all(fonts.map((font) => loadFont(e, font)));
 }

package/dist/runtime/core/renderers/satori/index.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
-import type { H3Event } from 'h3';
-import type { Renderer, RendererOptions } from '../../../types';
-export declare function createSvg(e: H3Event, options: RendererOptions): Promise<string>;
+import type { OgImageRenderEventContext, Renderer } from '../../../types';
+export declare function createSvg(event: OgImageRenderEventContext): Promise<string>;
 declare const SatoriRenderer: Renderer;
 export default SatoriRenderer;

package/dist/runtime/core/renderers/satori/index.mjs CHANGED Viewed

@@ -1,13 +1,15 @@
 import { defu } from "defu";
+import { useOgImageRuntimeConfig } from "../../../utils.mjs";
 import { createVNodes } from "./vnodes.mjs";
 import { loadFonts, satoriFonts } from "./fonts.mjs";
 import { useResvg, useSatori, useSharp } from "./instances.mjs";
-import { useRuntimeConfig } from "#imports";
-export async function createSvg(e, options) {
-  const { fonts, satoriOptions } = useRuntimeConfig()["nuxt-og-image"];
-  const vnodes = await createVNodes(e, options);
+export async function createSvg(event) {
+  const { options } = event;
+  const { fonts, satoriOptions } = useOgImageRuntimeConfig();
+  const vnodes = await createVNodes(event);
+  await event._nitro.hooks.callHook("nuxt-og-image:satori:vnodes", vnodes);
   if (!satoriFonts.length)
-    satoriFonts.push(...await loadFonts(e, fonts));
+    satoriFonts.push(...await loadFonts(event, fonts));
   const satori = await useSatori();
   return satori(vnodes, defu(options.satori, satoriOptions, {
     fonts: satoriFonts,
@@ -16,38 +18,40 @@ export async function createSvg(e, options) {
     height: options.height
   }));
 }
-async function createPng(e, options) {
-  const { resvgOptions } = useRuntimeConfig()["nuxt-og-image"];
-  const svg = await createSvg(e, options);
+async function createPng(event) {
+  const { resvgOptions } = useOgImageRuntimeConfig();
+  const svg = await createSvg(event);
   const Resvg = await useResvg();
   const resvg = new Resvg(svg, defu(
-    options.resvg,
+    event.options.resvg,
     resvgOptions
   ));
   const pngData = resvg.render();
   return pngData.asPng();
 }
-async function createJpeg(e, options) {
-  const { sharpOptions } = useRuntimeConfig()["nuxt-og-image"];
-  const png = await createPng(e, options);
+async function createJpeg(event) {
+  const { sharpOptions } = useOgImageRuntimeConfig();
+  const png = await createPng(event);
   const sharp = await useSharp();
-  return sharp(png, defu(options.sharp, sharpOptions)).jpeg(defu(options.sharp, sharpOptions)).toBuffer();
+  return sharp(png, defu(event.options.sharp, sharpOptions)).jpeg().toBuffer();
 }
 const SatoriRenderer = {
   name: "satori",
-  supportedFormats: ["svg", "png", "jpeg", "jpg", "json"],
-  async createImage(e, options) {
-    switch (options.extension) {
-      case "json":
-        return createVNodes(e, options);
-      case "svg":
-        return createSvg(e, options);
+  supportedFormats: ["png", "jpeg", "jpg", "json"],
+  async createImage(e) {
+    switch (e.extension) {
       case "png":
-        return createPng(e, options);
+        return createPng(e);
       case "jpeg":
       case "jpg":
-        return createJpeg(e, options);
+        return createJpeg(e);
     }
+  },
+  async debug(e) {
+    return {
+      vnodes: await createVNodes(e),
+      svg: await createSvg(e)
+    };
   }
 };
 export default SatoriRenderer;

package/dist/runtime/core/renderers/satori/instances.d.ts CHANGED Viewed

@@ -1,4 +1,6 @@
 import type _satori from 'satori';
+export declare function useSatoriRenderer(): Promise<import("../../../types").Renderer>;
+export declare function useChromiumRenderer(): Promise<import("../../../types").Renderer>;
 export declare function useResvg(): Promise<new (svg: string | Uint8Array, options?: import("@resvg/resvg-wasm").ResvgRenderOptions | undefined) => {
     free(): void;
     render(): {
@@ -37,3 +39,4 @@ export declare function useResvg(): Promise<new (svg: string | Uint8Array, optio
 }>;
 export declare function useSatori(): Promise<typeof _satori>;
 export declare function useSharp(): Promise<any>;
+export declare function useCssInline(): Promise<any>;

package/dist/runtime/core/renderers/satori/instances.mjs CHANGED Viewed

@@ -1,6 +1,17 @@
+const cssInlineInstance = { instance: void 0 };
 const sharpInstance = { instance: void 0 };
 const resvgInstance = { instance: void 0 };
 const satoriInstance = { instance: void 0 };
+const satoriRendererInstance = { instance: void 0 };
+const chromiumRendererInstance = { instance: void 0 };
+export async function useSatoriRenderer() {
+  satoriRendererInstance.instance = satoriRendererInstance.instance || await import("#nuxt-og-image/renderers/satori").then((m) => m.default);
+  return satoriRendererInstance.instance;
+}
+export async function useChromiumRenderer() {
+  chromiumRendererInstance.instance = chromiumRendererInstance.instance || await import("#nuxt-og-image/renderers/chromium").then((m) => m.default);
+  return chromiumRendererInstance.instance;
+}
 export async function useResvg() {
   resvgInstance.instance = resvgInstance.instance || await import("#nuxt-og-image/bindings/resvg").then((m) => m.default);
   await resvgInstance.instance.initWasmPromise;
@@ -15,3 +26,7 @@ export async function useSharp() {
   sharpInstance.instance = sharpInstance.instance || await import("#nuxt-og-image/bindings/sharp").then((m) => m.default);
   return sharpInstance.instance;
 }
+export async function useCssInline() {
+  cssInlineInstance.instance = cssInlineInstance.instance || await import("#nuxt-og-image/bindings/css-inline").then((m) => m.default);
+  return cssInlineInstance.instance;
+}

package/dist/runtime/core/renderers/satori/plugins/emojis.mjs CHANGED Viewed

@@ -1,26 +1,28 @@
 import { defineSatoriTransformer } from "../utils.mjs";
 function isEmojiFilter(node) {
-  return node.type === "img" && node.props?.class?.includes("emoji");
+  return node.type === "svg" && typeof node.props?.["data-emoji"] !== "undefined";
 }
 export default defineSatoriTransformer([
   // need to make sure parent div has flex for the emoji to render inline
   {
-    filter: (node) => node.type === "div" && Array.isArray(node.props?.children) && node.props.children.some(isEmojiFilter),
+    filter: (node) => ["div", "p"].includes(node.type) && Array.isArray(node.props?.children) && node.props.children.some(isEmojiFilter),
     transform: async (node) => {
       node.props.style = node.props.style || {};
       node.props.style.display = "flex";
       node.props.style.alignItems = "center";
-    }
-  },
-  {
-    filter: isEmojiFilter,
-    transform: async (node) => {
-      node.props.style = node.props.style || {};
-      node.props.style.height = "1em";
-      node.props.style.width = "1em";
-      node.props.style.margin = "0 .3em 0 .3em";
-      node.props.style.verticalAlign = "0.1em";
-      node.props.class = "";
+      node.props.children = node.props.children.map((child) => {
+        if (typeof child === "string") {
+          return {
+            type: "div",
+            props: {
+              children: child
+            }
+          };
+        }
+        if (child.props.class?.includes("emoji"))
+          delete child.props.class;
+        return child;
+      });
     }
   }
 ]);

package/dist/runtime/core/renderers/satori/plugins/imageSrc.mjs CHANGED Viewed

@@ -3,28 +3,41 @@ import { withBase } from "ufo";
 import sizeOf from "image-size";
 import { defineSatoriTransformer } from "../utils.mjs";
 import { toBase64Image } from "../../../env/assets.mjs";
-import { useNitroOrigin } from "#imports";
+import { useNitroOrigin, useStorage } from "#imports";
 export default defineSatoriTransformer({
   filter: (node) => node.type === "img",
-  transform: async (node, e) => {
+  transform: async (node, { e }) => {
     const src = node.props?.src;
+    const isRelative = src?.startsWith("/");
     if (src) {
       let updated = false;
       let dimensions;
-      if (!updated) {
-        let valid = true;
-        const response = await e.$fetch(src, {
+      let imageBuffer;
+      let valid = true;
+      if (import.meta.prerender || import.meta.dev) {
+        const key = `root:public${src.replace("./", ":").replace("/", ":")}`;
+        if (await useStorage().hasItem(key)) {
+          imageBuffer = await useStorage().getItemRaw(key);
+          updated = !!imageBuffer;
+        }
+      }
+      if (!import.meta.prerender && !updated) {
+        imageBuffer = await e.$fetch(src, {
           baseURL: useNitroOrigin(e),
           responseType: "arrayBuffer"
         }).catch(() => {
           valid = false;
         });
-        if (valid) {
-          node.props.src = toBase64Image(src, response);
-          const imageSize = sizeOf(Buffer.from(response));
+        valid = !!imageBuffer;
+      }
+      if (valid) {
+        node.props.src = toBase64Image(src, imageBuffer);
+        try {
+          const imageSize = sizeOf(Buffer.from(imageBuffer));
           dimensions = { width: imageSize.width, height: imageSize.height };
-          updated = true;
+        } catch (e2) {
         }
+        updated = true;
       }
       if (dimensions?.width && dimensions?.height) {
         const naturalAspectRatio = dimensions.width / dimensions.height;
@@ -37,7 +50,7 @@ export default defineSatoriTransformer({
           node.props.height = dimensions.height;
         }
       }
-      if (!updated) {
+      if (!updated && isRelative) {
         node.props.src = `${withBase(src, `${useNitroOrigin(e)}`)}?${Date.now()}`;
       }
     }

package/dist/runtime/core/renderers/satori/plugins/unocss.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ declare const _default: import("../../../../types").SatoriTransformer \| import("../../../../types").SatoriTransformer[];
2	+ export default _default;

package/dist/runtime/core/renderers/satori/plugins/unocss.mjs ADDED Viewed

@@ -0,0 +1,45 @@
+import { createGenerator } from "@unocss/core";
+import presetWind from "@unocss/preset-wind";
+import { defineSatoriTransformer } from "../utils.mjs";
+import { theme } from "#nuxt-og-image/unocss-config.mjs";
+const uno = createGenerator({ theme }, {
+  presets: [
+    presetWind()
+  ]
+});
+export default defineSatoriTransformer({
+  filter: (node) => !!node.props?.class,
+  transform: async (node) => {
+    const classes = node.props.class || "";
+    const styles = node.props.style || {};
+    const replacedClasses = /* @__PURE__ */ new Set();
+    for (const token of classes.split(" ").filter((c) => c.trim())) {
+      const parsedToken = await uno.parseToken(token);
+      if (parsedToken) {
+        const inlineStyles = parsedToken[0][2].split(";").filter((s) => !!s?.trim());
+        const vars = {};
+        inlineStyles.filter((s) => s.startsWith("--")).forEach((s) => {
+          const [key, value] = s.split(":");
+          vars[key] = value;
+        });
+        inlineStyles.filter((s) => !s.startsWith("--")).forEach((s) => {
+          const [key, value] = s.split(":");
+          const camelCasedKey = key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+          if (!styles[camelCasedKey])
+            styles[camelCasedKey] = value.replace(/var\((.*?)\)/g, (_, k) => vars[k.trim()]);
+          if (styles[camelCasedKey] && styles[camelCasedKey].includes("/")) {
+            const [rgb, opacity] = styles[camelCasedKey].split("/");
+            if (opacity.trim() === "1)")
+              styles[camelCasedKey] = rgb.replace(/(\d+) (\d+) (\d+).*/, (_, r, g, b) => `${r}, ${g}, ${b})`);
+            else
+              styles[camelCasedKey] = `${rgb.replace("rgb", "rgba").replaceAll(" ", ", ")}${opacity.trim()}`;
+          }
+        });
+        replacedClasses.add(token);
+      }
+    }
+    node.props.class = classes.split(" ").filter((c) => !replacedClasses.has(c)).join(" ");
+    node.props.tw = classes.split(" ").filter((c) => !replacedClasses.has(c)).join(" ");
+    node.props.style = styles;
+  }
+});

package/dist/runtime/core/renderers/satori/utils.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import type { H3Event } from 'h3';
-import type { SatoriTransformer, VNode } from '../../../types';
-export declare function walkSatoriTree(e: H3Event, node: VNode, plugins: (SatoriTransformer | SatoriTransformer[])[]): Promise<void>;
+import type { OgImageRenderEventContext, SatoriTransformer, VNode } from '../../../types';
+export declare function walkSatoriTree(e: OgImageRenderEventContext, node: VNode, plugins: (SatoriTransformer | SatoriTransformer[])[]): Promise<void>;
 export declare function defineSatoriTransformer(transformer: SatoriTransformer | SatoriTransformer[]): SatoriTransformer | SatoriTransformer[];

package/dist/runtime/core/renderers/satori/vnodes.d.ts CHANGED Viewed

@@ -1,3 +1,2 @@
-import type { H3Event } from 'h3';
-import type { RendererOptions, VNode } from '../../../types';
-export declare function createVNodes(e: H3Event, options: RendererOptions): Promise<VNode>;
+import type { OgImageRenderEventContext, VNode } from '../../../types';
+export declare function createVNodes(ctx: OgImageRenderEventContext): Promise<VNode>;

package/dist/runtime/core/renderers/satori/vnodes.mjs CHANGED Viewed

@@ -1,16 +1,26 @@
 import { html as convertHtmlToSatori } from "satori-html";
-import { fetchHTML } from "../../html/fetch.mjs";
+import { fetchIsland } from "../../html/fetchIsland.mjs";
+import { applyInlineCss } from "../../html/applyInlineCss.mjs";
+import { applyEmojis } from "../../html/applyEmojis.mjs";
 import { walkSatoriTree } from "./utils.mjs";
+import unocss from "./plugins/unocss.mjs";
 import emojis from "./plugins/emojis.mjs";
 import twClasses from "./plugins/twClasses.mjs";
 import imageSrc from "./plugins/imageSrc.mjs";
 import flex from "./plugins/flex.mjs";
 import encoding from "./plugins/encoding.mjs";
-export async function createVNodes(e, options) {
-  const html = options.html || await fetchHTML(e, options);
-  const body = html.match(/<body[^>]*>([\s\S]*)<\/body>/)?.[1] || html;
-  const satoriTree = convertHtmlToSatori(body);
-  await walkSatoriTree(e, satoriTree, [
+export async function createVNodes(ctx) {
+  let html = ctx.options.html;
+  if (!html) {
+    const island = await fetchIsland(ctx);
+    await applyInlineCss(ctx, island);
+    await applyEmojis(ctx, island);
+    html = island.html;
+  }
+  const template = `<div data-v-inspector-ignore="true" style="position: relative; display: flex; margin: 0 auto; width: ${ctx.options.width}px; height: ${ctx.options.height}px; overflow: hidden;">${html}</div>`;
+  const satoriTree = convertHtmlToSatori(template);
+  await walkSatoriTree(ctx, satoriTree, [
+    unocss,
     emojis,
     twClasses,
     imageSrc,