cf-workers-og 1.0.1 → 2.0.0

package/dist/html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html.js","sources":["../src/html.ts"],"sourcesContent":["/**\n * cf-workers-og (HTML entry point)\n *\n * Includes HTML string parsing support without legacy constructor behavior.\n */\n\nimport { ImageResponse as CfImageResponse } from \"@cf-wasm/og/workerd\";\nimport type { ReactNode } from \"react\";\nimport { createImageResponseClass } from \"./core/image-response\";\nimport { parseHtml } from \"./html-parser\";\n\nexport { cache } from \"@cf-wasm/og/workerd\";\n\nexport const ImageResponse = createImageResponseClass<ReactNode | string>({\n  cfImageResponse: CfImageResponse,\n  parseHtml,\n});\n\nexport { parseHtml } from \"./html-parser\";\n\nexport { GoogleFont, CustomFont, loadGoogleFont, createFontConfig } from \"./fonts\";\n\nexport type {\n  ImageResponseOptions,\n  FontConfig,\n  FontWeight,\n  FontStyle,\n  EmojiType,\n  GoogleFontOptions,\n} from \"./types\";\n"],"names":["CfImageResponse"],"mappings":";;;;;AAaO,MAAM,gBAAgB,yBAA6C;AAAA,EACxE,iBAAiBA;AAAAA,EACjB;AACF,CAAC;"}

package/dist/html.node.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cf-workers-og (Node.js HTML entry point)
+ */
+import type { ReactNode } from "react";
+export { cache } from "@cf-wasm/og/node";
+export declare const ImageResponse: import("./core/image-response").ImageResponseClass<ReactNode>;
+export { parseHtml } from "./html-parser";
+export { GoogleFont, CustomFont, loadGoogleFont, createFontConfig } from "./fonts.node";
+export type { ImageResponseOptions, FontConfig, FontWeight, FontStyle, EmojiType, GoogleFontOptions, } from "./types";

package/dist/html.node.js

@@ -0,0 +1,19 @@
+import { ImageResponse as ImageResponse$1 } from "@cf-wasm/og/node";
+import { CustomFont, GoogleFont, cache } from "@cf-wasm/og/node";
+import { c as createImageResponseClass } from "./fonts.shared-RU0Lt2Ku.js";
+import { a, l } from "./fonts.shared-RU0Lt2Ku.js";
+import { p as parseHtml } from "./html-parser-DRzlsDtB.js";
+const ImageResponse = createImageResponseClass({
+  cfImageResponse: ImageResponse$1,
+  parseHtml
+});
+export {
+  CustomFont,
+  GoogleFont,
+  ImageResponse,
+  cache,
+  a as createFontConfig,
+  l as loadGoogleFont,
+  parseHtml
+};
+//# sourceMappingURL=html.node.js.map

package/dist/html.node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html.node.js","sources":["../src/html.node.ts"],"sourcesContent":["/**\n * cf-workers-og (Node.js HTML entry point)\n */\n\nimport { ImageResponse as CfImageResponse } from \"@cf-wasm/og/node\";\nimport type { ReactNode } from \"react\";\nimport { createImageResponseClass } from \"./core/image-response\";\nimport { parseHtml } from \"./html-parser\";\n\nexport { cache } from \"@cf-wasm/og/node\";\n\nexport const ImageResponse = createImageResponseClass<ReactNode | string>({\n  cfImageResponse: CfImageResponse,\n  parseHtml,\n});\n\nexport { parseHtml } from \"./html-parser\";\n\nexport { GoogleFont, CustomFont, loadGoogleFont, createFontConfig } from \"./fonts.node\";\n\nexport type {\n  ImageResponseOptions,\n  FontConfig,\n  FontWeight,\n  FontStyle,\n  EmojiType,\n  GoogleFontOptions,\n} from \"./types\";\n"],"names":["CfImageResponse"],"mappings":";;;;;AAWO,MAAM,gBAAgB,yBAA6C;AAAA,EACxE,iBAAiBA;AAAAA,EACjB;AACF,CAAC;"}

