cf-workers-og 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Jilles Soeters
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,305 @@
+# cf-workers-og
+
+Generate Open Graph images on Cloudflare Workers with Vite support.
+
+A thin wrapper around [@cf-wasm/og](https://github.com/fineshopdesign/cf-wasm) that provides:
+
+- 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
+- TypeScript support
+
+## Installation
+
+```bash
+npm install cf-workers-og
+# or
+pnpm add cf-workers-og
+```
+
+## Quick Start
+
+### Basic Usage (JSX)
+
+```tsx
+import { ImageResponse } from "cf-workers-og";
+
+export default {
+  async fetch(request: Request, env: Env, ctx: ExecutionContext) {
+    return ImageResponse.create(
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100%",
+          height: "100%",
+          background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+          color: "white",
+          fontSize: 60,
+        }}
+      >
+        Hello World
+      </div>,
+      { width: 1200, height: 630 }
+    );
+  },
+};
+```
+
+### With Google Fonts
+
+```tsx
+import { ImageResponse, GoogleFont, cache } from "cf-workers-og";
+
+export default {
+  async fetch(request: Request, env: Env, ctx: ExecutionContext) {
+    // Required when using GoogleFont
+    cache.setExecutionContext(ctx);
+
+    return ImageResponse.create(
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100%",
+          height: "100%",
+          background: "#000",
+          color: "#fff",
+          fontFamily: "Inter",
+          fontSize: 60,
+        }}
+      >
+        Hello World
+      </div>,
+      {
+        width: 1200,
+        height: 630,
+        fonts: [new GoogleFont("Inter", { weight: 700 })],
+      }
+    );
+  },
+};
+```
+
+### HTML String Usage
+
+We added this to be backwards-comatible with workers-og, but prefer JSX. 
+
+```typescript
+import { ImageResponse, parseHtml } from "cf-workers-og";
+
+export default {
+  async fetch(request: Request, env: Env, ctx: ExecutionContext) {
+    const html = `
+      <div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #000; color: #fff;">
+        <h1 style="font-size: 60px;">Hello from HTML</h1>
+      </div>
+    `;
+
+    return ImageResponse.create(parseHtml(html), {
+      width: 1200,
+      height: 630,
+    });
+  },
+};
+```
+
+## Vite Configuration
+
+Add the Cloudflare Vite plugin to your `vite.config.ts`:
+
+```typescript
+import { defineConfig } from "vite";
+import { cloudflare } from "@cloudflare/vite-plugin";
+
+export default defineConfig({
+  plugins: [cloudflare()],
+});
+```
+
+## Why Not workers-og?
+
+The original [workers-og](https://github.com/syedashar1/workers-og) library has several issues:
+
+| 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            |
+
+### 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
+
+## API Reference
+
+### `ImageResponse.create(element, options)`
+
+Generate an OG image Response.
+
+```typescript
+const response = await ImageResponse.create(element, {
+  width: 1200, // Default: 1200
+  height: 630, // Default: 630
+  format: "png", // 'png' | 'svg', Default: 'png'
+  fonts: [], // Font configurations
+  emoji: "twemoji", // Emoji provider
+  debug: false, // Disable caching for debugging
+  headers: {}, // Additional response headers
+  status: 200, // HTTP status code
+  statusText: "", // HTTP status text
+});
+```
+
+### `parseHtml(html)`
+
+Parse an HTML string into React elements for Satori.
+
+```typescript
+const element = parseHtml('<div style="display: flex;">Hello</div>');
+```
+
+### `GoogleFont(family, options)`
+
+Load a Google Font.
+
+```typescript
+const font = new GoogleFont("Inter", { weight: 700 });
+```
+
+### `loadGoogleFont(options)` (Deprecated)
+
+Backwards-compatible function for loading Google Fonts. Prefer `GoogleFont` class.
+
+```typescript
+const fontData = await loadGoogleFont({ family: "Inter", weight: 700 });
+```
+
+### `cache.setExecutionContext(ctx)`
+
+**Only required when using `GoogleFont`**. Not needed if you use the default font or `CustomFont`.
+
+```typescript
+// Only if using GoogleFont:
+cache.setExecutionContext(ctx);
+
+const response = await ImageResponse.create(element, {
+  fonts: [new GoogleFont("Inter", { weight: 700 })],
+});
+```
+
+The `GoogleFont` class caches font files using Cloudflare's Cache API to avoid re-fetching on every request. The Cache API requires access to the execution context.
+
+**When you DON'T need it:**
+- Using no fonts (default Noto Sans is bundled)
+- Using `CustomFont` with your own font data
+
+## Migrating from workers-og
+
+```diff
+- import { ImageResponse } from 'workers-og';
++ import { ImageResponse, cache } from 'cf-workers-og';
+
+export default {
+  async fetch(request, env, ctx) {
++   cache.setExecutionContext(ctx);
+
+    return new ImageResponse(element, options);
+  }
+};
+```
+
+For HTML string users:
+
+```diff
+- return new ImageResponse(htmlString, options);
++ import { parseHtml } from 'cf-workers-og';
++ return ImageResponse.create(parseHtml(htmlString), options);
+```
+
+## Architecture
+
+This package is a **thin wrapper** (6 KB) around `@cf-wasm/og`. The heavy lifting is done by:
+
+| Package | Size | Purpose |
+|---------|------|---------|
+| `@cf-wasm/resvg` | 2.4 MB | SVG → PNG rendering (WASM) |
+| `@cf-wasm/satori` | 87 KB | Flexbox layout engine (WASM) |
+| `htmlparser2` | ~42 KB | HTML parsing (pure JS) |
+
+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/fonts.d.ts

@@ -0,0 +1,52 @@
+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";
+};

package/dist/fonts.node.d.ts

@@ -0,0 +1,52 @@
+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";
+};

