cf-workers-og 1.0.1 → 2.0.0

package/README.md

@@ -1,13 +1,14 @@
 # cf-workers-og
 
-Generate Open Graph images on Cloudflare Workers with Vite support.
+Generate Open Graph images on Cloudflare Workers with Node.js bindings for local Vite dev.
 
 A thin wrapper around [@cf-wasm/og](https://github.com/fineshopdesign/cf-wasm) that provides:
 
+- Designed for Workers; includes Node.js bindings for local dev
 - Works with both **Vite dev** and **Wrangler dev**
 - Uses modern, maintained WASM dependencies
-- Robust HTML string parsing (using battle-tested libraries)
-- Backwards-compatible API for workers-og users
+- Optional HTML string parsing (using battle-tested libraries)
+- Backwards-compatible entrypoint for workers-og users (via `cf-workers-og/compat`)
 - TypeScript support
 
 ## Installation
@@ -20,7 +21,7 @@ pnpm add cf-workers-og
 
 ## Quick Start
 
-### Basic Usage (JSX)
+### Basic Usage (JSX, recommended)
 
 ```tsx
 import { ImageResponse } from "cf-workers-og";
@@ -86,10 +87,11 @@ export default {
 
 ### HTML String Usage
 
-We added this to be backwards-comatible with workers-og, but prefer JSX. 
+Use HTML parsing only if you need it. For new projects, JSX is the simplest and most reliable.
+HTML parsing is available via the opt-in `cf-workers-og/html` entrypoint. For workers-og constructor compatibility, use `cf-workers-og/compat`.
 
 ```typescript
-import { ImageResponse, parseHtml } from "cf-workers-og";
+import { ImageResponse, parseHtml } from "cf-workers-og/html";
 
 export default {
   async fetch(request: Request, env: Env, ctx: ExecutionContext) {
@@ -120,29 +122,81 @@ export default defineConfig({
 });
 ```
 
+Vite dev runs in Node.js, so this package ships Node bindings that should be picked automatically. If your bundler does not respect export conditions, use explicit paths like `cf-workers-og/node`.
+
+## Which entrypoint should I use?
+
+- `cf-workers-og` (recommended): JSX input only, clean API for new users.
+- `cf-workers-og/html`: adds `parseHtml` and accepts HTML strings in `ImageResponse.create`.
+- `cf-workers-og/compat`: legacy constructor behavior and HTML strings for migrating from workers-og.
+- If your bundler ignores export conditions, use explicit paths like `cf-workers-og/node`, `cf-workers-og/workerd`, and their `/html` or `/compat` variants.
+
 ## Why Not workers-og?
 
-The original [workers-og](https://github.com/syedashar1/workers-og) library has several issues:
+The original [workers-og](https://github.com/syedashar1/workers-og) has fundamental issues that make it unsuitable for production use.
+
+### 1. Outdated WASM Dependencies
+
+workers-og uses `yoga-wasm-web@0.3.3` which has been **unmaintained since 2023**. The Yoga project moved to Yoga 3.0 with a `SINGLE_FILE=1` compilation that inlines WASM as base64 - incompatible with Cloudflare Workers' module-based WASM loading. Satori itself now uses an internal patched version instead of `yoga-wasm-web`, fragmenting the ecosystem.
+
+### 2. Brittle HTML Parsing
+
+The HTML parser builds JSON via string concatenation:
+
+```typescript
+// workers-og approach - error-prone
+vdomStr += `{"type":"${element.tagName}", "props":{${attrs}"children": [`;
+```
+
+The code comments even acknowledge: *"very error prone. So it might need more hardening"*. The `sanitizeJSON` function only handles basic escapes, missing edge cases.
+
+### 3. Style Parsing Fails on Complex CSS
+
+workers-og uses regex to parse CSS: `;(?![^(]*\))`. This fails on:
+- Nested parentheses: `calc(100% - (10px + 5px))`
+- Data URIs: `url(data:image/png;base64,...)`
+- Complex CSS with multiple function calls
+
+### 4. No Vite Support
 
-| Issue                     | Details                                                                     |
-| ------------------------- | --------------------------------------------------------------------------- |
-| **Outdated WASM**         | Uses yoga-wasm-web 0.3.3 (unmaintained since 2023) and resvg-wasm 2.4.0     |
-| **Console logs**          | Debug logs left in production code (`og.ts:16,18,20`)                       |
-| **Brittle HTML parsing**  | Manual JSON string concatenation (`vdomStr +=`) - error-prone               |
-| **No Vite support**       | Uses esbuild copy loader, incompatible with Vite's WASM handling            |
+workers-og uses esbuild's copy loader for WASM, which is incompatible with Vite. The library only works with `wrangler dev`, not `vite dev` with `@cloudflare/vite-plugin`.
+
+### 5. Debug Logs in Production
+
+```typescript
+console.log("init RESVG");  // Left in production code
+```
 
 ### How cf-workers-og Solves These
 
-- **Modern WASM**: Uses `@cf-wasm/og` which is actively maintained (Dec 2025) with up-to-date yoga and resvg
-- **No debug logs**: Clean production code
-- **Robust HTML parsing**: Uses [htmlparser2](https://github.com/fb55/htmlparser2) + [style-to-js](https://www.npmjs.com/package/style-to-js) for proper DOM/CSS parsing (works in Workers, unlike browser-based parsers)
-- **Vite compatible**: Works with `@cloudflare/vite-plugin` out of the box
+| Issue | cf-workers-og Solution |
+|-------|----------------------|
+| **Outdated WASM** | Uses `@cf-wasm/og` (actively maintained, Dec 2025) with current yoga and resvg |
+| **Brittle HTML parsing** | Uses [htmlparser2](https://github.com/fb55/htmlparser2) - a battle-tested streaming parser with no browser dependencies |
+| **Style parsing** | Uses [style-to-js](https://www.npmjs.com/package/style-to-js) (1M+ weekly downloads) - handles all CSS edge cases |
+| **No Vite support** | Works with `@cloudflare/vite-plugin` via proper conditional exports for node/workerd |
+| **Debug logs** | Clean production code |
+
+### Design Decisions
+
+**Why wrap @cf-wasm/og instead of building from scratch?**
+
+WASM on Cloudflare Workers is genuinely hard. Workers cannot compile WASM from arbitrary data blobs - you must import as modules. Rather than maintain custom yoga-wasm builds, we wrap `@cf-wasm/og` which already solves Vite + Wrangler compatibility.
+
+**Why htmlparser2 instead of html-react-parser?**
+
+`html-react-parser` uses `html-dom-parser` which detects the environment. Cloudflare Workers is incorrectly detected as a browser, causing it to use `document.implementation.createHTMLDocument` which doesn't exist. `htmlparser2` is a pure streaming parser that works everywhere.
 
 ## API Reference
 
+### Entry points
+
+Use `cf-workers-og` for Workers with JSX input, `cf-workers-og/html` for HTML strings, and `cf-workers-og/compat` only when migrating from workers-og. If your bundler ignores export conditions, use explicit paths like `cf-workers-og/node` or `cf-workers-og/workerd` (and the `/html` or `/compat` variants).
+
 ### `ImageResponse.create(element, options)`
 
 Generate an OG image Response.
+Main entrypoint expects a React element; `cf-workers-og/html` also accepts HTML strings.
 
 ```typescript
 const response = await ImageResponse.create(element, {
@@ -160,7 +214,7 @@ const response = await ImageResponse.create(element, {
 
 ### `parseHtml(html)`
 
-Parse an HTML string into React elements for Satori.
+Parse an HTML string into React elements for Satori. Exported from `cf-workers-og/html` and `cf-workers-og/compat`.
 
 ```typescript
 const element = parseHtml('<div style="display: flex;">Hello</div>');
@@ -203,9 +257,11 @@ The `GoogleFont` class caches font files using Cloudflare's Cache API to avoid r
 
 ## Migrating from workers-og
 
+Note that cache is only used if you use GoogleFonts. Otherwise it is a drop-in replacement.
+
 ```diff
 - import { ImageResponse } from 'workers-og';
-+ import { ImageResponse, cache } from 'cf-workers-og';
++ import { ImageResponse, cache } from 'cf-workers-og/compat';
 
 export default {
   async fetch(request, env, ctx) {
@@ -220,7 +276,7 @@ For HTML string users:
 
 ```diff
 - return new ImageResponse(htmlString, options);
-+ import { parseHtml } from 'cf-workers-og';
++ import { ImageResponse, parseHtml } from 'cf-workers-og/html';
 + return ImageResponse.create(parseHtml(htmlString), options);
 ```
 
@@ -236,70 +292,6 @@ This package is a **thin wrapper** (6 KB) around `@cf-wasm/og`. The heavy liftin
 
 The WASM files are installed as transitive dependencies - they're not bundled in this package.
 
-## Local Development
-
-To test changes locally before publishing:
-
-```bash
-# In cf-workers-og directory
-pnpm build
-pnpm link --global
-
-# In your Astro/other project
-pnpm link --global cf-workers-og
-```
-
-Then in your Astro project's API route:
-
-```tsx
-// src/pages/og/[...slug].ts (Astro on Cloudflare)
-import type { APIRoute } from "astro";
-import { ImageResponse } from "cf-workers-og";
-
-export const GET: APIRoute = async ({ params }) => {
-  // No cache.setExecutionContext needed - using default font
-  return ImageResponse.create(
-    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", background: "#000", color: "#fff", width: "100%", height: "100%" }}>
-      <h1 style={{ fontSize: 60 }}>Hello {params.slug}</h1>
-    </div>,
-    { width: 1200, height: 630 }
-  );
-};
-```
-
-If using Google Fonts:
-
-```tsx
-import { ImageResponse, GoogleFont, cache } from "cf-workers-og";
-
-export const GET: APIRoute = async ({ params, locals }) => {
-  // Required for GoogleFont caching
-  const ctx = (locals as any).runtime?.ctx;
-  if (ctx) cache.setExecutionContext(ctx);
-
-  return ImageResponse.create(
-    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", background: "#000", color: "#fff", width: "100%", height: "100%" }}>
-      <h1 style={{ fontSize: 60, fontFamily: "Inter" }}>Hello {params.slug}</h1>
-    </div>,
-    {
-      width: 1200,
-      height: 630,
-      fonts: [new GoogleFont("Inter", { weight: 700 })],
-    }
-  );
-};
-```
-
-To unlink after testing:
-
-```bash
-# In your Astro project
-pnpm unlink cf-workers-og
-
-# In cf-workers-og directory
-pnpm unlink --global
-```
-
 ## License
 
 MIT

package/dist/compat.d.ts

@@ -0,0 +1,11 @@
+/**
+ * cf-workers-og (compat entry point)
+ *
+ * Keeps workers-og constructor behavior and HTML string parsing support.
+ */
+import type { ReactNode } from "react";
+export { cache } from "@cf-wasm/og/workerd";
+export declare const ImageResponse: import("./core/image-response").ImageResponseCompatClass<ReactNode>;
+export { parseHtml } from "./html-parser";
+export { GoogleFont, CustomFont, loadGoogleFont, createFontConfig } from "./fonts";
+export type { ImageResponseOptions, FontConfig, FontWeight, FontStyle, EmojiType, GoogleFontOptions, } from "./types";

package/dist/compat.js

@@ -0,0 +1,20 @@
+import { ImageResponse as ImageResponse$1 } from "@cf-wasm/og/workerd";
+import { CustomFont, GoogleFont, cache } from "@cf-wasm/og/workerd";
+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,
+  compatConstructor: true
+});
+export {
+  CustomFont,
+  GoogleFont,
+  ImageResponse,
+  cache,
+  a as createFontConfig,
+  l as loadGoogleFont,
+  parseHtml
+};
+//# sourceMappingURL=compat.js.map

package/dist/compat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compat.js","sources":["../src/compat.ts"],"sourcesContent":["/**\n * cf-workers-og (compat entry point)\n *\n * Keeps workers-og constructor behavior and HTML string parsing support.\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  compatConstructor: true,\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;AAAA,EACA,mBAAmB;AACrB,CAAC;"}

package/dist/compat.node.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cf-workers-og (Node.js compat entry point)
+ */
+import type { ReactNode } from "react";
+export { cache } from "@cf-wasm/og/node";
+export declare const ImageResponse: import("./core/image-response").ImageResponseCompatClass<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/compat.node.js

@@ -0,0 +1,20 @@
+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,
+  compatConstructor: true
+});
+export {
+  CustomFont,
+  GoogleFont,
+  ImageResponse,
+  cache,
+  a as createFontConfig,
+  l as loadGoogleFont,
+  parseHtml
+};
+//# sourceMappingURL=compat.node.js.map

package/dist/compat.node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compat.node.js","sources":["../src/compat.node.ts"],"sourcesContent":["/**\n * cf-workers-og (Node.js compat 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  compatConstructor: true,\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;AAAA,EACA,mBAAmB;AACrB,CAAC;"}

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

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import type { EmojiType, FontInput, ImageResponseOptions } from "../types";
+type CfImageResponseOptions = {
+    width: number;
+    height: number;
+    format: "png" | "svg";
+    fonts: FontInput[];
+    emoji?: EmojiType;
+};
+type CfImageResponse = {
+    async: (element: ReactNode, options: CfImageResponseOptions) => Promise<Response>;
+};
+type ParseHtml = (html: string) => ReactNode;
+type CreateImageResponseConfig = {
+    cfImageResponse: CfImageResponse;
+    parseHtml?: ParseHtml;
+    compatConstructor?: boolean;
+};
+type ImageInput = ReactNode | string;
+export type ImageResponseClass<Input extends ImageInput> = {
+    new (element: Input, options?: ImageResponseOptions): Response;
+    create(element: Input, options?: ImageResponseOptions): Promise<Response>;
+};
+export type ImageResponseCompatClass<Input extends ImageInput> = {
+    new (element: Input, options?: ImageResponseOptions): Promise<Response>;
+    create(element: Input, options?: ImageResponseOptions): Promise<Response>;
+};
+export declare function createImageResponseClass<Input extends ImageInput>(config: CreateImageResponseConfig & {
+    compatConstructor: true;
+}): ImageResponseCompatClass<Input>;
+export declare function createImageResponseClass<Input extends ImageInput>(config: CreateImageResponseConfig & {
+    compatConstructor?: false;
+}): ImageResponseClass<Input>;
+export {};

package/dist/fonts.d.ts

@@ -1,52 +1,2 @@
-import type { FontWeight, GoogleFontOptions } from "./types";
 export { GoogleFont, CustomFont } from "@cf-wasm/og/workerd";
-/**
- * Load a Google Font and return its data as an ArrayBuffer.
- *
- * This is a backwards-compatible function for users migrating from workers-og.
- * For new code, prefer using `GoogleFont` class from `@cf-wasm/og`.
- *
- * @param options - Font loading options
- * @returns Font data as ArrayBuffer
- *
- * @example
- * ```typescript
- * const fontData = await loadGoogleFont({
- *   family: 'Inter',
- *   weight: 700,
- * });
- *
- * return ImageResponse.create(element, {
- *   fonts: [{
- *     name: 'Inter',
- *     data: fontData,
- *     weight: 700,
- *     style: 'normal',
- *   }],
- * });
- * ```
- *
- * @deprecated Use `GoogleFont` class instead for better caching:
- * ```typescript
- * import { GoogleFont, cache } from 'cf-workers-og';
- * cache.setExecutionContext(ctx);
- * const fonts = [new GoogleFont('Inter', { weight: 700 })];
- * ```
- */
-export declare function loadGoogleFont(options: GoogleFontOptions): Promise<ArrayBuffer>;
-/**
- * Create a font configuration object for ImageResponse.
- *
- * Helper function to build the font config with proper types.
- *
- * @param name - Font family name
- * @param data - Font data as ArrayBuffer
- * @param weight - Font weight (optional, defaults to 400)
- * @param style - Font style (optional, defaults to 'normal')
- */
-export declare function createFontConfig(name: string, data: ArrayBuffer, weight?: FontWeight, style?: "normal" | "italic"): {
-    name: string;
-    data: ArrayBuffer;
-    weight: FontWeight;
-    style: "normal" | "italic";
-};
+export { loadGoogleFont, createFontConfig } from "./fonts.shared";

package/dist/fonts.node.d.ts

@@ -1,52 +1,2 @@
-import type { FontWeight, GoogleFontOptions } from "./types";
 export { GoogleFont, CustomFont } from "@cf-wasm/og/node";
-/**
- * Load a Google Font and return its data as an ArrayBuffer.
- *
- * This is a backwards-compatible function for users migrating from workers-og.
- * For new code, prefer using `GoogleFont` class from `@cf-wasm/og`.
- *
- * @param options - Font loading options
- * @returns Font data as ArrayBuffer
- *
- * @example
- * ```typescript
- * const fontData = await loadGoogleFont({
- *   family: 'Inter',
- *   weight: 700,
- * });
- *
- * return ImageResponse.create(element, {
- *   fonts: [{
- *     name: 'Inter',
- *     data: fontData,
- *     weight: 700,
- *     style: 'normal',
- *   }],
- * });
- * ```
- *
- * @deprecated Use `GoogleFont` class instead for better caching:
- * ```typescript
- * import { GoogleFont, cache } from 'cf-workers-og';
- * cache.setExecutionContext(ctx);
- * const fonts = [new GoogleFont('Inter', { weight: 700 })];
- * ```
- */
-export declare function loadGoogleFont(options: GoogleFontOptions): Promise<ArrayBuffer>;
-/**
- * Create a font configuration object for ImageResponse.
- *
- * Helper function to build the font config with proper types.
- *
- * @param name - Font family name
- * @param data - Font data as ArrayBuffer
- * @param weight - Font weight (optional, defaults to 400)
- * @param style - Font style (optional, defaults to 'normal')
- */
-export declare function createFontConfig(name: string, data: ArrayBuffer, weight?: FontWeight, style?: "normal" | "italic"): {
-    name: string;
-    data: ArrayBuffer;
-    weight: FontWeight;
-    style: "normal" | "italic";
-};
+export { loadGoogleFont, createFontConfig } from "./fonts.shared";

package/dist/fonts.shared-RU0Lt2Ku.js

@@ -0,0 +1,135 @@
+function createImageResponseClass(config) {
+  const { cfImageResponse, parseHtml, compatConstructor = false } = config;
+  class ImageResponseCore extends Response {
+    static async create(element, options = {}) {
+      const reactElement = resolveElement(element, parseHtml);
+      const normalized = normalizeOptions(options);
+      const response = await cfImageResponse.async(reactElement, {
+        width: normalized.width,
+        height: normalized.height,
+        format: normalized.format,
+        fonts: normalized.fonts,
+        emoji: normalized.emoji
+      });
+      const responseHeaders = buildResponseHeaders(
+        response.headers,
+        normalized.format,
+        normalized.debug,
+        normalized.headers
+      );
+      return new Response(response.body, {
+        headers: responseHeaders,
+        status: normalized.status,
+        statusText: normalized.statusText
+      });
+    }
+    constructor(element, options = {}) {
+      super(null);
+      if (!compatConstructor) {
+        throw new Error(
+          "cf-workers-og: use ImageResponse.create(...) or import from cf-workers-og/compat"
+        );
+      }
+      return ImageResponseCore.create(element, options);
+    }
+  }
+  if (compatConstructor) {
+    return ImageResponseCore;
+  }
+  return ImageResponseCore;
+}
+function resolveElement(element, parseHtml) {
+  if (typeof element === "string") {
+    if (!parseHtml) {
+      throw new Error(
+        "cf-workers-og: HTML string input requires cf-workers-og/html or cf-workers-og/compat"
+      );
+    }
+    return parseHtml(element);
+  }
+  return element;
+}
+function normalizeOptions(options) {
+  return {
+    width: options.width ?? 1200,
+    height: options.height ?? 630,
+    format: options.format ?? "png",
+    fonts: options.fonts ?? [],
+    emoji: options.emoji,
+    debug: options.debug ?? false,
+    headers: options.headers ?? {},
+    status: options.status ?? 200,
+    statusText: options.statusText
+  };
+}
+function buildResponseHeaders(baseHeaders, format, debug, customHeaders) {
+  const responseHeaders = new Headers(baseHeaders);
+  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(customHeaders)) {
+    responseHeaders.set(key, value);
+  }
+  return responseHeaders;
+}
+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: {
+        "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
+  };
+}
+export {
+  createFontConfig as a,
+  createImageResponseClass as c,
+  loadGoogleFont as l
+};
+//# sourceMappingURL=fonts.shared-RU0Lt2Ku.js.map

package/dist/fonts.shared-RU0Lt2Ku.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.shared-RU0Lt2Ku.js","sources":["../src/core/image-response.ts","../src/fonts.shared.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { EmojiType, FontInput, ImageResponseOptions } from \"../types\";\n\ntype CfImageResponseOptions = {\n  width: number;\n  height: number;\n  format: \"png\" | \"svg\";\n  fonts: FontInput[];\n  emoji?: EmojiType;\n};\n\ntype CfImageResponse = {\n  async: (element: ReactNode, options: CfImageResponseOptions) => Promise<Response>;\n};\n\ntype ParseHtml = (html: string) => ReactNode;\n\ntype CreateImageResponseConfig = {\n  cfImageResponse: CfImageResponse;\n  parseHtml?: ParseHtml;\n  compatConstructor?: boolean;\n};\n\ntype ImageInput = ReactNode | string;\n\nexport type ImageResponseClass<Input extends ImageInput> = {\n  new (element: Input, options?: ImageResponseOptions): Response;\n  create(element: Input, options?: ImageResponseOptions): Promise<Response>;\n};\n\nexport type ImageResponseCompatClass<Input extends ImageInput> = {\n  new (element: Input, options?: ImageResponseOptions): Promise<Response>;\n  create(element: Input, options?: ImageResponseOptions): Promise<Response>;\n};\n\nexport function createImageResponseClass<Input extends ImageInput>(\n  config: CreateImageResponseConfig & { compatConstructor: true }\n): ImageResponseCompatClass<Input>;\nexport function createImageResponseClass<Input extends ImageInput>(\n  config: CreateImageResponseConfig & { compatConstructor?: false }\n): ImageResponseClass<Input>;\nexport function createImageResponseClass<Input extends ImageInput>(\n  config: CreateImageResponseConfig\n): ImageResponseClass<Input> | ImageResponseCompatClass<Input> {\n  const { cfImageResponse, parseHtml, compatConstructor = false } = config;\n\n  class ImageResponseCore extends Response {\n    static async create(\n      element: Input,\n      options: ImageResponseOptions = {}\n    ): Promise<Response> {\n      const reactElement = resolveElement(element, parseHtml);\n      const normalized = normalizeOptions(options);\n\n      const response = await cfImageResponse.async(reactElement, {\n        width: normalized.width,\n        height: normalized.height,\n        format: normalized.format,\n        fonts: normalized.fonts,\n        emoji: normalized.emoji,\n      });\n\n      const responseHeaders = buildResponseHeaders(\n        response.headers,\n        normalized.format,\n        normalized.debug,\n        normalized.headers\n      );\n\n      return new Response(response.body, {\n        headers: responseHeaders,\n        status: normalized.status,\n        statusText: normalized.statusText,\n      });\n    }\n\n    constructor(element: Input, options: ImageResponseOptions = {}) {\n      super(null);\n      if (!compatConstructor) {\n        throw new Error(\n          \"cf-workers-og: use ImageResponse.create(...) or import from cf-workers-og/compat\"\n        );\n      }\n      return ImageResponseCore.create(element, options) as unknown as ImageResponseCore;\n    }\n  }\n\n  if (compatConstructor) {\n    // Cast through unknown to model legacy workers-og constructor behavior.\n    // The runtime returns a Promise, but TS cannot express that on classes.\n    return ImageResponseCore as unknown as ImageResponseCompatClass<Input>;\n  }\n\n  return ImageResponseCore as ImageResponseClass<Input>;\n}\n\nfunction resolveElement<Input extends ImageInput>(\n  element: Input,\n  parseHtml?: ParseHtml\n): ReactNode {\n  if (typeof element === \"string\") {\n    if (!parseHtml) {\n      throw new Error(\n        \"cf-workers-og: HTML string input requires cf-workers-og/html or cf-workers-og/compat\"\n      );\n    }\n    return parseHtml(element);\n  }\n\n  return element;\n}\n\nfunction normalizeOptions(options: ImageResponseOptions) {\n  return {\n    width: options.width ?? 1200,\n    height: options.height ?? 630,\n    format: options.format ?? \"png\",\n    fonts: options.fonts ?? [],\n    emoji: options.emoji,\n    debug: options.debug ?? false,\n    headers: options.headers ?? {},\n    status: options.status ?? 200,\n    statusText: options.statusText,\n  };\n}\n\nfunction buildResponseHeaders(\n  baseHeaders: Headers,\n  format: \"png\" | \"svg\",\n  debug: boolean,\n  customHeaders: Record<string, string>\n): Headers {\n  const responseHeaders = new Headers(baseHeaders);\n\n  responseHeaders.set(\n    \"Content-Type\",\n    format === \"svg\" ? \"image/svg+xml\" : \"image/png\"\n  );\n\n  responseHeaders.set(\n    \"Cache-Control\",\n    debug\n      ? \"no-cache, no-store\"\n      : \"public, immutable, no-transform, max-age=31536000\"\n  );\n\n  for (const [key, value] of Object.entries(customHeaders)) {\n    responseHeaders.set(key, value);\n  }\n\n  return responseHeaders;\n}\n","import type { FontWeight, GoogleFontOptions } from \"./types\";\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 */\nexport async function loadGoogleFont(\n  options: GoogleFontOptions\n): Promise<ArrayBuffer> {\n  const { family, weight, text } = options;\n\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  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        \"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      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  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  const fontResponse = await fetch(fontUrl);\n  return fontResponse.arrayBuffer();\n}\n\n/**\n * Create a font configuration object for ImageResponse.\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":[],"mappings":"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"}

package/dist/fonts.shared.d.ts

@@ -0,0 +1,17 @@
+import type { FontWeight, GoogleFontOptions } from "./types";
+/**
+ * Load a Google Font and return its data as an ArrayBuffer.
+ *
+ * This is a backwards-compatible function for users migrating from workers-og.
+ * For new code, prefer using `GoogleFont` class from `@cf-wasm/og`.
+ */
+export declare function loadGoogleFont(options: GoogleFontOptions): Promise<ArrayBuffer>;
+/**
+ * Create a font configuration object for ImageResponse.
+ */
+export declare function createFontConfig(name: string, data: ArrayBuffer, weight?: FontWeight, style?: "normal" | "italic"): {
+    name: string;
+    data: ArrayBuffer;
+    weight: FontWeight;
+    style: "normal" | "italic";
+};

package/dist/html.d.ts

@@ -0,0 +1,11 @@
+/**
+ * cf-workers-og (HTML entry point)
+ *
+ * Includes HTML string parsing support without legacy constructor behavior.
+ */
+import type { ReactNode } from "react";
+export { cache } from "@cf-wasm/og/workerd";
+export declare const ImageResponse: import("./core/image-response").ImageResponseClass<ReactNode>;
+export { parseHtml } from "./html-parser";
+export { GoogleFont, CustomFont, loadGoogleFont, createFontConfig } from "./fonts";
+export type { ImageResponseOptions, FontConfig, FontWeight, FontStyle, EmojiType, GoogleFontOptions, } from "./types";

package/dist/html.js

@@ -0,0 +1,19 @@
+import { ImageResponse as ImageResponse$1 } from "@cf-wasm/og/workerd";
+import { CustomFont, GoogleFont, cache } from "@cf-wasm/og/workerd";
+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.js.map