cf-workers-og 1.0.0 → 1.0.1
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.
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/image-response.ts","../src/fonts.ts"],"sourcesContent":["import { ImageResponse as CfImageResponse } from \"@cf-wasm/og/workerd\";\nimport type { ReactNode } from \"react\";\nimport { parseHtml } from \"./html-parser\";\nimport type { ImageResponseOptions } from \"./types\";\n\n// Re-export cache from @cf-wasm/og for font caching\nexport { cache } from \"@cf-wasm/og/workerd\";\n\n/**\n * Generate an OG image Response from a React element or HTML string.\n *\n * This is a wrapper around @cf-wasm/og that provides:\n * - Backwards compatibility with workers-og API\n * - HTML string parsing support\n * - Simplified options interface\n *\n * @example JSX usage (recommended):\n * ```tsx\n * import { ImageResponse, cache } from 'cf-workers-og';\n *\n * export default {\n * async fetch(request, env, ctx) {\n * cache.setExecutionContext(ctx);\n *\n * return ImageResponse.create(\n * <div style={{ display: 'flex', background: '#000' }}>\n * <h1 style={{ color: 'white' }}>Hello World</h1>\n * </div>,\n * { width: 1200, height: 630 }\n * );\n * }\n * };\n * ```\n *\n * @example HTML string usage:\n * ```typescript\n * import { ImageResponse, parseHtml } from 'cf-workers-og';\n *\n * const html = '<div style=\"display: flex;\"><h1>Hello</h1></div>';\n * return ImageResponse.create(parseHtml(html), options);\n * ```\n */\nexport class ImageResponse extends Response {\n /**\n * Create an OG image Response (async, recommended).\n *\n * @param element - React element or HTML string to render\n * @param options - Image generation options\n * @returns Promise<Response> with the generated image\n */\n static async create(\n element: ReactNode | string,\n options: ImageResponseOptions = {}\n ): Promise<Response> {\n // Parse HTML strings\n const reactElement =\n typeof element === \"string\" ? parseHtml(element) : element;\n\n const {\n width = 1200,\n height = 630,\n format = \"png\",\n fonts,\n emoji,\n debug = false,\n headers = {},\n status = 200,\n statusText,\n } = options;\n\n // Use @cf-wasm/og to generate the image\n const response = await CfImageResponse.async(reactElement, {\n width,\n height,\n format,\n fonts,\n emoji,\n });\n\n // Build response headers\n const responseHeaders = new Headers(response.headers);\n\n // Set content type\n responseHeaders.set(\n \"Content-Type\",\n format === \"svg\" ? \"image/svg+xml\" : \"image/png\"\n );\n\n // Set cache headers\n responseHeaders.set(\n \"Cache-Control\",\n debug\n ? \"no-cache, no-store\"\n : \"public, immutable, no-transform, max-age=31536000\"\n );\n\n // Apply custom headers\n for (const [key, value] of Object.entries(headers)) {\n responseHeaders.set(key, value);\n }\n\n return new Response(response.body, {\n headers: responseHeaders,\n status,\n statusText,\n });\n }\n\n /**\n * Constructor for backwards compatibility with workers-og.\n *\n * Note: This returns a Promise, not an ImageResponse instance.\n * For TypeScript, use `ImageResponse.create()` instead.\n *\n * @param element - React element or HTML string to render\n * @param options - Image generation options\n * @returns Response (via Promise trick for constructor)\n *\n * @example\n * ```typescript\n * // Works like old workers-og\n * return new ImageResponse(element, options);\n * ```\n */\n constructor(element: ReactNode | string, options: ImageResponseOptions = {}) {\n // Must call super() since we extend Response\n super(null);\n // Return a Promise from the constructor (workers-og pattern)\n // This hack allows `new ImageResponse()` to work like workers-og\n return ImageResponse.create(element, options) as unknown as ImageResponse;\n }\n}\n","import type { FontWeight, GoogleFontOptions } from \"./types\";\n\n// Re-export GoogleFont from @cf-wasm/og for the new API\nexport { GoogleFont, CustomFont } from \"@cf-wasm/og/workerd\";\n\n/**\n * Load a Google Font and return its data as an ArrayBuffer.\n *\n * This is a backwards-compatible function for users migrating from workers-og.\n * For new code, prefer using `GoogleFont` class from `@cf-wasm/og`.\n *\n * @param options - Font loading options\n * @returns Font data as ArrayBuffer\n *\n * @example\n * ```typescript\n * const fontData = await loadGoogleFont({\n * family: 'Inter',\n * weight: 700,\n * });\n *\n * return ImageResponse.create(element, {\n * fonts: [{\n * name: 'Inter',\n * data: fontData,\n * weight: 700,\n * style: 'normal',\n * }],\n * });\n * ```\n *\n * @deprecated Use `GoogleFont` class instead for better caching:\n * ```typescript\n * import { GoogleFont, cache } from 'cf-workers-og';\n * cache.setExecutionContext(ctx);\n * const fonts = [new GoogleFont('Inter', { weight: 700 })];\n * ```\n */\nexport async function loadGoogleFont(\n options: GoogleFontOptions\n): Promise<ArrayBuffer> {\n const { family, weight, text } = options;\n\n // Build Google Fonts CSS URL\n const params: Record<string, string> = {\n family: `${encodeURIComponent(family)}${weight ? `:wght@${weight}` : \"\"}`,\n };\n\n if (text) {\n params.text = text;\n } else {\n params.subset = \"latin\";\n }\n\n const cssUrl = `https://fonts.googleapis.com/css2?${Object.keys(params)\n .map((key) => `${key}=${params[key]}`)\n .join(\"&\")}`;\n\n // Try to use Cloudflare's cache\n const cfCache =\n typeof caches !== \"undefined\"\n ? (caches as unknown as { default: Cache }).default\n : undefined;\n\n let cssResponse: Response | undefined;\n\n if (cfCache) {\n cssResponse = await cfCache.match(cssUrl);\n }\n\n if (!cssResponse) {\n cssResponse = await fetch(cssUrl, {\n headers: {\n // Request TTF format (works better with Satori)\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\n if (cfCache) {\n // Clone and add cache headers\n const cacheResponse = new Response(cssResponse.body, cssResponse);\n cacheResponse.headers.set(\"Cache-Control\", \"s-maxage=3600\");\n await cfCache.put(cssUrl, cacheResponse.clone());\n cssResponse = cacheResponse;\n }\n }\n\n const css = await cssResponse.text();\n\n // Extract font URL from CSS\n const fontUrlMatch = css.match(\n /src: url\\(([^)]+)\\) format\\(['\"]?(opentype|truetype)['\"]?\\)/\n );\n\n if (!fontUrlMatch?.[1]) {\n throw new Error(\n `Could not find font URL for \"${family}\" (weight: ${weight ?? \"default\"})`\n );\n }\n\n const fontUrl = fontUrlMatch[1];\n\n // Fetch the actual font file\n const fontResponse = await fetch(fontUrl);\n return fontResponse.arrayBuffer();\n}\n\n/**\n * Create a font configuration object for ImageResponse.\n *\n * Helper function to build the font config with proper types.\n *\n * @param name - Font family name\n * @param data - Font data as ArrayBuffer\n * @param weight - Font weight (optional, defaults to 400)\n * @param style - Font style (optional, defaults to 'normal')\n */\nexport function createFontConfig(\n name: string,\n data: ArrayBuffer,\n weight: FontWeight = 400,\n style: \"normal\" | \"italic\" = \"normal\"\n) {\n return {\n name,\n data,\n weight,\n style,\n };\n}\n"],"names":["CfImageResponse"],"mappings":";;;AA0CO,MAAM,sBAAsB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ1C,aAAa,OACX,SACA,UAAgC,IACb;AAEnB,UAAM,eACJ,OAAO,YAAY,WAAW,UAAU,OAAO,IAAI;AAErD,UAAM;AAAA,MACJ,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,UAAU,CAAA;AAAA,MACV,SAAS;AAAA,MACT;AAAA,IAAA,IACE;
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/image-response.ts","../src/fonts.ts"],"sourcesContent":["import { ImageResponse as CfImageResponse } from \"@cf-wasm/og/workerd\";\nimport type { ReactNode } from \"react\";\nimport { parseHtml } from \"./html-parser\";\nimport type { ImageResponseOptions } from \"./types\";\n\n// Re-export cache from @cf-wasm/og for font caching\nexport { cache } from \"@cf-wasm/og/workerd\";\n\n/**\n * Generate an OG image Response from a React element or HTML string.\n *\n * This is a wrapper around @cf-wasm/og that provides:\n * - Backwards compatibility with workers-og API\n * - HTML string parsing support\n * - Simplified options interface\n *\n * @example JSX usage (recommended):\n * ```tsx\n * import { ImageResponse, cache } from 'cf-workers-og';\n *\n * export default {\n * async fetch(request, env, ctx) {\n * cache.setExecutionContext(ctx);\n *\n * return ImageResponse.create(\n * <div style={{ display: 'flex', background: '#000' }}>\n * <h1 style={{ color: 'white' }}>Hello World</h1>\n * </div>,\n * { width: 1200, height: 630 }\n * );\n * }\n * };\n * ```\n *\n * @example HTML string usage:\n * ```typescript\n * import { ImageResponse, parseHtml } from 'cf-workers-og';\n *\n * const html = '<div style=\"display: flex;\"><h1>Hello</h1></div>';\n * return ImageResponse.create(parseHtml(html), options);\n * ```\n */\nexport class ImageResponse extends Response {\n /**\n * Create an OG image Response (async, recommended).\n *\n * @param element - React element or HTML string to render\n * @param options - Image generation options\n * @returns Promise<Response> with the generated image\n */\n static async create(\n element: ReactNode | string,\n options: ImageResponseOptions = {}\n ): Promise<Response> {\n // Parse HTML strings\n const reactElement =\n typeof element === \"string\" ? parseHtml(element) : element;\n\n const {\n width = 1200,\n height = 630,\n format = \"png\",\n fonts,\n emoji,\n debug = false,\n headers = {},\n status = 200,\n statusText,\n } = options;\n\n // Use @cf-wasm/og to generate the image\n // Note: @cf-wasm/og requires fonts to be an array, not undefined\n const response = await CfImageResponse.async(reactElement, {\n width,\n height,\n format,\n fonts: fonts ?? [],\n emoji,\n });\n\n // Build response headers\n const responseHeaders = new Headers(response.headers);\n\n // Set content type\n responseHeaders.set(\n \"Content-Type\",\n format === \"svg\" ? \"image/svg+xml\" : \"image/png\"\n );\n\n // Set cache headers\n responseHeaders.set(\n \"Cache-Control\",\n debug\n ? \"no-cache, no-store\"\n : \"public, immutable, no-transform, max-age=31536000\"\n );\n\n // Apply custom headers\n for (const [key, value] of Object.entries(headers)) {\n responseHeaders.set(key, value);\n }\n\n return new Response(response.body, {\n headers: responseHeaders,\n status,\n statusText,\n });\n }\n\n /**\n * Constructor for backwards compatibility with workers-og.\n *\n * Note: This returns a Promise, not an ImageResponse instance.\n * For TypeScript, use `ImageResponse.create()` instead.\n *\n * @param element - React element or HTML string to render\n * @param options - Image generation options\n * @returns Response (via Promise trick for constructor)\n *\n * @example\n * ```typescript\n * // Works like old workers-og\n * return new ImageResponse(element, options);\n * ```\n */\n constructor(element: ReactNode | string, options: ImageResponseOptions = {}) {\n // Must call super() since we extend Response\n super(null);\n // Return a Promise from the constructor (workers-og pattern)\n // This hack allows `new ImageResponse()` to work like workers-og\n return ImageResponse.create(element, options) as unknown as ImageResponse;\n }\n}\n","import type { FontWeight, GoogleFontOptions } from \"./types\";\n\n// Re-export GoogleFont from @cf-wasm/og for the new API\nexport { GoogleFont, CustomFont } from \"@cf-wasm/og/workerd\";\n\n/**\n * Load a Google Font and return its data as an ArrayBuffer.\n *\n * This is a backwards-compatible function for users migrating from workers-og.\n * For new code, prefer using `GoogleFont` class from `@cf-wasm/og`.\n *\n * @param options - Font loading options\n * @returns Font data as ArrayBuffer\n *\n * @example\n * ```typescript\n * const fontData = await loadGoogleFont({\n * family: 'Inter',\n * weight: 700,\n * });\n *\n * return ImageResponse.create(element, {\n * fonts: [{\n * name: 'Inter',\n * data: fontData,\n * weight: 700,\n * style: 'normal',\n * }],\n * });\n * ```\n *\n * @deprecated Use `GoogleFont` class instead for better caching:\n * ```typescript\n * import { GoogleFont, cache } from 'cf-workers-og';\n * cache.setExecutionContext(ctx);\n * const fonts = [new GoogleFont('Inter', { weight: 700 })];\n * ```\n */\nexport async function loadGoogleFont(\n options: GoogleFontOptions\n): Promise<ArrayBuffer> {\n const { family, weight, text } = options;\n\n // Build Google Fonts CSS URL\n const params: Record<string, string> = {\n family: `${encodeURIComponent(family)}${weight ? `:wght@${weight}` : \"\"}`,\n };\n\n if (text) {\n params.text = text;\n } else {\n params.subset = \"latin\";\n }\n\n const cssUrl = `https://fonts.googleapis.com/css2?${Object.keys(params)\n .map((key) => `${key}=${params[key]}`)\n .join(\"&\")}`;\n\n // Try to use Cloudflare's cache\n const cfCache =\n typeof caches !== \"undefined\"\n ? (caches as unknown as { default: Cache }).default\n : undefined;\n\n let cssResponse: Response | undefined;\n\n if (cfCache) {\n cssResponse = await cfCache.match(cssUrl);\n }\n\n if (!cssResponse) {\n cssResponse = await fetch(cssUrl, {\n headers: {\n // Request TTF format (works better with Satori)\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\n if (cfCache) {\n // Clone and add cache headers\n const cacheResponse = new Response(cssResponse.body, cssResponse);\n cacheResponse.headers.set(\"Cache-Control\", \"s-maxage=3600\");\n await cfCache.put(cssUrl, cacheResponse.clone());\n cssResponse = cacheResponse;\n }\n }\n\n const css = await cssResponse.text();\n\n // Extract font URL from CSS\n const fontUrlMatch = css.match(\n /src: url\\(([^)]+)\\) format\\(['\"]?(opentype|truetype)['\"]?\\)/\n );\n\n if (!fontUrlMatch?.[1]) {\n throw new Error(\n `Could not find font URL for \"${family}\" (weight: ${weight ?? \"default\"})`\n );\n }\n\n const fontUrl = fontUrlMatch[1];\n\n // Fetch the actual font file\n const fontResponse = await fetch(fontUrl);\n return fontResponse.arrayBuffer();\n}\n\n/**\n * Create a font configuration object for ImageResponse.\n *\n * Helper function to build the font config with proper types.\n *\n * @param name - Font family name\n * @param data - Font data as ArrayBuffer\n * @param weight - Font weight (optional, defaults to 400)\n * @param style - Font style (optional, defaults to 'normal')\n */\nexport function createFontConfig(\n name: string,\n data: ArrayBuffer,\n weight: FontWeight = 400,\n style: \"normal\" | \"italic\" = \"normal\"\n) {\n return {\n name,\n data,\n weight,\n style,\n };\n}\n"],"names":["CfImageResponse"],"mappings":"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"}
|