package/dist/html-parser-DRzlsDtB.js

@@ -0,0 +1,80 @@
+import { parseDocument } from "htmlparser2";
+import { createElement } from "react";
+import styleToJS from "style-to-js";
+function parseHtml(html) {
+  const wrappedHtml = `<div style="display: flex; flex-direction: column;">${html}</div>`;
+  const doc = parseDocument(wrappedHtml);
+  const rootNode = doc.childNodes[0];
+  if (!rootNode) {
+    return null;
+  }
+  return convertNode(rootNode);
+}
+function convertNode(node) {
+  if (node.type === "text") {
+    const textNode = node;
+    const text = textNode.data.trim();
+    return text || null;
+  }
+  if (node.type === "tag") {
+    const element = node;
+    const tagName = element.name.toLowerCase();
+    const props = {};
+    if (element.attribs.style) {
+      props.style = styleToJS(element.attribs.style, { reactCompat: true });
+    }
+    if (element.attribs.class) {
+      props.className = element.attribs.class;
+    }
+    for (const [key, value] of Object.entries(element.attribs)) {
+      if (key === "style" || key === "class") continue;
+      const reactKey = htmlAttrToReactProp(key);
+      props[reactKey] = value;
+    }
+    if (tagName === "img" && props.src) {
+      if (!props.width) {
+        console.warn(
+          "cf-workers-og: <img> elements should have explicit width for Satori"
+        );
+      }
+      if (!props.height) {
+        console.warn(
+          "cf-workers-og: <img> elements should have explicit height for Satori"
+        );
+      }
+    }
+    const children = (element.children || []).map(convertNode).filter((child) => child !== null);
+    return createElement(tagName, props, ...children);
+  }
+  return null;
+}
+function htmlAttrToReactProp(attr) {
+  const mappings = {
+    class: "className",
+    for: "htmlFor",
+    tabindex: "tabIndex",
+    readonly: "readOnly",
+    maxlength: "maxLength",
+    cellspacing: "cellSpacing",
+    cellpadding: "cellPadding",
+    rowspan: "rowSpan",
+    colspan: "colSpan",
+    usemap: "useMap",
+    frameborder: "frameBorder",
+    contenteditable: "contentEditable",
+    crossorigin: "crossOrigin",
+    srcset: "srcSet",
+    srcdoc: "srcDoc"
+  };
+  if (mappings[attr]) {
+    return mappings[attr];
+  }
+  if (attr.startsWith("data-") || attr.startsWith("aria-")) {
+    return attr;
+  }
+  return attr.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+export {
+  parseHtml as p
+};
+//# sourceMappingURL=html-parser-DRzlsDtB.js.map

package/dist/html-parser-DRzlsDtB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-parser-DRzlsDtB.js","sources":["../src/html-parser.ts"],"sourcesContent":["import { parseDocument } from \"htmlparser2\";\nimport { createElement, type ReactNode } from \"react\";\nimport styleToJS from \"style-to-js\";\n\n/**\n * Parse an HTML string into React elements compatible with Satori.\n *\n * This uses htmlparser2 for server-side DOM parsing (works in Cloudflare Workers),\n * and transforms HTML attributes to React props (style strings to objects, etc.)\n *\n * @param html - HTML string to parse\n * @returns React node tree compatible with Satori\n *\n * @example\n * ```typescript\n * const element = parseHtml('<div style=\"display: flex; color: white;\">Hello</div>');\n * return ImageResponse.create(element, { width: 1200, height: 630 });\n * ```\n */\nexport function parseHtml(html: string): ReactNode {\n  // Wrap in a flex container to ensure single root and proper layout\n  const wrappedHtml = `<div style=\"display: flex; flex-direction: column;\">${html}</div>`;\n\n  // Parse HTML to DOM tree\n  const doc = parseDocument(wrappedHtml);\n\n  // Convert first child (our wrapper div)\n  const rootNode = doc.childNodes[0];\n  if (!rootNode) {\n    return null;\n  }\n\n  return convertNode(rootNode);\n}\n\n/**\n * Convert a DOM node to a React element\n */\nfunction convertNode(node: Node): ReactNode {\n  // Text node\n  if (node.type === \"text\") {\n    const textNode = node as TextNode;\n    const text = textNode.data.trim();\n    return text || null;\n  }\n\n  // Element node\n  if (node.type === \"tag\") {\n    const element = node as ElementNode;\n    const tagName = element.name.toLowerCase();\n\n    // Build React props from HTML attributes\n    const props: Record<string, unknown> = {};\n\n    // Convert style string to object using style-to-js\n    if (element.attribs.style) {\n      props.style = styleToJS(element.attribs.style, { reactCompat: true });\n    }\n\n    // Map class to className\n    if (element.attribs.class) {\n      props.className = element.attribs.class;\n    }\n\n    // Copy other attributes, converting to React naming conventions\n    for (const [key, value] of Object.entries(element.attribs)) {\n      if (key === \"style\" || key === \"class\") continue;\n\n      // Convert HTML attribute names to React prop names\n      const reactKey = htmlAttrToReactProp(key);\n      props[reactKey] = value;\n    }\n\n    // Handle image src specially - Satori requires width/height\n    if (tagName === \"img\" && props.src) {\n      if (!props.width) {\n        console.warn(\n          \"cf-workers-og: <img> elements should have explicit width for Satori\"\n        );\n      }\n      if (!props.height) {\n        console.warn(\n          \"cf-workers-og: <img> elements should have explicit height for Satori\"\n        );\n      }\n    }\n\n    // Recursively convert children\n    const children = (element.children || [])\n      .map(convertNode)\n      .filter((child): child is ReactNode => child !== null);\n\n    return createElement(tagName, props, ...children);\n  }\n\n  // Other node types (comments, etc.) - skip\n  return null;\n}\n\n/**\n * Convert HTML attribute name to React prop name\n */\nfunction htmlAttrToReactProp(attr: string): string {\n  // Common mappings\n  const mappings: Record<string, string> = {\n    class: \"className\",\n    for: \"htmlFor\",\n    tabindex: \"tabIndex\",\n    readonly: \"readOnly\",\n    maxlength: \"maxLength\",\n    cellspacing: \"cellSpacing\",\n    cellpadding: \"cellPadding\",\n    rowspan: \"rowSpan\",\n    colspan: \"colSpan\",\n    usemap: \"useMap\",\n    frameborder: \"frameBorder\",\n    contenteditable: \"contentEditable\",\n    crossorigin: \"crossOrigin\",\n    srcset: \"srcSet\",\n    srcdoc: \"srcDoc\",\n  };\n\n  if (mappings[attr]) {\n    return mappings[attr];\n  }\n\n  // Convert data-* and aria-* attributes (keep as-is in React)\n  if (attr.startsWith(\"data-\") || attr.startsWith(\"aria-\")) {\n    return attr;\n  }\n\n  // Convert kebab-case to camelCase for other attributes\n  return attr.replace(/-([a-z])/g, (_, c: string) => c.toUpperCase());\n}\n\n// Type definitions for htmlparser2 nodes\ninterface Node {\n  type: string;\n}\n\ninterface TextNode extends Node {\n  type: \"text\";\n  data: string;\n}\n\ninterface ElementNode extends Node {\n  type: \"tag\";\n  name: string;\n  attribs: Record<string, string>;\n  children: Node[];\n}\n"],"names":[],"mappings":";;;AAmBO,SAAS,UAAU,MAAyB;AAEjD,QAAM,cAAc,uDAAuD,IAAI;AAG/E,QAAM,MAAM,cAAc,WAAW;AAGrC,QAAM,WAAW,IAAI,WAAW,CAAC;AACjC,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,SAAO,YAAY,QAAQ;AAC7B;AAKA,SAAS,YAAY,MAAuB;AAE1C,MAAI,KAAK,SAAS,QAAQ;AACxB,UAAM,WAAW;AACjB,UAAM,OAAO,SAAS,KAAK,KAAA;AAC3B,WAAO,QAAQ;AAAA,EACjB;AAGA,MAAI,KAAK,SAAS,OAAO;AACvB,UAAM,UAAU;AAChB,UAAM,UAAU,QAAQ,KAAK,YAAA;AAG7B,UAAM,QAAiC,CAAA;AAGvC,QAAI,QAAQ,QAAQ,OAAO;AACzB,YAAM,QAAQ,UAAU,QAAQ,QAAQ,OAAO,EAAE,aAAa,MAAM;AAAA,IACtE;AAGA,QAAI,QAAQ,QAAQ,OAAO;AACzB,YAAM,YAAY,QAAQ,QAAQ;AAAA,IACpC;AAGA,eAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,QAAQ,OAAO,GAAG;AAC1D,UAAI,QAAQ,WAAW,QAAQ,QAAS;AAGxC,YAAM,WAAW,oBAAoB,GAAG;AACxC,YAAM,QAAQ,IAAI;AAAA,IACpB;AAGA,QAAI,YAAY,SAAS,MAAM,KAAK;AAClC,UAAI,CAAC,MAAM,OAAO;AAChB,gBAAQ;AAAA,UACN;AAAA,QAAA;AAAA,MAEJ;AACA,UAAI,CAAC,MAAM,QAAQ;AACjB,gBAAQ;AAAA,UACN;AAAA,QAAA;AAAA,MAEJ;AAAA,IACF;AAGA,UAAM,YAAY,QAAQ,YAAY,CAAA,GACnC,IAAI,WAAW,EACf,OAAO,CAAC,UAA8B,UAAU,IAAI;AAEvD,WAAO,cAAc,SAAS,OAAO,GAAG,QAAQ;AAAA,EAClD;AAGA,SAAO;AACT;AAKA,SAAS,oBAAoB,MAAsB;AAEjD,QAAM,WAAmC;AAAA,IACvC,OAAO;AAAA,IACP,KAAK;AAAA,IACL,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,IACX,aAAa;AAAA,IACb,aAAa;AAAA,IACb,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,QAAQ;AAAA,EAAA;AAGV,MAAI,SAAS,IAAI,GAAG;AAClB,WAAO,SAAS,IAAI;AAAA,EACtB;AAGA,MAAI,KAAK,WAAW,OAAO,KAAK,KAAK,WAAW,OAAO,GAAG;AACxD,WAAO;AAAA,EACT;AAGA,SAAO,KAAK,QAAQ,aAAa,CAAC,GAAG,MAAc,EAAE,aAAa;AACpE;"}

