@takumi-rs/image-response 2.0.0-beta.8 → 2.0.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +6 -122
  2. package/package.json +5 -2
package/README.md CHANGED
@@ -1,135 +1,19 @@
1
1
  # @takumi-rs/image-response
2
2
 
3
- A universal `ImageResponse` implementation for Takumi in Next.js and other environments.
3
+ > **Migrated to [`takumi-js/response`](https://www.npmjs.com/package/takumi-js).**
4
4
 
5
- Checkout the migration guide [From Next.js ImageResponse](https://takumi.kane.tw/docs/upgrade/v1) for more details.
6
-
7
- ## Installation
5
+ This package has moved into `takumi-js`. Install `takumi-js` and import `ImageResponse` from `takumi-js/response`:
8
6
 
9
7
  ```bash
10
- npm install @takumi-rs/image-response
11
- ```
12
-
13
- ## Usage
14
-
15
- ```tsx
16
- import ImageResponse from "@takumi-rs/image-response";
17
-
18
- export function GET(request: Request) {
19
- return new ImageResponse(<OgImage />, {
20
- width: 1200,
21
- height: 630,
22
- format: "webp",
23
- headers: {
24
- "Cache-Control": "public, immutable, max-age=31536000",
25
- },
26
- });
27
- }
8
+ npm install takumi-js
28
9
  ```
29
10
 
30
- Pass custom fonts per response; identical fonts are registered once and reused automatically.
31
-
32
11
  ```tsx
33
- import { ImageResponse } from "@takumi-rs/image-response";
12
+ import { ImageResponse } from "takumi-js/response";
34
13
 
35
14
  export function GET() {
36
- return new ImageResponse(<OgImage />, {
37
- fonts: [
38
- {
39
- data: () => fetch("/fonts/Inter-Regular.ttf").then((res) => res.arrayBuffer()),
40
- name: "Inter",
41
- },
42
- ],
43
- });
15
+ return new ImageResponse(<OgImage />, { width: 1200, height: 630 });
44
16
  }
45
17
  ```
46
18
 
47
- ### Fonts
48
-
49
- Takumi comes with full-axis [Geist](https://vercel.com/font) and Geist Mono by default.
50
-
51
- We have a global fonts cache to avoid loading the same fonts multiple times.
52
-
53
- If your environment supports top-level await, you can load the fonts in global scope and reuse the fonts array.
54
-
55
- ```tsx
56
- const fonts = [
57
- {
58
- name: "Inter",
59
- data: await fetch("/fonts/Inter-Regular.ttf").then((res) => res.arrayBuffer()),
60
- style: "normal",
61
- weight: 400,
62
- },
63
- ];
64
-
65
- new ImageResponse(<OgImage />, { fonts });
66
- ```
67
-
68
- If your environment doesn't support top-level await, you can pass a lazy `data` loader instead.
69
-
70
- ```tsx
71
- export function GET(request: Request) {
72
- return new ImageResponse(<OgImage />, {
73
- fonts: [
74
- {
75
- name: "Inter",
76
- data: () => fetch("/fonts/Inter-Regular.ttf").then((res) => res.arrayBuffer()),
77
- style: "normal",
78
- weight: 400,
79
- },
80
- ],
81
- });
82
- }
83
- ```
84
-
85
- Images can likewise be provided up front via `images`, keyed by `src`, each with bytes or a sync/async loader.
86
-
87
- ### Bring-Your-Own-Renderer (BYOR)
88
-
89
- If you want to use your own renderer instance, you can pass it to the `ImageResponse` constructor.
90
-
91
- ```tsx
92
- import { Renderer } from "@takumi-rs/core";
93
-
94
- const renderer = new Renderer();
95
-
96
- new ImageResponse(<OgImage />, { renderer });
97
- ```
98
-
99
- ### JSX Options
100
-
101
- You can pass the JSX options to the `ImageResponse` constructor.
102
-
103
- ```tsx
104
- new ImageResponse(<OgImage />, {
105
- jsx: {
106
- defaultStyles: false,
107
- },
108
- });
109
- ```
110
-
111
- ### Error Handling
112
-
113
- `ImageResponse` exposes a `ready` promise that resolves when rendering succeeds and rejects when rendering fails.
114
-
115
- ```tsx
116
- const response = new ImageResponse(<OgImage />);
117
-
118
- await response.ready;
119
- return response;
120
- ```
121
-
122
- You can also provide `onError`, a notification hook that runs after rendering fails. It's for side effects like logging; its return value is ignored and the response stream still errors, so it cannot substitute a fallback image. To serve a fallback, catch the `ready` rejection and return your own response.
123
-
124
- ```tsx
125
- const response = new ImageResponse(<OgImage />, {
126
- onError: (error) => console.error(error),
127
- });
128
-
129
- try {
130
- await response.ready;
131
- return response;
132
- } catch {
133
- return new Response("Failed to generate image", { status: 500 });
134
- }
135
- ```
19
+ See the [migration guide](https://takumi.kane.tw/docs/upgrade/v2) and the [`ImageResponse` reference](https://takumi.kane.tw/docs/image-response) for details.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@takumi-rs/image-response",
3
- "version": "2.0.0-beta.8",
3
+ "version": "2.0.0-rc.0",
4
4
  "license": "(MIT OR Apache-2.0)",
5
5
  "author": {
6
6
  "name": "Kane Wang",
@@ -44,11 +44,14 @@
44
44
  "publish-lint": "attw --pack . && publint --strict ."
45
45
  },
46
46
  "dependencies": {
47
- "takumi-js": "2.0.0-beta.8"
47
+ "takumi-js": "2.0.0-rc.0"
48
48
  },
49
49
  "devDependencies": {
50
50
  "@types/bun": "^1.3.14",
51
51
  "tsdown": "^0.22.3",
52
52
  "unrun": "^0.3.1"
53
+ },
54
+ "engines": {
55
+ "node": ">=18"
53
56
  }
54
57
  }