package/dist/image-response.d.ts

@@ -1,64 +1,3 @@
 import type { ReactNode } from "react";
-import type { ImageResponseOptions } from "./types";
 export { cache } from "@cf-wasm/og/workerd";
-/**
- * Generate an OG image Response from a React element or HTML string.
- *
- * This is a wrapper around @cf-wasm/og that provides:
- * - Backwards compatibility with workers-og API
- * - HTML string parsing support
- * - Simplified options interface
- *
- * @example JSX usage (recommended):
- * ```tsx
- * import { ImageResponse, cache } from 'cf-workers-og';
- *
- * export default {
- *   async fetch(request, env, ctx) {
- *     cache.setExecutionContext(ctx);
- *
- *     return ImageResponse.create(
- *       <div style={{ display: 'flex', background: '#000' }}>
- *         <h1 style={{ color: 'white' }}>Hello World</h1>
- *       </div>,
- *       { width: 1200, height: 630 }
- *     );
- *   }
- * };
- * ```
- *
- * @example HTML string usage:
- * ```typescript
- * import { ImageResponse, parseHtml } from 'cf-workers-og';
- *
- * const html = '<div style="display: flex;"><h1>Hello</h1></div>';
- * return ImageResponse.create(parseHtml(html), options);
- * ```
- */
-export declare class ImageResponse extends Response {
-    /**
-     * Create an OG image Response (async, recommended).
-     *
-     * @param element - React element or HTML string to render
-     * @param options - Image generation options
-     * @returns Promise<Response> with the generated image
-     */
-    static create(element: ReactNode | string, options?: ImageResponseOptions): Promise<Response>;
-    /**
-     * Constructor for backwards compatibility with workers-og.
-     *
-     * Note: This returns a Promise, not an ImageResponse instance.
-     * For TypeScript, use `ImageResponse.create()` instead.
-     *
-     * @param element - React element or HTML string to render
-     * @param options - Image generation options
-     * @returns Response (via Promise trick for constructor)
-     *
-     * @example
-     * ```typescript
-     * // Works like old workers-og
-     * return new ImageResponse(element, options);
-     * ```
-     */
-    constructor(element: ReactNode | string, options?: ImageResponseOptions);
-}
+export declare const ImageResponse: import("./core/image-response").ImageResponseClass<ReactNode>;

package/dist/image-response.node.d.ts

@@ -1,64 +1,3 @@
 import type { ReactNode } from "react";
-import type { ImageResponseOptions } from "./types";
 export { cache } from "@cf-wasm/og/node";
-/**
- * Generate an OG image Response from a React element or HTML string.
- *
- * This is a wrapper around @cf-wasm/og that provides:
- * - Backwards compatibility with workers-og API
- * - HTML string parsing support
- * - Simplified options interface
- *
- * @example JSX usage (recommended):
- * ```tsx
- * import { ImageResponse, cache } from 'cf-workers-og';
- *
- * export default {
- *   async fetch(request, env, ctx) {
- *     cache.setExecutionContext(ctx);
- *
- *     return ImageResponse.create(
- *       <div style={{ display: 'flex', background: '#000' }}>
- *         <h1 style={{ color: 'white' }}>Hello World</h1>
- *       </div>,
- *       { width: 1200, height: 630 }
- *     );
- *   }
- * };
- * ```
- *
- * @example HTML string usage:
- * ```typescript
- * import { ImageResponse, parseHtml } from 'cf-workers-og';
- *
- * const html = '<div style="display: flex;"><h1>Hello</h1></div>';
- * return ImageResponse.create(parseHtml(html), options);
- * ```
- */
-export declare class ImageResponse extends Response {
-    /**
-     * Create an OG image Response (async, recommended).
-     *
-     * @param element - React element or HTML string to render
-     * @param options - Image generation options
-     * @returns Promise<Response> with the generated image
-     */
-    static create(element: ReactNode | string, options?: ImageResponseOptions): Promise<Response>;
-    /**
-     * Constructor for backwards compatibility with workers-og.
-     *
-     * Note: This returns a Promise, not an ImageResponse instance.
-     * For TypeScript, use `ImageResponse.create()` instead.
-     *
-     * @param element - React element or HTML string to render
-     * @param options - Image generation options
-     * @returns Response (via Promise trick for constructor)
-     *
-     * @example
-     * ```typescript
-     * // Works like old workers-og
-     * return new ImageResponse(element, options);
-     * ```
-     */
-    constructor(element: ReactNode | string, options?: ImageResponseOptions);
-}
+export declare const ImageResponse: import("./core/image-response").ImageResponseClass<ReactNode>;

