@vercel/og 0.8.3 → 0.8.4

package/dist/{types.d.ts → types-d38469ff.d.ts}

@@ -1,7 +1,16 @@
-/// <reference types="node" />
-import type { SatoriOptions } from 'satori';
-import type { EmojiType } from './emoji';
-import type { OutgoingHttpHeader } from 'http';
+import { SatoriOptions } from 'satori';
+import { OutgoingHttpHeader } from 'http';
+
+declare const apis: {
+    twemoji: (code: any) => string;
+    openmoji: string;
+    blobmoji: string;
+    noto: string;
+    fluent: (code: any) => string;
+    fluentFlat: (code: any) => string;
+};
+type EmojiType = keyof typeof apis;
+
 type ImageOptions = {
     /**
      * The width of the image.
@@ -39,12 +48,12 @@ type ImageOptions = {
      */
     emoji?: EmojiType;
 };
-export type ImageResponseNodeOptions = ImageOptions & {
+type ImageResponseNodeOptions = ImageOptions & {
     status?: number;
     statusText?: string;
     headers?: OutgoingHttpHeader[];
 };
-export type ImageResponseOptions = ImageOptions & ConstructorParameters<typeof Response>[1];
+type ImageResponseOptions = ImageOptions & ConstructorParameters<typeof Response>[1];
 declare module 'react' {
     interface HTMLAttributes<T> {
         /**
@@ -61,4 +70,5 @@ declare module 'react' {
         tw?: string;
     }
 }
-export {};
+
+export { ImageResponseOptions as I, ImageResponseNodeOptions as a };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/og",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "Generate Open Graph Images dynamically from HTML/CSS without a browser",
   "type": "module",
   "main": "./dist/index.node.js",
@@ -44,8 +44,7 @@
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "build": "pnpm typecheck && tsup && pnpm types && pnpm copy",
-    "types": "tsc --project tsconfig.json",
+    "build": "pnpm typecheck && tsup --dts && pnpm copy",
     "copy": "node scripts/copy-vendors.js"
   },
   "keywords": [

package/dist/emoji/index.d.ts

@@ -1,15 +0,0 @@
-/**
- * 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/dist/emoji/index.js

@@ -1,49 +0,0 @@
-/**
- * Modified version of https://unpkg.com/twemoji@13.1.0/dist/twemoji.esm.js.
- */
-/*! Copyright Twitter Inc. and other contributors. Licensed under MIT */
-const U200D = String.fromCharCode(8205);
-const UFE0Fg = /\uFE0F/g;
-export function getIconCode(char) {
-    return toCodePoint(char.indexOf(U200D) < 0 ? char.replace(UFE0Fg, '') : char);
-}
-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('-');
-}
-const apis = {
-    twemoji: (code) => 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/' + code.toLowerCase() + '.svg',
-    openmoji: 'https://cdn.jsdelivr.net/npm/@svgmoji/openmoji@2.0.0/svg/',
-    blobmoji: 'https://cdn.jsdelivr.net/npm/@svgmoji/blob@2.0.0/svg/',
-    noto: 'https://cdn.jsdelivr.net/gh/svgmoji/svgmoji/packages/svgmoji__noto/svg/',
-    fluent: (code) => 'https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/' +
-        code.toLowerCase() +
-        '_color.svg',
-    fluentFlat: (code) => 'https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/' +
-        code.toLowerCase() +
-        '_flat.svg',
-};
-export function loadEmoji(code, type) {
-    // https://github.com/svgmoji/svgmoji
-    if (!type || !apis[type]) {
-        type = 'twemoji';
-    }
-    const api = apis[type];
-    if (typeof api === 'function') {
-        return fetch(api(code));
-    }
-    return fetch(`${api}${code.toUpperCase()}.svg`);
-}

package/dist/language/index.d.ts

@@ -1,28 +0,0 @@
-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/dist/language/index.js

@@ -1,103 +0,0 @@
-export class FontDetector {
-    constructor() {
-        this.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];
-    });
-}
-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;
-        }
-    });
-}
-// @TODO: Support font style and weights, and make this option extensible rather
-// than built-in.
-// @TODO: Cover most languages with Noto Sans.
-export const 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',
-};

package/dist/og.d.ts

@@ -1 +0,0 @@
-export default function render(satori: any, resvg: typeof import('@resvg/resvg-wasm'), opts: any, defaultFonts: any, element: any): Promise<Uint8Array>;

package/dist/og.js

@@ -1,91 +0,0 @@
-import { loadEmoji, getIconCode } from './emoji';
-import { FontDetector, languageFontMap } from './language';
-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();
-}
-const detector = new FontDetector();
-const assetCache = new Map();
-const loadDynamicAsset = ({ emoji }) => {
-    const fn = async (code, text) => {
-        if (code === 'emoji') {
-            // It's an emoji, load the image.
-            return (`data:image/svg+xml;base64,` +
-                btoa(await (await loadEmoji(getIconCode(text), emoji)).text()));
-        }
-        const codes = code.split('|');
-        // Try to load from Google Fonts.
-        const names = codes
-            .map((code) => languageFontMap[code])
-            .filter(Boolean)
-            .flat();
-        if (names.length === 0)
-            return [];
-        try {
-            const textByFont = await detector.detect(text, names);
-            const fonts = Object.keys(textByFont);
-            const fontData = await Promise.all(fonts.map((font) => loadGoogleFont(font, textByFont[font])));
-            return fontData.map((data, index) => ({
-                name: `satori_${codes[index]}_fallback_${text}`,
-                data,
-                weight: 400,
-                style: 'normal',
-                lang: codes[index] === 'unknown' ? undefined : codes[index],
-            }));
-        }
-        catch (e) {
-            console.error('Failed to load dynamic font for', text, '. Error:', e);
-        }
-    };
-    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;
-    };
-};
-export default async function render(satori, resvg, opts, defaultFonts, element) {
-    const options = Object.assign({
-        width: 1200,
-        height: 630,
-        debug: false,
-    }, opts);
-    const svg = await satori(element, {
-        width: options.width,
-        height: options.height,
-        debug: options.debug,
-        fonts: options.fonts || defaultFonts,
-        loadAdditionalAsset: loadDynamicAsset({
-            emoji: options.emoji,
-        }),
-    });
-    const resvgJS = new resvg.Resvg(svg, {
-        fitTo: {
-            mode: 'width',
-            value: options.width,
-        },
-    });
-    const pngData = resvgJS.render();
-    const pngBuffer = pngData.asPng();
-    pngData.free();
-    resvgJS.free();
-    return pngBuffer;
-}

package/dist/types.js

@@ -1 +0,0 @@
-export {};