package/dist/html-parser.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+/**
+ * Parse an HTML string into React elements compatible with Satori.
+ *
+ * This uses htmlparser2 for server-side DOM parsing (works in Cloudflare Workers),
+ * and transforms HTML attributes to React props (style strings to objects, etc.)
+ *
+ * @param html - HTML string to parse
+ * @returns React node tree compatible with Satori
+ *
+ * @example
+ * ```typescript
+ * const element = parseHtml('<div style="display: flex; color: white;">Hello</div>');
+ * return ImageResponse.create(element, { width: 1200, height: 630 });
+ * ```
+ */
+export declare function parseHtml(html: string): ReactNode;

package/dist/image-response.d.ts

@@ -0,0 +1,64 @@
+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);
+}

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

@@ -0,0 +1,64 @@
+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);
+}

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * cf-workers-og
+ *
+ * Generate Open Graph images on Cloudflare Workers with Vite support.
+ *
+ * @example
+ * ```tsx
+ * import { ImageResponse, GoogleFont, cache } from 'cf-workers-og';
+ *
+ * export default {
+ *   async fetch(request, env, ctx) {
+ *     cache.setExecutionContext(ctx);
+ *
+ *     return ImageResponse.create(
+ *       <div style={{ display: 'flex', background: '#000', color: '#fff' }}>
+ *         <h1>Hello World</h1>
+ *       </div>,
+ *       {
+ *         width: 1200,
+ *         height: 630,
+ *         fonts: [new GoogleFont('Inter', { weight: 700 })],
+ *       }
+ *     );
+ *   }
+ * };
+ * ```
+ *
+ * @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