package/dist/index.d.ts

@@ -28,6 +28,5 @@
  * @packageDocumentation
  */
 export { ImageResponse, cache } from "./image-response";
-export { parseHtml } from "./html-parser";
 export { GoogleFont, CustomFont, loadGoogleFont, createFontConfig } from "./fonts";
 export type { ImageResponseOptions, FontConfig, FontWeight, FontStyle, EmojiType, GoogleFontOptions, } from "./types";

package/dist/index.js

@@ -1,131 +1,16 @@
 import { ImageResponse as ImageResponse$1 } from "@cf-wasm/og/workerd";
 import { CustomFont, GoogleFont, cache } from "@cf-wasm/og/workerd";
-import { p as parseHtml } from "./html-parser-DRzlsDtB.js";
-class ImageResponse extends Response {
-  /**
-   * Create an OG image Response (async, recommended).
-   *
-   * @param element - React element or HTML string to render
-   * @param options - Image generation options
-   * @returns Promise<Response> with the generated image
-   */
-  static async create(element, options = {}) {
-    const reactElement = typeof element === "string" ? parseHtml(element) : element;
-    const {
-      width = 1200,
-      height = 630,
-      format = "png",
-      fonts,
-      emoji,
-      debug = false,
-      headers = {},
-      status = 200,
-      statusText
-    } = options;
-    const response = await ImageResponse$1.async(reactElement, {
-      width,
-      height,
-      format,
-      fonts: fonts ?? [],
-      emoji
-    });
-    const responseHeaders = new Headers(response.headers);
-    responseHeaders.set(
-      "Content-Type",
-      format === "svg" ? "image/svg+xml" : "image/png"
-    );
-    responseHeaders.set(
-      "Cache-Control",
-      debug ? "no-cache, no-store" : "public, immutable, no-transform, max-age=31536000"
-    );
-    for (const [key, value] of Object.entries(headers)) {
-      responseHeaders.set(key, value);
-    }
-    return new Response(response.body, {
-      headers: responseHeaders,
-      status,
-      statusText
-    });
-  }
-  /**
-   * Constructor for backwards compatibility with workers-og.
-   *
-   * Note: This returns a Promise, not an ImageResponse instance.
-   * For TypeScript, use `ImageResponse.create()` instead.
-   *
-   * @param element - React element or HTML string to render
-   * @param options - Image generation options
-   * @returns Response (via Promise trick for constructor)
-   *
-   * @example
-   * ```typescript
-   * // Works like old workers-og
-   * return new ImageResponse(element, options);
-   * ```
-   */
-  constructor(element, options = {}) {
-    super(null);
-    return ImageResponse.create(element, options);
-  }
-}
-async function loadGoogleFont(options) {
-  const { family, weight, text } = options;
-  const params = {
-    family: `${encodeURIComponent(family)}${weight ? `:wght@${weight}` : ""}`
-  };
-  if (text) {
-    params.text = text;
-  } else {
-    params.subset = "latin";
-  }
-  const cssUrl = `https://fonts.googleapis.com/css2?${Object.keys(params).map((key) => `${key}=${params[key]}`).join("&")}`;
-  const cfCache = typeof caches !== "undefined" ? caches.default : void 0;
-  let cssResponse;
-  if (cfCache) {
-    cssResponse = await cfCache.match(cssUrl);
-  }
-  if (!cssResponse) {
-    cssResponse = await fetch(cssUrl, {
-      headers: {
-        // Request TTF format (works better with Satori)
-        "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"
-      }
-    });
-    if (cfCache) {
-      const cacheResponse = new Response(cssResponse.body, cssResponse);
-      cacheResponse.headers.set("Cache-Control", "s-maxage=3600");
-      await cfCache.put(cssUrl, cacheResponse.clone());
-      cssResponse = cacheResponse;
-    }
-  }
-  const css = await cssResponse.text();
-  const fontUrlMatch = css.match(
-    /src: url\(([^)]+)\) format\(['"]?(opentype|truetype)['"]?\)/
-  );
-  if (!fontUrlMatch?.[1]) {
-    throw new Error(
-      `Could not find font URL for "${family}" (weight: ${weight ?? "default"})`
-    );
-  }
-  const fontUrl = fontUrlMatch[1];
-  const fontResponse = await fetch(fontUrl);
-  return fontResponse.arrayBuffer();
-}
-function createFontConfig(name, data, weight = 400, style = "normal") {
-  return {
-    name,
-    data,
-    weight,
-    style
-  };
-}
+import { c as createImageResponseClass } from "./fonts.shared-RU0Lt2Ku.js";
+import { a, l } from "./fonts.shared-RU0Lt2Ku.js";
+const ImageResponse = createImageResponseClass({
+  cfImageResponse: ImageResponse$1
+});
 export {
   CustomFont,
   GoogleFont,
   ImageResponse,
   cache,
-  createFontConfig,
-  loadGoogleFont,
-  parseHtml
+  a as createFontConfig,
+  l as loadGoogleFont
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -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    // 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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"}
+{"version":3,"file":"index.js","sources":["../src/image-response.ts"],"sourcesContent":["import { ImageResponse as CfImageResponse } from \"@cf-wasm/og/workerd\";\nimport type { ReactNode } from \"react\";\nimport { createImageResponseClass } from \"./core/image-response\";\n\nexport { cache } from \"@cf-wasm/og/workerd\";\n\nexport const ImageResponse = createImageResponseClass<ReactNode>({\n  cfImageResponse: CfImageResponse,\n});\n"],"names":["CfImageResponse"],"mappings":";;;;AAMO,MAAM,gBAAgB,yBAAoC;AAAA,EAC/D,iBAAiBA;AACnB,CAAC;"}

package/dist/index.node.d.ts

@@ -7,6 +7,5 @@
  * @packageDocumentation
  */
 export { ImageResponse, cache } from "./image-response.node";
-export { parseHtml } from "./html-parser";
 export { GoogleFont, CustomFont, loadGoogleFont, createFontConfig } from "./fonts.node";
 export type { ImageResponseOptions, FontConfig, FontWeight, FontStyle, EmojiType, GoogleFontOptions, } from "./types";

package/dist/index.node.js

@@ -1,131 +1,16 @@
 import { ImageResponse as ImageResponse$1 } from "@cf-wasm/og/node";
 import { CustomFont, GoogleFont, cache } from "@cf-wasm/og/node";
-import { p as parseHtml } from "./html-parser-DRzlsDtB.js";
-class ImageResponse extends Response {
-  /**
-   * Create an OG image Response (async, recommended).
-   *
-   * @param element - React element or HTML string to render
-   * @param options - Image generation options
-   * @returns Promise<Response> with the generated image
-   */
-  static async create(element, options = {}) {
-    const reactElement = typeof element === "string" ? parseHtml(element) : element;
-    const {
-      width = 1200,
-      height = 630,
-      format = "png",
-      fonts,
-      emoji,
-      debug = false,
-      headers = {},
-      status = 200,
-      statusText
-    } = options;
-    const response = await ImageResponse$1.async(reactElement, {
-      width,
-      height,
-      format,
-      fonts: fonts ?? [],
-      emoji
-    });
-    const responseHeaders = new Headers(response.headers);
-    responseHeaders.set(
-      "Content-Type",
-      format === "svg" ? "image/svg+xml" : "image/png"
-    );
-    responseHeaders.set(
-      "Cache-Control",
-      debug ? "no-cache, no-store" : "public, immutable, no-transform, max-age=31536000"
-    );
-    for (const [key, value] of Object.entries(headers)) {
-      responseHeaders.set(key, value);
-    }
-    return new Response(response.body, {
-      headers: responseHeaders,
-      status,
-      statusText
-    });
-  }
-  /**
-   * Constructor for backwards compatibility with workers-og.
-   *
-   * Note: This returns a Promise, not an ImageResponse instance.
-   * For TypeScript, use `ImageResponse.create()` instead.
-   *
-   * @param element - React element or HTML string to render
-   * @param options - Image generation options
-   * @returns Response (via Promise trick for constructor)
-   *
-   * @example
-   * ```typescript
-   * // Works like old workers-og
-   * return new ImageResponse(element, options);
-   * ```
-   */
-  constructor(element, options = {}) {
-    super(null);
-    return ImageResponse.create(element, options);
-  }
-}
-async function loadGoogleFont(options) {
-  const { family, weight, text } = options;
-  const params = {
-    family: `${encodeURIComponent(family)}${weight ? `:wght@${weight}` : ""}`
-  };
-  if (text) {
-    params.text = text;
-  } else {
-    params.subset = "latin";
-  }
-  const cssUrl = `https://fonts.googleapis.com/css2?${Object.keys(params).map((key) => `${key}=${params[key]}`).join("&")}`;
-  const cfCache = typeof caches !== "undefined" ? caches.default : void 0;
-  let cssResponse;
-  if (cfCache) {
-    cssResponse = await cfCache.match(cssUrl);
-  }
-  if (!cssResponse) {
-    cssResponse = await fetch(cssUrl, {
-      headers: {
-        // Request TTF format (works better with Satori)
-        "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"
-      }
-    });
-    if (cfCache) {
-      const cacheResponse = new Response(cssResponse.body, cssResponse);
-      cacheResponse.headers.set("Cache-Control", "s-maxage=3600");
-      await cfCache.put(cssUrl, cacheResponse.clone());
-      cssResponse = cacheResponse;
-    }
-  }
-  const css = await cssResponse.text();
-  const fontUrlMatch = css.match(
-    /src: url\(([^)]+)\) format\(['"]?(opentype|truetype)['"]?\)/
-  );
-  if (!fontUrlMatch?.[1]) {
-    throw new Error(
-      `Could not find font URL for "${family}" (weight: ${weight ?? "default"})`
-    );
-  }
-  const fontUrl = fontUrlMatch[1];
-  const fontResponse = await fetch(fontUrl);
-  return fontResponse.arrayBuffer();
-}
-function createFontConfig(name, data, weight = 400, style = "normal") {
-  return {
-    name,
-    data,
-    weight,
-    style
-  };
-}
+import { c as createImageResponseClass } from "./fonts.shared-RU0Lt2Ku.js";
+import { a, l } from "./fonts.shared-RU0Lt2Ku.js";
+const ImageResponse = createImageResponseClass({
+  cfImageResponse: ImageResponse$1
+});
 export {
   CustomFont,
   GoogleFont,
   ImageResponse,
   cache,
-  createFontConfig,
-  loadGoogleFont,
-  parseHtml
+  a as createFontConfig,
+  l as loadGoogleFont
 };
 //# sourceMappingURL=index.node.js.map

package/dist/index.node.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.node.js","sources":["../src/image-response.node.ts","../src/fonts.node.ts"],"sourcesContent":["import { ImageResponse as CfImageResponse } from \"@cf-wasm/og/node\";\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/node\";\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/node 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/node for Node.js environments\nexport { GoogleFont, CustomFont } from \"@cf-wasm/og/node\";\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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"}
+{"version":3,"file":"index.node.js","sources":["../src/image-response.node.ts"],"sourcesContent":["import { ImageResponse as CfImageResponse } from \"@cf-wasm/og/node\";\nimport type { ReactNode } from \"react\";\nimport { createImageResponseClass } from \"./core/image-response\";\n\nexport { cache } from \"@cf-wasm/og/node\";\n\nexport const ImageResponse = createImageResponseClass<ReactNode>({\n  cfImageResponse: CfImageResponse,\n});\n"],"names":["CfImageResponse"],"mappings":";;;;AAMO,MAAM,gBAAgB,yBAAoC;AAAA,EAC/D,iBAAiBA;AACnB,CAAC;"}

package/dist/types.d.ts

@@ -11,7 +11,7 @@ export type FontWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
  */
 export type FontStyle = "normal" | "italic";
 /**
- * Font configuration for custom fonts
+ * Font configuration for manually loaded fonts
  */
 export interface FontConfig {
     name: string;
@@ -19,6 +19,19 @@ export interface FontConfig {
     weight?: FontWeight;
     style?: FontStyle;
 }
+/**
+ * Font configuration with async data loading (used by GoogleFont/CustomFont classes)
+ */
+export interface AsyncFontConfig {
+    name: string;
+    data: ArrayBuffer | Promise<ArrayBuffer>;
+    weight?: FontWeight;
+    style?: FontStyle;
+}
+/**
+ * Union type for all supported font configurations
+ */
+export type FontInput = FontConfig | AsyncFontConfig;
 /**
  * Options for ImageResponse
  */
@@ -39,9 +52,10 @@ export interface ImageResponseOptions {
      */
     format?: "png" | "svg";
     /**
-     * Fonts to use for rendering text
+     * Fonts to use for rendering text.
+     * Accepts FontConfig (manual loading) or GoogleFont/CustomFont classes.
      */
-    fonts?: FontConfig[];
+    fonts?: FontInput[];
     /**
      * Emoji provider for rendering emoji
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cf-workers-og",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "type": "module",
   "description": "Generate Open Graph images on Cloudflare Workers with Vite support",
   "main": "./dist/index.js",
@@ -20,6 +20,58 @@
         "types": "./dist/index.d.ts",
         "import": "./dist/index.js"
       }
+    },
+    "./node": {
+      "types": "./dist/index.node.d.ts",
+      "import": "./dist/index.node.js"
+    },
+    "./workerd": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./html": {
+      "node": {
+        "types": "./dist/html.node.d.ts",
+        "import": "./dist/html.node.js"
+      },
+      "workerd": {
+        "types": "./dist/html.d.ts",
+        "import": "./dist/html.js"
+      },
+      "default": {
+        "types": "./dist/html.d.ts",
+        "import": "./dist/html.js"
+      }
+    },
+    "./node/html": {
+      "types": "./dist/html.node.d.ts",
+      "import": "./dist/html.node.js"
+    },
+    "./workerd/html": {
+      "types": "./dist/html.d.ts",
+      "import": "./dist/html.js"
+    },
+    "./compat": {
+      "node": {
+        "types": "./dist/compat.node.d.ts",
+        "import": "./dist/compat.node.js"
+      },
+      "workerd": {
+        "types": "./dist/compat.d.ts",
+        "import": "./dist/compat.js"
+      },
+      "default": {
+        "types": "./dist/compat.d.ts",
+        "import": "./dist/compat.js"
+      }
+    },
+    "./node/compat": {
+      "types": "./dist/compat.node.d.ts",
+      "import": "./dist/compat.node.js"
+    },
+    "./workerd/compat": {
+      "types": "./dist/compat.d.ts",
+      "import": "./dist/compat.js"
     }
   },
   "files": [