@takumi-rs/image-response 2.0.0-beta.9 → 2.0.0-rc.1
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.
- package/README.md +6 -122
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,135 +1,19 @@
|
|
|
1
1
|
# @takumi-rs/image-response
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> **Migrated to [`takumi-js/response`](https://www.npmjs.com/package/takumi-js).**
|
|
4
4
|
|
|
5
|
-
|
|
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
|
|
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 "
|
|
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
|
-
|
|
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-
|
|
3
|
+
"version": "2.0.0-rc.1",
|
|
4
4
|
"license": "(MIT OR Apache-2.0)",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Kane Wang",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"publish-lint": "attw --pack . && publint --strict ."
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"takumi-js": "2.0.0-
|
|
47
|
+
"takumi-js": "2.0.0-rc.1"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@types/bun": "^1.3.14",
|