@@ -0,0 +1,131 @@
+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,
+      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
+  };
+}
+export {
+  CustomFont,
+  GoogleFont,
+  ImageResponse,
+  cache,
+  createFontConfig,
+  loadGoogleFont,
+  parseHtml
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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;AAGJ,UAAM,WAAW,MAAMA,gBAAgB,MAAM,cAAc;AAAA,MACzD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAGD,UAAM,kBAAkB,IAAI,QAAQ,SAAS,OAAO;AAGpD,oBAAgB;AAAA,MACd;AAAA,MACA,WAAW,QAAQ,kBAAkB;AAAA,IAAA;AAIvC,oBAAgB;AAAA,MACd;AAAA,MACA,QACI,uBACA;AAAA,IAAA;AAIN,eAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,OAAO,GAAG;AAClD,sBAAgB,IAAI,KAAK,KAAK;AAAA,IAChC;AAEA,WAAO,IAAI,SAAS,SAAS,MAAM;AAAA,MACjC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA,CACD;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBA,YAAY,SAA6B,UAAgC,IAAI;AAE3E,UAAM,IAAI;AAGV,WAAO,cAAc,OAAO,SAAS,OAAO;AAAA,EAC9C;AACF;AC7FA,eAAsB,eACpB,SACsB;AACtB,QAAM,EAAE,QAAQ,QAAQ,KAAA,IAAS;AAGjC,QAAM,SAAiC;AAAA,IACrC,QAAQ,GAAG,mBAAmB,MAAM,CAAC,GAAG,SAAS,SAAS,MAAM,KAAK,EAAE;AAAA,EAAA;AAGzE,MAAI,MAAM;AACR,WAAO,OAAO;AAAA,EAChB,OAAO;AACL,WAAO,SAAS;AAAA,EAClB;AAEA,QAAM,SAAS,qCAAqC,OAAO,KAAK,MAAM,EACnE,IAAI,CAAC,QAAQ,GAAG,GAAG,IAAI,OAAO,GAAG,CAAC,EAAE,EACpC,KAAK,GAAG,CAAC;AAGZ,QAAM,UACJ,OAAO,WAAW,cACb,OAAyC,UAC1C;AAEN,MAAI;AAEJ,MAAI,SAAS;AACX,kBAAc,MAAM,QAAQ,MAAM,MAAM;AAAA,EAC1C;AAEA,MAAI,CAAC,aAAa;AAChB,kBAAc,MAAM,MAAM,QAAQ;AAAA,MAChC,SAAS;AAAA;AAAA,QAEP,cACE;AAAA,MAAA;AAAA,IACJ,CACD;AAED,QAAI,SAAS;AAEX,YAAM,gBAAgB,IAAI,SAAS,YAAY,MAAM,WAAW;AAChE,oBAAc,QAAQ,IAAI,iBAAiB,eAAe;AAC1D,YAAM,QAAQ,IAAI,QAAQ,cAAc,OAAO;AAC/C,oBAAc;AAAA,IAChB;AAAA,EACF;AAEA,QAAM,MAAM,MAAM,YAAY,KAAA;AAG9B,QAAM,eAAe,IAAI;AAAA,IACvB;AAAA,EAAA;AAGF,MAAI,CAAC,eAAe,CAAC,GAAG;AACtB,UAAM,IAAI;AAAA,MACR,gCAAgC,MAAM,cAAc,UAAU,SAAS;AAAA,IAAA;AAAA,EAE3E;AAEA,QAAM,UAAU,aAAa,CAAC;AAG9B,QAAM,eAAe,MAAM,MAAM,OAAO;AACxC,SAAO,aAAa,YAAA;AACtB;AAYO,SAAS,iBACd,MACA,MACA,SAAqB,KACrB,QAA6B,UAC7B;AACA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/index.node.d.ts

@@ -0,0 +1,12 @@
+/**
+ * cf-workers-og (Node.js entry point)
+ *
+ * This entry point is used when running in Node.js environments (e.g., Astro dev server).
+ * It uses @cf-wasm/og/node which has fonts pre-inlined, avoiding .bin file imports.
+ *
+ * @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

@@ -0,0 +1,131 @@
+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
+  };
+}
+export {
+  CustomFont,
+  GoogleFont,
+  ImageResponse,
+  cache,
+  createFontConfig,
+  loadGoogleFont,
+  parseHtml
+};
+//# sourceMappingURL=index.node.js.map

package/dist/index.node.js.map

@@ -0,0 +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":";;;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;AAIJ,UAAM,WAAW,MAAMA,gBAAgB,MAAM,cAAc;AAAA,MACzD;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS,CAAA;AAAA,MAChB;AAAA,IAAA,CACD;AAGD,UAAM,kBAAkB,IAAI,QAAQ,SAAS,OAAO;AAGpD,oBAAgB;AAAA,MACd;AAAA,MACA,WAAW,QAAQ,kBAAkB;AAAA,IAAA;AAIvC,oBAAgB;AAAA,MACd;AAAA,MACA,QACI,uBACA;AAAA,IAAA;AAIN,eAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,OAAO,GAAG;AAClD,sBAAgB,IAAI,KAAK,KAAK;AAAA,IAChC;AAEA,WAAO,IAAI,SAAS,SAAS,MAAM;AAAA,MACjC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA,CACD;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBA,YAAY,SAA6B,UAAgC,IAAI;AAE3E,UAAM,IAAI;AAGV,WAAO,cAAc,OAAO,SAAS,OAAO;AAAA,EAC9C;AACF;AC9FA,eAAsB,eACpB,SACsB;AACtB,QAAM,EAAE,QAAQ,QAAQ,KAAA,IAAS;AAGjC,QAAM,SAAiC;AAAA,IACrC,QAAQ,GAAG,mBAAmB,MAAM,CAAC,GAAG,SAAS,SAAS,MAAM,KAAK,EAAE;AAAA,EAAA;AAGzE,MAAI,MAAM;AACR,WAAO,OAAO;AAAA,EAChB,OAAO;AACL,WAAO,SAAS;AAAA,EAClB;AAEA,QAAM,SAAS,qCAAqC,OAAO,KAAK,MAAM,EACnE,IAAI,CAAC,QAAQ,GAAG,GAAG,IAAI,OAAO,GAAG,CAAC,EAAE,EACpC,KAAK,GAAG,CAAC;AAGZ,QAAM,UACJ,OAAO,WAAW,cACb,OAAyC,UAC1C;AAEN,MAAI;AAEJ,MAAI,SAAS;AACX,kBAAc,MAAM,QAAQ,MAAM,MAAM;AAAA,EAC1C;AAEA,MAAI,CAAC,aAAa;AAChB,kBAAc,MAAM,MAAM,QAAQ;AAAA,MAChC,SAAS;AAAA;AAAA,QAEP,cACE;AAAA,MAAA;AAAA,IACJ,CACD;AAED,QAAI,SAAS;AAEX,YAAM,gBAAgB,IAAI,SAAS,YAAY,MAAM,WAAW;AAChE,oBAAc,QAAQ,IAAI,iBAAiB,eAAe;AAC1D,YAAM,QAAQ,IAAI,QAAQ,cAAc,OAAO;AAC/C,oBAAc;AAAA,IAChB;AAAA,EACF;AAEA,QAAM,MAAM,MAAM,YAAY,KAAA;AAG9B,QAAM,eAAe,IAAI;AAAA,IACvB;AAAA,EAAA;AAGF,MAAI,CAAC,eAAe,CAAC,GAAG;AACtB,UAAM,IAAI;AAAA,MACR,gCAAgC,MAAM,cAAc,UAAU,SAAS;AAAA,IAAA;AAAA,EAE3E;AAEA,QAAM,UAAU,aAAa,CAAC;AAG9B,QAAM,eAAe,MAAM,MAAM,OAAO;AACxC,SAAO,aAAa,YAAA;AACtB;AAYO,SAAS,iBACd,MACA,MACA,SAAqB,KACrB,QAA6B,UAC7B;AACA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/types.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Emoji provider options for rendering emoji in OG images
+ */
+export type EmojiType = "twemoji" | "openmoji" | "blobmoji" | "noto" | "fluent" | "fluentFlat";
+/**
+ * Font weight options
+ */
+export type FontWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+/**
+ * Font style options
+ */
+export type FontStyle = "normal" | "italic";
+/**
+ * Font configuration for custom fonts
+ */
+export interface FontConfig {
+    name: string;
+    data: ArrayBuffer;
+    weight?: FontWeight;
+    style?: FontStyle;
+}
+/**
+ * Options for ImageResponse
+ */
+export interface ImageResponseOptions {
+    /**
+     * Width of the output image in pixels
+     * @default 1200
+     */
+    width?: number;
+    /**
+     * Height of the output image in pixels
+     * @default 630
+     */
+    height?: number;
+    /**
+     * Output format
+     * @default "png"
+     */
+    format?: "png" | "svg";
+    /**
+     * Fonts to use for rendering text
+     */
+    fonts?: FontConfig[];
+    /**
+     * Emoji provider for rendering emoji
+     */
+    emoji?: EmojiType;
+    /**
+     * Enable debug mode (disables caching)
+     * @default false
+     */
+    debug?: boolean;
+    /**
+     * Additional headers to include in the response
+     */
+    headers?: Record<string, string>;
+    /**
+     * HTTP status code for the response
+     * @default 200
+     */
+    status?: number;
+    /**
+     * HTTP status text for the response
+     */
+    statusText?: string;
+}
+/**
+ * Options for loading Google Fonts
+ */
+export interface GoogleFontOptions {
+    /**
+     * Font family name (e.g., "Inter", "Roboto")
+     */
+    family: string;
+    /**
+     * Font weight
+     * @default 400
+     */
+    weight?: FontWeight;
+    /**
+     * Subset of characters to load (for optimization)
+     */
+    text?: string;
+}

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "cf-workers-og",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Generate Open Graph images on Cloudflare Workers with Vite support",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "node": {
+        "types": "./dist/index.node.d.ts",
+        "import": "./dist/index.node.js"
+      },
+      "workerd": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js"
+      },
+      "default": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@cf-wasm/og": "^0.3.0",
+    "htmlparser2": "^10.0.0",
+    "style-to-js": "^1.1.21"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20250610.0",
+    "@eslint/js": "^9.0.0",
+    "@types/react": "^18.3.0",
+    "@vitest/coverage-v8": "^2.0.0",
+    "eslint": "^9.0.0",
+    "prettier": "^3.3.0",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^7.0.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^2.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "cloudflare",
+    "workers",
+    "og",
+    "opengraph",
+    "image",
+    "satori",
+    "vite"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jillesme/cf-workers-og"
+  },
+  "bugs": {
+    "url": "https://github.com/jillesme/cf-workers-og/issues"
+  },
+  "homepage": "https://github.com/jillesme/cf-workers-og#readme",
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "format": "prettier --write src/",
+    "format:check": "prettier --check src/"
+  }
+}