koishi-plugin-vercel-satori-png-service 0.0.5 → 0.1.1

package/lib/Satori.d.ts

@@ -0,0 +1,5 @@
+import { Readable } from "node:stream";
+import { ReactElement } from "react";
+import { ImageOptions } from "./og";
+export declare const initSatori: () => Promise<void>;
+export declare const createNodejsStream: (element: ReactElement<any, any>, options: ImageOptions) => Promise<Readable>;

package/lib/emoji.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Modified version of https://unpkg.com/twemoji@13.1.0/dist/twemoji.esm.js.
+ */
+export declare function getIconCode(char: string): string;
+declare const apis: {
+    twemoji: (code: any) => string;
+    openmoji: string;
+    blobmoji: string;
+    noto: string;
+    fluent: (code: any) => string;
+    fluentFlat: (code: any) => string;
+};
+export type EmojiType = keyof typeof apis;
+export declare function loadEmoji(code: string, type?: EmojiType): Promise<Response>;
+export {};

package/lib/index.d.ts

@@ -1,9 +1,8 @@
 import { Context, Schema, Service } from "koishi";
 import { ReactElement } from "react";
 import { Readable } from "stream";
-import type { unstable_createNodejsStream } from "@vercel/og";
-import type { Font } from "satori";
-export type ImageOptions = Parameters<typeof unstable_createNodejsStream>[1];
+import { Font, ImageOptions } from "./og";
+export { Font, ImageOptions } from "./og";
 declare module "koishi" {
     interface Context {
         vercelSatoriPngService: VercelSatoriPngService;
@@ -12,7 +11,6 @@ declare module "koishi" {
 declare class VercelSatoriPngService extends Service {
     private _ctx;
     private _config;
-    private createNodejsStream;
     private fonts;
     constructor(ctx: Context, config: VercelSatoriPngService.Config);
     start(): Promise<void>;

package/lib/index.js

@@ -37,6 +37,285 @@ var import_koishi = require("koishi");
 var import_react = __toESM(require("react"));
 var import_sucrase = require("sucrase");
 var import_html_react_parser = __toESM(require("html-react-parser"));
+
+// src/Satori.ts
+var import_node_path = __toESM(require("node:path"));
+var import_promises = __toESM(require("node:fs/promises"));
+var import_node_module = require("node:module");
+var import_node_stream = require("node:stream");
+var resvg = __toESM(require("@resvg/resvg-wasm"));
+
+// src/emoji.ts
+var U200D = String.fromCharCode(8205);
+var UFE0Fg = /\uFE0F/g;
+function getIconCode(char) {
+  return toCodePoint(char.indexOf(U200D) < 0 ? char.replace(UFE0Fg, "") : char);
+}
+__name(getIconCode, "getIconCode");
+function toCodePoint(unicodeSurrogates) {
+  var r = [], c = 0, p = 0, i = 0;
+  while (i < unicodeSurrogates.length) {
+    c = unicodeSurrogates.charCodeAt(i++);
+    if (p) {
+      r.push((65536 + (p - 55296 << 10) + (c - 56320)).toString(16));
+      p = 0;
+    } else if (55296 <= c && c <= 56319) {
+      p = c;
+    } else {
+      r.push(c.toString(16));
+    }
+  }
+  return r.join("-");
+}
+__name(toCodePoint, "toCodePoint");
+var apis = {
+  twemoji: /* @__PURE__ */ __name((code) => "https://gcore.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/" + code.toLowerCase() + ".svg", "twemoji"),
+  openmoji: "https://gcore.jsdelivr.net/npm/@svgmoji/openmoji@2.0.0/svg/",
+  blobmoji: "https://gcore.jsdelivr.net/npm/@svgmoji/blob@2.0.0/svg/",
+  noto: "https://gcore.jsdelivr.net/gh/svgmoji/svgmoji/packages/svgmoji__noto/svg/",
+  fluent: /* @__PURE__ */ __name((code) => "https://gcore.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/" + code.toLowerCase() + "_color.svg", "fluent"),
+  fluentFlat: /* @__PURE__ */ __name((code) => "https://gcore.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/" + code.toLowerCase() + "_flat.svg", "fluentFlat")
+};
+function loadEmoji(code, type) {
+  if (!type || !apis[type]) {
+    type = "twemoji";
+  }
+  const api = apis[type];
+  if (typeof api === "function") {
+    return fetch(api(code));
+  }
+  return fetch(`${api}${code.toUpperCase()}.svg`);
+}
+__name(loadEmoji, "loadEmoji");
+
+// src/language.ts
+var FontDetector = class {
+  static {
+    __name(this, "FontDetector");
+  }
+  rangesByLang = {};
+  async detect(text, fonts) {
+    await this.load(fonts);
+    const result = {};
+    for (const segment of text) {
+      const lang = this.detectSegment(segment, fonts);
+      if (lang) {
+        result[lang] = result[lang] || "";
+        result[lang] += segment;
+      }
+    }
+    return result;
+  }
+  detectSegment(segment, fonts) {
+    for (const font of fonts) {
+      const range = this.rangesByLang[font];
+      if (range && checkSegmentInRange(segment, range)) {
+        return font;
+      }
+    }
+    return null;
+  }
+  async load(fonts) {
+    let params = "";
+    const existingLang = Object.keys(this.rangesByLang);
+    const langNeedsToLoad = fonts.filter((font) => !existingLang.includes(font));
+    if (langNeedsToLoad.length === 0) {
+      return;
+    }
+    for (const font of langNeedsToLoad) {
+      params += `family=${font}&`;
+    }
+    params += "display=swap";
+    const API = `https://fonts.googleapis.com/css2?${params}`;
+    const fontFace = await (await fetch(API, {
+      headers: {
+        // Make sure it returns TTF.
+        "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36"
+      }
+    })).text();
+    this.addDetectors(fontFace);
+  }
+  addDetectors(input) {
+    const regex = /font-family:\s*'(.+?)';.+?unicode-range:\s*(.+?);/gms;
+    const matches = input.matchAll(regex);
+    for (const [, _lang, range] of matches) {
+      const lang = _lang.replaceAll(" ", "+");
+      if (!this.rangesByLang[lang]) {
+        this.rangesByLang[lang] = [];
+      }
+      this.rangesByLang[lang].push(...convert(range));
+    }
+  }
+};
+function convert(input) {
+  return input.split(", ").map((range) => {
+    range = range.replaceAll("U+", "");
+    const [start, end] = range.split("-").map((hex) => parseInt(hex, 16));
+    if (isNaN(end)) {
+      return start;
+    }
+    return [start, end];
+  });
+}
+__name(convert, "convert");
+function checkSegmentInRange(segment, range) {
+  const codePoint = segment.codePointAt(0);
+  if (!codePoint) return false;
+  return range.some((val) => {
+    if (typeof val === "number") {
+      return codePoint === val;
+    } else {
+      const [start, end] = val;
+      return start <= codePoint && codePoint <= end;
+    }
+  });
+}
+__name(checkSegmentInRange, "checkSegmentInRange");
+var languageFontMap = {
+  "ja-JP": "Noto+Sans+JP",
+  "ko-KR": "Noto+Sans+KR",
+  "zh-CN": "Noto+Sans+SC",
+  "zh-TW": "Noto+Sans+TC",
+  "zh-HK": "Noto+Sans+HK",
+  "th-TH": "Noto+Sans+Thai",
+  "bn-IN": "Noto+Sans+Bengali",
+  "ar-AR": "Noto+Sans+Arabic",
+  "ta-IN": "Noto+Sans+Tamil",
+  "ml-IN": "Noto+Sans+Malayalam",
+  "he-IL": "Noto+Sans+Hebrew",
+  "te-IN": "Noto+Sans+Telugu",
+  devanagari: "Noto+Sans+Devanagari",
+  kannada: "Noto+Sans+Kannada",
+  symbol: ["Noto+Sans+Symbols", "Noto+Sans+Symbols+2"],
+  math: "Noto+Sans+Math",
+  unknown: "Noto+Sans"
+};
+
+// src/og.ts
+async function loadGoogleFont(font, text) {
+  if (!font || !text) return;
+  const API = `https://fonts.googleapis.com/css2?family=${font}&text=${encodeURIComponent(
+    text
+  )}`;
+  const css = await (await fetch(API, {
+    headers: {
+      // Make sure it returns TTF.
+      "User-Agent": "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1"
+    }
+  })).text();
+  const resource = css.match(
+    /src: url\((.+)\) format\('(opentype|truetype)'\)/
+  );
+  if (!resource) throw new Error("Failed to download dynamic font");
+  const res = await fetch(resource[1]);
+  if (!res.ok) {
+    throw new Error("Failed to download dynamic font. Status: " + res.status);
+  }
+  return res.arrayBuffer();
+}
+__name(loadGoogleFont, "loadGoogleFont");
+var detector = new FontDetector();
+var assetCache = /* @__PURE__ */ new Map();
+var loadDynamicAsset = /* @__PURE__ */ __name(({ emoji }) => {
+  const fn = /* @__PURE__ */ __name(async (code, text) => {
+    if (code === "emoji") {
+      return `data:image/svg+xml;base64,` + btoa(await (await loadEmoji(getIconCode(text), emoji)).text());
+    }
+    const codes = code.split("|");
+    const names = codes.map((code2) => languageFontMap[code2]).filter(Boolean).flat();
+    if (names.length === 0) return [];
+    try {
+      const textByFont = await detector.detect(text, names);
+      const fonts = Object.keys(textByFont);
+      const fontData2 = await Promise.all(
+        fonts.map((font) => loadGoogleFont(font, textByFont[font]))
+      );
+      return fontData2.map((data, index) => ({
+        name: `satori_${codes[index]}_fallback_${text}`,
+        data,
+        weight: 400,
+        style: "normal",
+        lang: codes[index] === "unknown" ? void 0 : codes[index]
+      }));
+    } catch (e) {
+      console.error("Failed to load dynamic font for", text, ". Error:", e);
+    }
+  }, "fn");
+  return async (...args) => {
+    const key = JSON.stringify(args);
+    const cache = assetCache.get(key);
+    if (cache) return cache;
+    const asset = await fn(...args);
+    assetCache.set(key, asset);
+    return asset;
+  };
+}, "loadDynamicAsset");
+async function render(satori2, resvg2, opts, defaultFonts, element) {
+  const options = Object.assign(
+    {
+      width: 1200,
+      height: 630,
+      debug: false
+    },
+    opts
+  );
+  const svg = await satori2(element, {
+    width: options.width,
+    height: options.height,
+    debug: options.debug,
+    fonts: options.fonts || defaultFonts,
+    loadAdditionalAsset: loadDynamicAsset({
+      emoji: options.emoji
+    })
+  });
+  const resvgJS = new resvg2.Resvg(svg, {
+    fitTo: {
+      mode: "width",
+      value: options.width
+    }
+  });
+  const pngData = resvgJS.render();
+  const pngBuffer = pngData.asPng();
+  pngData.free();
+  resvgJS.free();
+  return pngBuffer;
+}
+__name(render, "render");
+
+// src/Satori.ts
+var initialized = false;
+var fontData;
+var satori;
+var initSatori = /* @__PURE__ */ __name(async () => {
+  if (initialized) {
+    return;
+  }
+  satori = (await import("satori")).default;
+  const require2 = (0, import_node_module.createRequire)("file:///" + __filename);
+  const reSvgWasm = import_node_path.default.join(
+    import_node_path.default.dirname(require2.resolve("@resvg/resvg-wasm")),
+    "index_bg.wasm"
+  );
+  await resvg.initWasm(await import_promises.default.readFile(reSvgWasm));
+  fontData = await import_promises.default.readFile(
+    require2.resolve("./noto-sans-v27-latin-regular.ttf")
+  );
+  initialized = true;
+}, "initSatori");
+var createNodejsStream = /* @__PURE__ */ __name(async (element, options) => {
+  const fonts = [
+    {
+      name: "sans serif",
+      data: fontData,
+      weight: 700,
+      style: "normal"
+    }
+  ];
+  const result = await render(satori, resvg, options, fonts, element);
+  return import_node_stream.Readable.from(Buffer.from(result));
+}, "createNodejsStream");
+
+// src/index.ts
 var serviceName = "vercelSatoriPngService";
 var AsyncFunction = (async () => 0).constructor;
 var VercelSatoriPngService = class extends import_koishi.Service {
@@ -45,7 +324,6 @@ var VercelSatoriPngService = class extends import_koishi.Service {
   }
   _ctx;
   _config;
-  createNodejsStream;
   fonts = [];
   constructor(ctx, config) {
     super(ctx, serviceName);
@@ -53,7 +331,7 @@ var VercelSatoriPngService = class extends import_koishi.Service {
     this._config = config;
   }
   async start() {
-    this.createNodejsStream = (await import("@vercel/og")).unstable_createNodejsStream;
+    await initSatori();
   }
   async jsxToReactElement(jsxCode, data) {
     const hCode = (0, import_sucrase.transform)(jsxCode, {
@@ -107,14 +385,14 @@ var VercelSatoriPngService = class extends import_koishi.Service {
   }
   async jsxToPng(jsxCode, options, data) {
     const reactElement = await this.jsxToReactElement(jsxCode, data);
-    return this.createNodejsStream(reactElement, this.buildOptions(options));
+    return createNodejsStream(reactElement, this.buildOptions(options));
   }
   htmlToPng(htmlCode, options) {
     const reactElement = this.htmlToReactElement(htmlCode);
-    return this.createNodejsStream(reactElement, this.buildOptions(options));
+    return createNodejsStream(reactElement, this.buildOptions(options));
   }
   async reactElementToPng(reactElement, options) {
-    return this.createNodejsStream(reactElement, this.buildOptions(options));
+    return createNodejsStream(reactElement, this.buildOptions(options));
   }
 };
 ((VercelSatoriPngService2) => {
@@ -122,3 +400,4 @@ var VercelSatoriPngService = class extends import_koishi.Service {
   VercelSatoriPngService2.Config = import_koishi.Schema.object({});
 })(VercelSatoriPngService || (VercelSatoriPngService = {}));
 var src_default = VercelSatoriPngService;
+/*! Copyright Twitter Inc. and other contributors. Licensed under MIT */

package/lib/language.d.ts

@@ -0,0 +1,28 @@
+export declare class FontDetector {
+    private rangesByLang;
+    detect(text: string, fonts: string[]): Promise<{
+        [lang: string]: string;
+    }>;
+    private detectSegment;
+    private load;
+    private addDetectors;
+}
+export declare const languageFontMap: {
+    'ja-JP': string;
+    'ko-KR': string;
+    'zh-CN': string;
+    'zh-TW': string;
+    'zh-HK': string;
+    'th-TH': string;
+    'bn-IN': string;
+    'ar-AR': string;
+    'ta-IN': string;
+    'ml-IN': string;
+    'he-IL': string;
+    'te-IN': string;
+    devanagari: string;
+    kannada: string;
+    symbol: string[];
+    math: string;
+    unknown: string;
+};

package/lib/og.d.ts

@@ -0,0 +1,42 @@
+import { EmojiType } from "./emoji";
+import type { SatoriOptions } from "satori";
+import type { ReactElement } from "react";
+export type ImageOptions = {
+    /**
+     * The width of the image.
+     *
+     * @type {number}
+     * @default 1200
+     */
+    width?: number;
+    /**
+     * The height of the image.
+     *
+     * @type {number}
+     * @default 630
+     */
+    height?: number;
+    /**
+     * Display debug information on the image.
+     *
+     * @type {boolean}
+     * @default false
+     */
+    debug?: boolean;
+    /**
+     * A list of fonts to use.
+     *
+     * @type {{ data: ArrayBuffer; name: string; weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; style?: 'normal' | 'italic' }[]}
+     * @default Noto Sans Latin Regular.
+     */
+    fonts?: SatoriOptions["fonts"];
+    /**
+     * Using a specific Emoji style. Defaults to `twemoji`.
+     *
+     * @type {EmojiType}
+     * @default 'twemoji'
+     */
+    emoji?: EmojiType;
+};
+export type Font = ImageOptions["fonts"][number];
+export default function render(satori: any, resvg: any, opts: ImageOptions, defaultFonts: Font[], element: ReactElement): Promise<any>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "koishi-plugin-vercel-satori-png-service",
   "description": "Use Vercel Satori and Resvg.js to convert html to png",
-  "version": "0.0.5",
+  "version": "0.1.1",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "scripts": {
@@ -35,12 +35,13 @@
     "jsx to png"
   ],
   "peerDependencies": {
-    "koishi": "^4.18.5"
+    "koishi": "^4.18.8"
   },
   "dependencies": {
-    "@vercel/og": "^0.6.4",
-    "html-react-parser": "^5.2.2",
-    "react": "^19.0.0",
+    "@resvg/resvg-wasm": "^2.6.2",
+    "html-react-parser": "^5.2.5",
+    "react": "^19.2.0-canary-f9ae0a4c-20250527",
+    "satori": "^0.16.2",
     "sucrase": "^3.35.0"
   },
   "koishi": {

package/readme.md

@@ -10,8 +10,8 @@ html to ReactElement [html-react-parser](https://www.npmjs.com/package/html-reac
 
 jsx to ReactElement [sucrase](https://www.npmjs.com/package/sucrase)
 
-ReactElement to png [@vercel/og](https://www.npmjs.com/package/@vercel/og)
+ReactElement to svg [vercel/satori](https://github.com/vercel/satori#overview)
 
 [og-playground](https://og-playground.vercel.app/)
 
-[vercel/satori](https://github.com/vercel/satori#overview)
+svg to png [@resvg/resvg-wasm](https://www.npmjs.com/package/@resvg/resvg-wasm)