@takumi-rs/image-response 0.29.2

package/README.md

@@ -0,0 +1,73 @@
+# @takumi-rs/image-response
+
+A universal `ImageResponse` implementation for Takumi in Next.js and other environments.
+
+Checkout the migration guide [From Next.js ImageResponse](https://takumi.kane.tw/docs/migration/migrate-from-image-response) for more details.
+
+## Installation
+
+```bash
+npm install @takumi-rs/image-response @takumi-rs/core @takumi-rs/helpers
+```
+
+## Usage
+
+```tsx
+import ImageResponse from "@takumi-rs/image-response";
+
+export function GET(request: Request) {
+  return new ImageResponse(<OgImage />, {
+    width: 1200,
+    height: 630,
+    format: "webp",
+    headers: {
+      "Cache-Control": "public, immutable, max-age=31536000",
+    },
+  });
+}
+```
+
+### Fonts
+
+Takumi comes with full axis [Geist](https://vercel.com/font) and Geist Mono by default.
+
+We have global fonts cache to avoid loading the same fonts multiple times.
+
+If your environment supports top-level await, you can load the fonts in global scope and reuse the fonts array.
+
+```tsx
+const fonts = [
+  {
+    name: "Inter",
+    data: await fetch("/fonts/Inter-Regular.ttf").then((res) => res.arrayBuffer()),
+    style: "normal",
+    weight: 400,
+  },
+];
+
+new ImageResponse(<OgImage />, { fonts });
+```
+
+If your environment doesn't support top-level await, or just want the fonts to get garbage collected after initialization, you can load the fonts like this.
+
+```tsx
+let isFontsLoaded = false;
+
+export function GET(request: Request) {
+  const fonts = [];
+
+  if (!isFontsLoaded) {
+    isFontsLoaded = true;
+    fonts = [
+      {
+        name: "Inter",
+        data: await fetch("/fonts/Inter-Regular.ttf").then((res) => res.arrayBuffer()),
+        style: "normal",
+        weight: 400,
+      },
+    ];
+  }
+
+  return new ImageResponse(<OgImage />, { fonts });
+}
+```

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@takumi-rs/image-response",
+  "type": "module",
+  "version": "0.29.2",
+  "author": {
+    "email": "me@kane.tw",
+    "name": "Kane Wang",
+    "url": "https://kane.tw"
+  },
+  "repository": {
+    "url": "git+https://github.com/kane50613/takumi.git"
+  },
+  "peerDependencies": {
+    "@takumi-rs/core": "^0.29.2",
+    "@takumi-rs/helpers": "^0.29.2"
+  },
+  "devDependencies": {
+    "@takumi-rs/core": "workspace:*",
+    "@takumi-rs/helpers": "workspace:*",
+    "@types/bun": "catalog:",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "tsup": "^8.5.0",
+    "typescript": "catalog:"
+  },
+  "scripts": {
+    "build": "tsup-node src/index.ts --minify --dts --format esm,cjs --no-splitting"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,74 @@
+import { Renderer, type RenderOptions } from "@takumi-rs/core";
+import { fromJsx } from "@takumi-rs/helpers/jsx";
+import type { HeadersInit } from "bun";
+import type { ReactNode } from "react";
+
+const renderer = new Renderer();
+
+const fontLoadMarker = new WeakSet<Font>();
+
+export type Font = Parameters<typeof renderer.loadFontAsync>[0];
+
+export type ImageResponseOptions = RenderOptions &
+  ResponseInit & {
+    headers?: HeadersInit;
+    signal?: AbortSignal;
+    fonts?: Font[];
+  };
+
+const defaultOptions: ImageResponseOptions = {
+  width: 1200,
+  height: 630,
+  format: "webp",
+};
+
+export function loadFonts(fonts: Font[]) {
+  const fontsToLoad = fonts.filter((font) => !fontLoadMarker.has(font));
+
+  for (const font of fontsToLoad) {
+    fontLoadMarker.add(font);
+  }
+
+  return renderer.loadFontsAsync(fontsToLoad);
+}
+
+function createStream(component: ReactNode, options?: ImageResponseOptions) {
+  return new ReadableStream({
+    async start(controller) {
+      try {
+        if (options?.fonts) await loadFonts(options.fonts);
+
+        const node = await fromJsx(component);
+        const image = await renderer.renderAsync(
+          node,
+          options ?? defaultOptions,
+          options?.signal,
+        );
+
+        controller.enqueue(image);
+        controller.close();
+      } catch (error) {
+        controller.error(error);
+      }
+    },
+  });
+}
+
+export default class ImageResponse extends Response {
+  constructor(component: ReactNode, options?: ImageResponseOptions) {
+    const stream = createStream(component, options);
+    const headers = new Headers(options?.headers);
+
+    headers.set("Content-Type", "image/webp");
+
+    if (!headers.get("cache-control")) {
+      headers.set("cache-control", "public, max-age=0, must-revalidate");
+    }
+
+    super(stream, {
+      status: options?.status,
+      statusText: options?.statusText,
+      headers,
+    });
+  }
+}

package/tests/image-response.test.tsx

@@ -0,0 +1,13 @@
+import { describe, expect, test } from "bun:test";
+import ImageResponse from "../src";
+
+describe("ImageResponse", () => {
+  test("should not crash", async () => {
+    const response = new ImageResponse(<div>Hello</div>);
+
+    expect(response.status).toBe(200);
+    expect(response.headers.get("content-type")).toBe("image/webp");
+
+    expect(await response.arrayBuffer()).toBeDefined();
+  });
+});

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    // Environment setup & latest features
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}