@vercel/og 0.1.0 → 0.2.0-beta.0

package/dist/chunk-PXQZL5OU.js

@@ -0,0 +1,3 @@
+var h=String.fromCharCode(8205),d=/\uFE0F/g;function r(o){return m(o.indexOf(h)<0?o.replace(d,""):o)}function m(o){for(var n=[],t=0,e=0,s=0;s<o.length;)t=o.charCodeAt(s++),e?(n.push((65536+(e-55296<<10)+(t-56320)).toString(16)),e=0):55296<=t&&t<=56319?e=t:n.push(t.toString(16));return n.join("-")}var i={twemoji:o=>"https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/"+o.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:o=>"https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/"+o.toLowerCase()+"_color.svg",fluentFlat:o=>"https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/"+o.toLowerCase()+"_flat.svg"};function c(o,n){(!n||!i[n])&&(n="twemoji");let t=i[n];return fetch(typeof t=="function"?t(o):`${t}${o.toUpperCase()}.svg`)}var g={"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"};async function u(o,n){if(!o||!n)return;let t=`https://fonts.googleapis.com/css2?family=${o}&text=${encodeURIComponent(n)}`,s=(await(await fetch(t,{headers:{"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()).match(/src: url\((.+)\) format\('(opentype|truetype)'\)/);if(!s)throw new Error("Failed to load font");return fetch(s[1]).then(a=>a.arrayBuffer())}var l=new Map,p=({emoji:o})=>{let n=async(t,e)=>{if(t==="emoji")return"data:image/svg+xml;base64,"+btoa(await(await c(r(e),o)).text());g[t]||(t="unknown");try{let s=await u(g[t],e);if(s)return{name:`satori_${t}_fallback_${e}`,data:s,weight:400,style:"normal"}}catch(s){console.error("Failed to load dynamic font for",e,". Error:",s)}};return async(...t)=>{let e=JSON.stringify(t),s=l.get(e);if(s)return s;let a=await n(...t);return l.set(e,a),a}};async function j(o,n,t,e,s){let a=Object.assign({width:1200,height:630,debug:!1},t),f=await o(s,{width:a.width,height:a.height,debug:a.debug,fonts:a.fonts||e,loadAdditionalAsset:p({emoji:a.emoji})});return new n.Resvg(f,{fitTo:{mode:"width",value:a.width}}).render()}export{j as a};
+/*! Copyright Twitter Inc. and other contributors. Licensed under MIT */
+//# sourceMappingURL=chunk-PXQZL5OU.js.map

package/dist/chunk-PXQZL5OU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/emoji/index.ts","../src/og.ts"],"sourcesContent":["/**\n * Modified version of https://unpkg.com/twemoji@13.1.0/dist/twemoji.esm.js.\n */\n\n/*! Copyright Twitter Inc. and other contributors. Licensed under MIT */\n\nconst U200D = String.fromCharCode(8205)\nconst UFE0Fg = /\\uFE0F/g\n\nexport function getIconCode(char: string) {\n  return toCodePoint(char.indexOf(U200D) < 0 ? char.replace(UFE0Fg, '') : char)\n}\n\nfunction toCodePoint(unicodeSurrogates: string) {\n  var r: string[] = [],\n    c = 0,\n    p = 0,\n    i = 0\n  while (i < unicodeSurrogates.length) {\n    c = unicodeSurrogates.charCodeAt(i++)\n    if (p) {\n      r.push((65536 + ((p - 55296) << 10) + (c - 56320)).toString(16))\n      p = 0\n    } else if (55296 <= c && c <= 56319) {\n      p = c\n    } else {\n      r.push(c.toString(16))\n    }\n  }\n  return r.join('-')\n}\n\nconst apis = {\n  twemoji: (code) =>\n    'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/' + code.toLowerCase() + '.svg',\n  openmoji: 'https://cdn.jsdelivr.net/npm/@svgmoji/openmoji@2.0.0/svg/',\n  blobmoji: 'https://cdn.jsdelivr.net/npm/@svgmoji/blob@2.0.0/svg/',\n  noto: 'https://cdn.jsdelivr.net/gh/svgmoji/svgmoji/packages/svgmoji__noto/svg/',\n  fluent: (code) =>\n    'https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/' +\n    code.toLowerCase() +\n    '_color.svg',\n  fluentFlat: (code) =>\n    'https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/' +\n    code.toLowerCase() +\n    '_flat.svg',\n}\n\nexport type EmojiType = keyof typeof apis\n\nexport function loadEmoji(code: string, type?: EmojiType) {\n  // https://github.com/svgmoji/svgmoji\n  if (!type || !apis[type]) {\n    type = 'twemoji'\n  }\n  const api = apis[type]\n  if (typeof api === 'function') {\n    return fetch(api(code))\n  }\n  return fetch(`${api}${code.toUpperCase()}.svg`)\n}\n","import { loadEmoji, getIconCode, EmojiType } from './emoji'\n\n// @TODO: Support font style and weights, and make this option extensible rather\n// than built-in.\n// @TODO: Cover most languages with Noto Sans.\nconst languageFontMap = {\n  'ja-JP': 'Noto+Sans+JP',\n  'ko-KR': 'Noto+Sans+KR',\n  'zh-CN': 'Noto+Sans+SC',\n  'zh-TW': 'Noto+Sans+TC',\n  'zh-HK': 'Noto+Sans+HK',\n  'th-TH': 'Noto+Sans+Thai',\n  'bn-IN': 'Noto+Sans+Bengali',\n  'ar-AR': 'Noto+Sans+Arabic',\n  'ta-IN': 'Noto+Sans+Tamil',\n  'ml-IN': 'Noto+Sans+Malayalam',\n  'he-IL': 'Noto+Sans+Hebrew',\n  'te-IN': 'Noto+Sans+Telugu',\n  devanagari: 'Noto+Sans+Devanagari',\n  kannada: 'Noto+Sans+Kannada',\n  symbol: ['Noto+Sans+Symbols', 'Noto+Sans+Symbols+2'],\n  math: 'Noto+Sans+Math',\n  unknown: 'Noto+Sans',\n}\n\nasync function loadGoogleFont(font: string, text: string) {\n  if (!font || !text) return\n\n  const API = `https://fonts.googleapis.com/css2?family=${font}&text=${encodeURIComponent(\n    text\n  )}`\n\n  const css = await (\n    await fetch(API, {\n      headers: {\n        // Make sure it returns TTF.\n        'User-Agent':\n          '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',\n      },\n    })\n  ).text()\n\n  const resource = css.match(/src: url\\((.+)\\) format\\('(opentype|truetype)'\\)/)\n  if (!resource) throw new Error('Failed to load font')\n\n  return fetch(resource[1]).then((res) => res.arrayBuffer())\n}\n\nconst assetCache = new Map<string, any>()\nconst loadDynamicAsset = ({ emoji }: { emoji?: EmojiType }) => {\n  const fn = async (code, text) => {\n    if (code === 'emoji') {\n      // It's an emoji, load the image.\n      return (\n        `data:image/svg+xml;base64,` +\n        btoa(await (await loadEmoji(getIconCode(text), emoji)).text())\n      )\n    }\n\n    // Try to load from Google Fonts.\n    if (!languageFontMap[code]) code = 'unknown'\n\n    try {\n      const data = await loadGoogleFont(languageFontMap[code], text)\n\n      if (data) {\n        return {\n          name: `satori_${code}_fallback_${text}`,\n          data,\n          weight: 400,\n          style: 'normal',\n        }\n      }\n    } catch (e) {\n      console.error('Failed to load dynamic font for', text, '. Error:', e)\n    }\n  }\n\n  return async (...args: Parameters<typeof fn>) => {\n    const key = JSON.stringify(args)\n    const cache = assetCache.get(key)\n    if (cache) return cache\n\n    const asset = await fn(...args)\n    assetCache.set(key, asset)\n    return asset\n  }\n}\n\nexport default async function render(\n  satori,\n  resvg,\n  opts,\n  defaultFonts,\n  element\n) {\n  const options = Object.assign(\n    {\n      width: 1200,\n      height: 630,\n      debug: false,\n    },\n    opts\n  )\n\n  const svg = await satori(element, {\n    width: options.width,\n    height: options.height,\n    debug: options.debug,\n    fonts: options.fonts || defaultFonts,\n    loadAdditionalAsset: loadDynamicAsset({\n      emoji: options.emoji,\n    }),\n  })\n\n  const resvgJS = new resvg.Resvg(svg, {\n    fitTo: {\n      mode: 'width',\n      value: options.width,\n    },\n  })\n\n  return resvgJS.render()\n}\n"],"mappings":"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","names":[]}

package/dist/index.edge.d.ts

@@ -0,0 +1,5 @@
+import type { ReactElement } from 'react';
+import type { ImageResponseOptions } from './types';
+export declare class ImageResponse {
+    constructor(element: ReactElement, options?: ImageResponseOptions);
+}

package/dist/index.edge.js

@@ -0,0 +1,2 @@
+import{a as o}from"./chunk-PXQZL5OU.js";import f,{init as u}from"satori/wasm";import g from"yoga-wasm-web";import*as a from"@resvg/resvg-wasm";import w from"../vendor/resvg.simd.wasm?module";import d from"../vendor/yoga.wasm?module";var h=a.initWasm(w),v=g(d).then(t=>u(t)),y=fetch(new URL("../vendor/noto-sans-v27-latin-regular.ttf",import.meta.url)).then(t=>t.arrayBuffer()),n,i,R=((i=(n=globalThis==null?void 0:globalThis.process)==null?void 0:n.env)==null?void 0:i.NODE_ENV)==="development",r=class{constructor(m,e={}){let c=new ReadableStream({async start(s){await v,await h;let l=await y,p=await o(f,a,e,[{name:"sans serif",data:l,weight:700,style:"normal"}],m);s.enqueue(p),s.close()}});return new Response(c,{headers:{"content-type":"image/png","cache-control":R?"no-cache, no-store":"public, immutable, no-transform, max-age=31536000",...e.headers},status:e.status,statusText:e.statusText})}};export{r as ImageResponse};
+//# sourceMappingURL=index.edge.js.map

package/dist/index.edge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.edge.ts"],"sourcesContent":["import type { ReactElement } from 'react'\nimport type { ImageResponseOptions } from './types'\n\n// @ts-ignore\nimport satori, { init as initSatori } from 'satori/wasm'\nimport initYoga from 'yoga-wasm-web'\nimport * as resvg from '@resvg/resvg-wasm'\n\n// @ts-ignore\nimport resvg_wasm from '../vendor/resvg.simd.wasm?module'\n// @ts-ignore\nimport yoga_wasm from '../vendor/yoga.wasm?module'\n\nimport render from './og'\n\nconst initializedResvg = resvg.initWasm(resvg_wasm)\nconst initializedYoga = initYoga(yoga_wasm).then((yoga) => initSatori(yoga))\nconst fallbackFont = fetch(\n  new URL('../vendor/noto-sans-v27-latin-regular.ttf', import.meta.url)\n).then((res) => res.arrayBuffer())\n\nconst isDev = globalThis?.process?.env?.NODE_ENV === 'development'\n\nexport class ImageResponse {\n  constructor(element: ReactElement, options: ImageResponseOptions = {}) {\n    const result = new ReadableStream({\n      async start(controller) {\n        await initializedYoga\n        await initializedResvg\n        const fontData = await fallbackFont\n        const fonts = [\n          {\n            name: 'sans serif',\n            data: fontData,\n            weight: 700,\n            style: 'normal',\n          },\n        ]\n\n        const result = await render(satori, resvg, options, fonts, element)\n\n        controller.enqueue(result)\n        controller.close()\n      },\n    })\n\n    return new Response(result, {\n      headers: {\n        'content-type': 'image/png',\n        'cache-control': isDev\n          ? 'no-cache, no-store'\n          : 'public, immutable, no-transform, max-age=31536000',\n        ...options.headers,\n      },\n      status: options.status,\n      statusText: options.statusText,\n    })\n  }\n}\n"],"mappings":"wCAIA,sCACA,6BACA,oCAGA,gDAEA,0CAIA,GAAM,GAAmB,AAAM,WAAS,CAAU,EAC5C,EAAkB,EAAS,CAAS,EAAE,KAAK,AAAC,GAAS,EAAW,CAAI,CAAC,EACrE,EAAe,MACnB,GAAI,KAAI,4CAA6C,YAAY,GAAG,CACtE,EAAE,KAAK,AAAC,GAAQ,EAAI,YAAY,CAAC,EAnBjC,IAqBM,EAAQ,0CAAY,UAAZ,cAAqB,MAArB,cAA0B,YAAa,cAExC,EAAN,KAAoB,CACzB,YAAY,EAAuB,EAAgC,CAAC,EAAG,CACrE,GAAM,GAAS,GAAI,gBAAe,CAChC,KAAM,OAAM,EAAY,CACtB,KAAM,GACN,KAAM,GACN,GAAM,GAAW,KAAM,GAUjB,EAAS,KAAM,GAAO,EAAQ,EAAO,EAT7B,CACZ,CACE,KAAM,aACN,KAAM,EACN,OAAQ,IACR,MAAO,QACT,CACF,EAE2D,CAAO,EAElE,EAAW,QAAQ,CAAM,EACzB,EAAW,MAAM,CACnB,CACF,CAAC,EAED,MAAO,IAAI,UAAS,EAAQ,CAC1B,QAAS,CACP,eAAgB,YAChB,gBAAiB,EACb,qBACA,oDACJ,GAAG,EAAQ,OACb,EACA,OAAQ,EAAQ,OAChB,WAAY,EAAQ,UACtB,CAAC,CACH,CACF","names":[]}

package/dist/index.node.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="node" />
+import type { ReactElement } from 'react';
+import type { ImageResponseNodeOptions } from './types';
+import { Readable } from 'stream';
+export declare function unstable_createPipeableImageStream(element: ReactElement, options?: Omit<ImageResponseNodeOptions, 'status' | 'statusText' | 'headers'>): Promise<Readable>;

package/dist/index.node.js

@@ -0,0 +1,2 @@
+import{a as t}from"./chunk-PXQZL5OU.js";import{Readable as s}from"stream";import m from"satori";import*as n from"@resvg/resvg-js";import i from"fs";import{join as f}from"path";import{fileURLToPath as p}from"url";var l=i.readFileSync(f(p(import.meta.url),"../..","vendor/noto-sans-v27-latin-regular.ttf"));async function h(e,o={}){let r=await l,a=(await t(m,n,o,[{name:"sans serif",data:r,weight:700,style:"normal"}],e)).asPng();return s.from(a)}export{h as unstable_createPipeableImageStream};
+//# sourceMappingURL=index.node.js.map

package/dist/index.node.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.node.ts"],"sourcesContent":["import type { ReactElement } from 'react'\nimport type { ImageResponseNodeOptions } from './types'\n\nimport { Readable } from 'stream'\n\n// @ts-ignore\nimport satori from 'satori'\nimport * as resvg from '@resvg/resvg-js'\n\nimport fs from 'fs'\nimport { join } from 'path'\nimport { fileURLToPath } from 'url'\n\nimport render from './og'\n\nconst fallbackFont = fs.readFileSync(\n  join(\n    fileURLToPath(import.meta.url),\n    '../..',\n    'vendor/noto-sans-v27-latin-regular.ttf'\n  )\n)\n\nexport async function unstable_createPipeableImageStream(\n  element: ReactElement,\n  options: Omit<\n    ImageResponseNodeOptions,\n    'status' | 'statusText' | 'headers'\n  > = {}\n) {\n  const fontData = await fallbackFont\n  const fonts = [\n    {\n      name: 'sans serif',\n      data: fontData,\n      weight: 700,\n      style: 'normal',\n    },\n  ]\n\n  const result = (await render(satori, resvg, options, fonts, element)).asPng()\n\n  return Readable.from(result)\n}\n"],"mappings":"wCAGA,kCAGA,sBACA,kCAEA,kBACA,4BACA,oCAIA,GAAM,GAAe,EAAG,aACtB,EACE,EAAc,YAAY,GAAG,EAC7B,QACA,wCACF,CACF,EAEA,iBACE,EACA,EAGI,CAAC,EACL,CACA,GAAM,GAAW,KAAM,GAUjB,EAAU,MAAM,GAAO,EAAQ,EAAO,EAT9B,CACZ,CACE,KAAM,aACN,KAAM,EACN,OAAQ,IACR,MAAO,QACT,CACF,EAE4D,CAAO,GAAG,MAAM,EAE5E,MAAO,GAAS,KAAK,CAAM,CAC7B","names":[]}

package/dist/og.d.ts

@@ -1,44 +1 @@
-import type { ReactElement } from 'react';
-import type { SatoriOptions } from 'satori';
-import { EmojiType } from './emoji';
-export declare type ImageResponseOptions = ConstructorParameters<typeof Response>[1] & {
-    /**
-     * 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`.
-     *
-     * @link https://github.com/vercel/og#emoji
-     * @type {EmojiType}
-     * @default 'twemoji'
-     */
-    emoji?: EmojiType;
-};
-export declare class ImageResponse {
-    constructor(element: ReactElement, options?: ImageResponseOptions);
-}
+export default function render(satori: any, resvg: any, opts: any, defaultFonts: any, element: any): Promise<any>;

package/dist/types.d.ts

@@ -0,0 +1,65 @@
+/// <reference types="node" />
+import type { SatoriOptions } from 'satori';
+import type { EmojiType } from './emoji';
+import type { OutgoingHttpHeader } from 'http';
+declare 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`.
+     *
+     * @link https://github.com/vercel/og#emoji
+     * @type {EmojiType}
+     * @default 'twemoji'
+     */
+    emoji?: EmojiType;
+};
+export declare type ImageResponseNodeOptions = ImageOptions & {
+    status?: number;
+    statusText?: string;
+    headers?: OutgoingHttpHeader[];
+};
+export declare type ImageResponseOptions = ImageOptions & ConstructorParameters<typeof Response>[1];
+declare module 'react' {
+    interface HTMLAttributes<T> {
+        /**
+         * Specify styles using Tailwind CSS classes. This feature is currently experimental.
+         * If `style` prop is also specified, styles generated with `tw` prop will be overridden.
+         *
+         * Example:
+         * - `tw='w-full h-full bg-blue-200'`
+         * - `tw='text-9xl'`
+         * - `tw='text-[80px]'`
+         *
+         * @type {string}
+         */
+        tw?: string;
+    }
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/og",
-  "version": "0.1.0",
+  "version": "0.2.0-beta.0",
   "description": "Generate Open Graph Images dynamically from HTML/CSS without a browser",
   "type": "module",
   "main": "dist/index.js",
@@ -9,9 +9,16 @@
     "dist/**/*",
     "vendor/**/*"
   ],
-  "scripts": {
-    "build": "tsup src/index.ts --format esm && pnpm types",
-    "types": "tsc --project tsconfig.json"
+  "exports": {
+    ".": {
+      "edge": "./dist/index.edge.js",
+      "edge-light": "./dist/index.edge.js",
+      "browser": "./dist/index.edge.js",
+      "import": "./dist/index.node.js",
+      "node": "./dist/index.node.js",
+      "default": "./dist/index.node.js"
+    },
+    "./package.json": "./package.json"
   },
   "keywords": [
     "open graph image",
@@ -24,8 +31,9 @@
   ],
   "license": "MPL-2.0",
   "dependencies": {
+    "@resvg/resvg-js": "^2.1.0",
     "@resvg/resvg-wasm": "2.0.0-alpha.4",
-    "satori": "0.2.2",
+    "satori": "0.2.3",
     "yoga-wasm-web": "0.3.0"
   },
   "devDependencies": {
@@ -37,5 +45,9 @@
   "packageManager": "pnpm@7.24.0",
   "engines": {
     "node": ">=16"
+  },
+  "scripts": {
+    "build": "tsup src/index.edge.ts --format esm && tsup src/index.node.ts --format esm && pnpm types",
+    "types": "tsc --project tsconfig.json"
   }
-}
+}