takumi-js 2.0.0-rc.9 → 2.0.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.
- package/README.md +29 -26
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/dist/{render-DROrjWYa.cjs → render-B-wtWqlt.cjs} +3 -1
- package/dist/{render-DHSfgkWg.mjs → render-dwxU78no.mjs} +3 -1
- package/dist/response.cjs +2 -1
- package/dist/response.mjs +2 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
|
|
4
4
|
# takumi-js
|
|
5
5
|
|
|
6
|
-
**
|
|
7
|
-
OG cards, banners, and lightweight animations from one Rust engine
|
|
6
|
+
**Render JSX to SVG or images. Drop-in next/og replacement.**
|
|
7
|
+
OG cards, banners, and lightweight animations from one Rust engine, no headless browser required.
|
|
8
8
|
|
|
9
9
|
[Documentation](https://takumi.kane.tw/docs/) · [Playground](https://takumi.kane.tw/playground)
|
|
10
10
|
|
|
@@ -34,23 +34,11 @@ const image = await render(
|
|
|
34
34
|
await writeFile("./output.png", image);
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
-
## Entry points
|
|
38
|
-
|
|
39
|
-
| Import | Description |
|
|
40
|
-
| :------------------------ | :---------------------------------------------------------------------- |
|
|
41
|
-
| `takumi-js` | `render()` + all shared types |
|
|
42
|
-
| `takumi-js/response` | `ImageResponse` class — drop-in compatible with `next/og` |
|
|
43
|
-
| `takumi-js/node` | Re-exports `@takumi-rs/core` (native napi-rs bindings) |
|
|
44
|
-
| `takumi-js/wasm` | Re-exports `@takumi-rs/wasm` + `init()` for manual WASM initialization |
|
|
45
|
-
| `takumi-js/helpers` | Node tree utilities (`fromJsx`, `fromHtml`, `extractEmojis`, …) |
|
|
46
|
-
| `takumi-js/helpers/jsx` | `fromJsx` — convert a React element to a Takumi node tree + stylesheets |
|
|
47
|
-
| `takumi-js/helpers/emoji` | `extractEmojis` — replace emoji characters with image nodes |
|
|
48
|
-
|
|
49
37
|
## Runtime detection
|
|
50
38
|
|
|
51
39
|
`takumi-js` selects the backend for the runtime:
|
|
52
40
|
|
|
53
|
-
- **Node.js** → native `@takumi-rs/core` (napi-rs)
|
|
41
|
+
- **Node.js / Bun** → native `@takumi-rs/core` (napi-rs)
|
|
54
42
|
- **Next.js Edge / Cloudflare Workers / browsers** → `@takumi-rs/wasm`
|
|
55
43
|
|
|
56
44
|
Override it with a `module` option on `render()`, or import `takumi-js/wasm` directly.
|
|
@@ -72,28 +60,43 @@ export function GET() {
|
|
|
72
60
|
}
|
|
73
61
|
```
|
|
74
62
|
|
|
75
|
-
###
|
|
63
|
+
### Render SVG
|
|
76
64
|
|
|
77
65
|
```tsx
|
|
78
|
-
import {
|
|
79
|
-
import { fromJsx } from "takumi-js/helpers/jsx";
|
|
66
|
+
import { renderSvg } from "takumi-js";
|
|
80
67
|
import { writeFile } from "node:fs/promises";
|
|
81
68
|
|
|
82
|
-
const
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
<div tw="w-full h-full flex items-center justify-center">
|
|
86
|
-
<div tw="w-32 h-32 bg-blue-500 animate-spin rounded-lg" />
|
|
69
|
+
const svg = await renderSvg(
|
|
70
|
+
<div tw="w-full h-full flex items-center justify-center bg-gradient-to-b from-blue-100 to-red-50">
|
|
71
|
+
<h1 tw="text-6xl font-bold">Hello from Takumi</h1>
|
|
87
72
|
</div>,
|
|
73
|
+
{ width: 1200, height: 630 },
|
|
88
74
|
);
|
|
89
75
|
|
|
90
|
-
|
|
76
|
+
await writeFile("./output.svg", svg);
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Animated WebP
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
import { renderAnimation } from "takumi-js";
|
|
83
|
+
import { writeFile } from "node:fs/promises";
|
|
84
|
+
|
|
85
|
+
const animation = await renderAnimation({
|
|
91
86
|
width: 400,
|
|
92
87
|
height: 400,
|
|
93
88
|
fps: 30,
|
|
94
89
|
format: "webp",
|
|
95
|
-
|
|
96
|
-
|
|
90
|
+
scenes: [
|
|
91
|
+
{
|
|
92
|
+
durationMs: 1000,
|
|
93
|
+
node: (
|
|
94
|
+
<div tw="w-full h-full flex items-center justify-center">
|
|
95
|
+
<div tw="w-32 h-32 bg-blue-500 animate-spin rounded-lg" />
|
|
96
|
+
</div>
|
|
97
|
+
),
|
|
98
|
+
},
|
|
99
|
+
],
|
|
97
100
|
});
|
|
98
101
|
|
|
99
102
|
await writeFile("./output.webp", animation);
|
package/dist/index.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
-
const require_render = require("./render-
|
|
2
|
+
const require_render = require("./render-B-wtWqlt.cjs");
|
|
3
3
|
exports.render = require_render.render;
|
|
4
4
|
exports.renderAnimation = require_render.renderAnimation;
|
|
5
5
|
exports.renderSvg = require_render.renderSvg;
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as renderAnimation, r as renderSvg, t as render } from "./render-
|
|
1
|
+
import { n as renderAnimation, r as renderSvg, t as render } from "./render-dwxU78no.mjs";
|
|
2
2
|
export { render, renderAnimation, renderSvg };
|
|
@@ -51,13 +51,15 @@ async function resolveContent(element, options) {
|
|
|
51
51
|
/** Resolves the render's `images` option into concrete entries via {@link prepareImages}. */
|
|
52
52
|
async function collectImages(node, options) {
|
|
53
53
|
const images = options?.images;
|
|
54
|
-
const { sources, fetchCache, fetch, timeout, cache } = Array.isArray(images) ? { sources: images } : images ?? {};
|
|
54
|
+
const { sources, fetchCache, fetch, timeout, maxBytes, allowUrl, cache } = Array.isArray(images) ? { sources: images } : images ?? {};
|
|
55
55
|
const prepared = await (0, _takumi_rs_helpers.prepareImages)({
|
|
56
56
|
node,
|
|
57
57
|
sources,
|
|
58
58
|
fetchCache,
|
|
59
59
|
fetch,
|
|
60
60
|
timeout,
|
|
61
|
+
maxBytes,
|
|
62
|
+
allowUrl,
|
|
61
63
|
signal: options?.signal
|
|
62
64
|
});
|
|
63
65
|
return cache ? prepared.map((image) => ({
|
|
@@ -51,13 +51,15 @@ async function resolveContent(element, options) {
|
|
|
51
51
|
/** Resolves the render's `images` option into concrete entries via {@link prepareImages}. */
|
|
52
52
|
async function collectImages(node, options) {
|
|
53
53
|
const images = options?.images;
|
|
54
|
-
const { sources, fetchCache, fetch, timeout, cache } = Array.isArray(images) ? { sources: images } : images ?? {};
|
|
54
|
+
const { sources, fetchCache, fetch, timeout, maxBytes, allowUrl, cache } = Array.isArray(images) ? { sources: images } : images ?? {};
|
|
55
55
|
const prepared = await prepareImages({
|
|
56
56
|
node,
|
|
57
57
|
sources,
|
|
58
58
|
fetchCache,
|
|
59
59
|
fetch,
|
|
60
60
|
timeout,
|
|
61
|
+
maxBytes,
|
|
62
|
+
allowUrl,
|
|
61
63
|
signal: options?.signal
|
|
62
64
|
});
|
|
63
65
|
return cache ? prepared.map((image) => ({
|
package/dist/response.cjs
CHANGED
|
@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
|
|
|
2
2
|
__esModule: { value: true },
|
|
3
3
|
[Symbol.toStringTag]: { value: "Module" }
|
|
4
4
|
});
|
|
5
|
-
const require_render = require("./render-
|
|
5
|
+
const require_render = require("./render-B-wtWqlt.cjs");
|
|
6
6
|
//#region src/response/index.ts
|
|
7
7
|
const contentTypeMap = {
|
|
8
8
|
png: "image/png",
|
|
@@ -22,6 +22,7 @@ function buildImageResponse(element, options) {
|
|
|
22
22
|
resolveReady = resolve;
|
|
23
23
|
rejectReady = reject;
|
|
24
24
|
});
|
|
25
|
+
ready.catch(() => {});
|
|
25
26
|
const stream = new ReadableStream({ async start(controller) {
|
|
26
27
|
try {
|
|
27
28
|
const image = await require_render.render(element, options);
|
package/dist/response.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as render } from "./render-
|
|
1
|
+
import { t as render } from "./render-dwxU78no.mjs";
|
|
2
2
|
//#region src/response/index.ts
|
|
3
3
|
const contentTypeMap = {
|
|
4
4
|
png: "image/png",
|
|
@@ -18,6 +18,7 @@ function buildImageResponse(element, options) {
|
|
|
18
18
|
resolveReady = resolve;
|
|
19
19
|
rejectReady = reject;
|
|
20
20
|
});
|
|
21
|
+
ready.catch(() => {});
|
|
21
22
|
const stream = new ReadableStream({ async start(controller) {
|
|
22
23
|
try {
|
|
23
24
|
const image = await render(element, options);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "takumi-js",
|
|
3
|
-
"version": "2.0.0
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "All-in-one Takumi package for Node.js and WebAssembly runtimes.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"css",
|
|
@@ -202,9 +202,9 @@
|
|
|
202
202
|
"publish-lint": "attw --pack . && publint --strict ."
|
|
203
203
|
},
|
|
204
204
|
"dependencies": {
|
|
205
|
-
"@takumi-rs/core": "2.0.0
|
|
206
|
-
"@takumi-rs/helpers": "2.0.0
|
|
207
|
-
"@takumi-rs/wasm": "2.0.0
|
|
205
|
+
"@takumi-rs/core": "2.0.0",
|
|
206
|
+
"@takumi-rs/helpers": "2.0.0",
|
|
207
|
+
"@takumi-rs/wasm": "2.0.0"
|
|
208
208
|
},
|
|
209
209
|
"devDependencies": {
|
|
210
210
|
"@types/bun": "^1.3.14",
|