@ethercorps/sveltekit-og 4.3.0-next.7 → 4.3.0-next.9
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/dist/helpers/error-handler.d.ts +2 -0
- package/dist/helpers/error-handler.js +7 -0
- package/dist/helpers/response.d.ts +20 -0
- package/dist/helpers/response.js +39 -0
- package/dist/helpers/to-html.d.ts +3 -6
- package/dist/helpers/to-html.js +3 -6
- package/dist/image-response.js +13 -39
- package/dist/providers/instances.js +3 -9
- package/dist/providers/resvg/index.js +12 -0
- package/dist/providers/satori/edge.js +5 -9
- package/dist/takumi/fonts.d.ts +3 -13
- package/dist/takumi/fonts.js +2 -5
- package/dist/takumi/image-response.d.ts +1 -4
- package/dist/takumi/image-response.js +11 -40
- package/dist/takumi/index.js +1 -1
- package/dist/takumi/render.d.ts +1 -4
- package/dist/takumi/render.js +2 -8
- package/dist/takumi/renderer.d.ts +2 -6
- package/dist/takumi/renderer.js +19 -23
- package/package.json +1 -1
- package/dist/providers/resvg/edge.js +0 -8
- package/dist/providers/resvg/node.d.ts +0 -6
- package/dist/providers/resvg/node.js +0 -13
- package/dist/providers/resvg/resvg.wasm +0 -0
- package/dist/providers/satori/yoga.wasm +0 -0
- package/dist/providers/takumi/edge.d.ts +0 -6
- package/dist/providers/takumi/edge.js +0 -16
- package/dist/providers/takumi/node.d.ts +0 -6
- package/dist/providers/takumi/node.js +0 -10
- package/dist/providers/takumi/takumi.wasm +0 -0
- /package/dist/providers/resvg/{edge.d.ts → index.d.ts} +0 -0
|
@@ -3,6 +3,8 @@ export declare class ImageResponseError extends Error {
|
|
|
3
3
|
originalError?: Error | undefined;
|
|
4
4
|
constructor(message: string, code: string, originalError?: Error | undefined);
|
|
5
5
|
}
|
|
6
|
+
/** Coerce anything thrown into an ImageResponseError, keeping existing ones as-is. */
|
|
7
|
+
export declare function toImageResponseError(error: unknown): ImageResponseError;
|
|
6
8
|
export declare const ErrorCodes: {
|
|
7
9
|
readonly FONT_LOAD_FAILED: "FONT_LOAD_FAILED";
|
|
8
10
|
readonly VNODE_CREATION_FAILED: "VNODE_CREATION_FAILED";
|
|
@@ -8,6 +8,13 @@ export class ImageResponseError extends Error {
|
|
|
8
8
|
this.name = "ImageResponseError";
|
|
9
9
|
}
|
|
10
10
|
}
|
|
11
|
+
/** Coerce anything thrown into an ImageResponseError, keeping existing ones as-is. */
|
|
12
|
+
export function toImageResponseError(error) {
|
|
13
|
+
if (error instanceof ImageResponseError)
|
|
14
|
+
return error;
|
|
15
|
+
const err = error instanceof Error ? error : new Error(String(error));
|
|
16
|
+
return new ImageResponseError(err.message, ErrorCodes.UNKNOWN_ERROR, err);
|
|
17
|
+
}
|
|
11
18
|
export const ErrorCodes = {
|
|
12
19
|
FONT_LOAD_FAILED: "FONT_LOAD_FAILED",
|
|
13
20
|
VNODE_CREATION_FAILED: "VNODE_CREATION_FAILED",
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
type ImageProducer = () => Promise<Uint8Array | string>;
|
|
2
|
+
interface BuildOptions {
|
|
3
|
+
/** uppercased format, used in logs e.g. "PNG" */
|
|
4
|
+
label: string;
|
|
5
|
+
contentType: string;
|
|
6
|
+
debug: boolean;
|
|
7
|
+
headers?: Record<string, string>;
|
|
8
|
+
status?: number;
|
|
9
|
+
statusText?: string;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Shared body + response init for both engines' ImageResponse. Streams the image
|
|
13
|
+
* out as bytes (a Response stream can't take a raw string), with consistent
|
|
14
|
+
* cache headers and error handling.
|
|
15
|
+
*/
|
|
16
|
+
export declare function buildImageResponse(produce: ImageProducer, opts: BuildOptions): {
|
|
17
|
+
body: ReadableStream;
|
|
18
|
+
init: ResponseInit;
|
|
19
|
+
};
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { createLogger } from "./logger.js";
|
|
2
|
+
import { handleAsync, toImageResponseError, ErrorCodes } from "./error-handler.js";
|
|
3
|
+
import { formatBytes } from "./utils.js";
|
|
4
|
+
/**
|
|
5
|
+
* Shared body + response init for both engines' ImageResponse. Streams the image
|
|
6
|
+
* out as bytes (a Response stream can't take a raw string), with consistent
|
|
7
|
+
* cache headers and error handling.
|
|
8
|
+
*/
|
|
9
|
+
export function buildImageResponse(produce, opts) {
|
|
10
|
+
const log = createLogger(opts.debug);
|
|
11
|
+
const body = new ReadableStream({
|
|
12
|
+
async start(controller) {
|
|
13
|
+
try {
|
|
14
|
+
const out = await handleAsync(produce, ErrorCodes.UNKNOWN_ERROR, `Failed to generate ${opts.label}`);
|
|
15
|
+
const bytes = typeof out === "string" ? new TextEncoder().encode(out) : out;
|
|
16
|
+
log.info(`Generated ${opts.label}: ${formatBytes(bytes.byteLength)}`);
|
|
17
|
+
controller.enqueue(bytes);
|
|
18
|
+
controller.close();
|
|
19
|
+
}
|
|
20
|
+
catch (error) {
|
|
21
|
+
const err = toImageResponseError(error);
|
|
22
|
+
log.error("Failed to create image response:", err.message);
|
|
23
|
+
controller.error(err);
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
});
|
|
27
|
+
const init = {
|
|
28
|
+
headers: {
|
|
29
|
+
"Content-Type": opts.contentType,
|
|
30
|
+
"Cache-Control": opts.debug
|
|
31
|
+
? "no-cache, no-store"
|
|
32
|
+
: "public, immutable, no-transform, max-age=31536000",
|
|
33
|
+
...opts.headers,
|
|
34
|
+
},
|
|
35
|
+
status: opts.status || 200,
|
|
36
|
+
statusText: opts.statusText || "Success",
|
|
37
|
+
};
|
|
38
|
+
return { body, init };
|
|
39
|
+
}
|
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
import type { Component } from "svelte";
|
|
2
2
|
/**
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* `satori-html`, while the takumi path passes an HTML string to its renderer.
|
|
7
|
-
* Components that need their styles inlined should use
|
|
8
|
-
* `<svelte:options css="injected" />` so the CSS lands in `head`.
|
|
3
|
+
* Render a Svelte component to its SSR html parts. Shared by both engines — satori
|
|
4
|
+
* feeds body+head to satori-html, takumi passes the html string straight in. Use
|
|
5
|
+
* `<svelte:options css="injected" />` to get component styles into `head`.
|
|
9
6
|
*/
|
|
10
7
|
export declare function renderComponentToHtml(component: Component<any>, props?: Record<string, unknown>): {
|
|
11
8
|
head: string;
|
package/dist/helpers/to-html.js
CHANGED
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
import { render } from "svelte/server";
|
|
2
2
|
import { handleSync, ErrorCodes } from "./error-handler.js";
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
* `satori-html`, while the takumi path passes an HTML string to its renderer.
|
|
8
|
-
* Components that need their styles inlined should use
|
|
9
|
-
* `<svelte:options css="injected" />` so the CSS lands in `head`.
|
|
4
|
+
* Render a Svelte component to its SSR html parts. Shared by both engines — satori
|
|
5
|
+
* feeds body+head to satori-html, takumi passes the html string straight in. Use
|
|
6
|
+
* `<svelte:options css="injected" />` to get component styles into `head`.
|
|
10
7
|
*/
|
|
11
8
|
export function renderComponentToHtml(component, props = {}) {
|
|
12
9
|
return handleSync(() => render(component, { props }), ErrorCodes.VNODE_CREATION_FAILED, "Failed to render Svelte component to HTML");
|
package/dist/image-response.js
CHANGED
|
@@ -1,45 +1,19 @@
|
|
|
1
|
-
import { DEFAULT_OPTIONS
|
|
1
|
+
import { DEFAULT_OPTIONS } from "./helpers/defaults.js";
|
|
2
2
|
import { createPng, createSvg } from "./helpers/create.js";
|
|
3
|
-
import {
|
|
4
|
-
import { handleAsync, ImageResponseError, ErrorCodes } from "./helpers/error-handler.js";
|
|
5
|
-
import { formatBytes } from "./helpers/utils.js";
|
|
3
|
+
import { buildImageResponse } from "./helpers/response.js";
|
|
6
4
|
export class ImageResponse extends Response {
|
|
7
5
|
constructor(element, options, props) {
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}), ErrorCodes.UNKNOWN_ERROR, `Failed to generate ${extended_options.format?.toUpperCase()}`));
|
|
19
|
-
log.debug(buffer.length.toLocaleString());
|
|
20
|
-
log.info(`Generated ${extended_options.format.toUpperCase()}: ${formatBytes(buffer.length)}`);
|
|
21
|
-
controller.enqueue(buffer);
|
|
22
|
-
controller.close();
|
|
23
|
-
}
|
|
24
|
-
catch (error) {
|
|
25
|
-
const err = error instanceof ImageResponseError
|
|
26
|
-
? error
|
|
27
|
-
: new ImageResponseError(error instanceof Error ? error.message : String(error), ErrorCodes.UNKNOWN_ERROR, error instanceof Error ? error : new Error(String(error)));
|
|
28
|
-
log.error("Failed to create image response:", err.message);
|
|
29
|
-
controller.error(err);
|
|
30
|
-
}
|
|
31
|
-
},
|
|
32
|
-
});
|
|
33
|
-
super(body, {
|
|
34
|
-
headers: {
|
|
35
|
-
"Content-Type": `image/${extended_options.format}${extended_options.format === "svg" ? "+xml" : ""}`,
|
|
36
|
-
"Cache-Control": extended_options.debug
|
|
37
|
-
? "no-cache, no-store"
|
|
38
|
-
: "public, immutable, no-transform, max-age=31536000",
|
|
39
|
-
...extended_options.headers,
|
|
40
|
-
},
|
|
41
|
-
status: extended_options.status || DEFAULT_STATUS_CODE,
|
|
42
|
-
statusText: extended_options.statusText || DEFAULT_STATUS_TEXT,
|
|
6
|
+
const opts = Object.assign({ ...DEFAULT_OPTIONS }, options);
|
|
7
|
+
const format = opts.format ?? "png";
|
|
8
|
+
const createImage = format === "png" ? createPng : createSvg;
|
|
9
|
+
const { body, init } = buildImageResponse(() => createImage(element, opts, { props }), {
|
|
10
|
+
label: format.toUpperCase(),
|
|
11
|
+
contentType: `image/${format}${format === "svg" ? "+xml" : ""}`,
|
|
12
|
+
debug: opts.debug ?? false,
|
|
13
|
+
headers: opts.headers,
|
|
14
|
+
status: opts.status,
|
|
15
|
+
statusText: opts.statusText,
|
|
43
16
|
});
|
|
17
|
+
super(body, init);
|
|
44
18
|
}
|
|
45
19
|
}
|
|
@@ -16,15 +16,9 @@ export async function useResvg(debug = false) {
|
|
|
16
16
|
return resvgInstance.instance.Resvg;
|
|
17
17
|
}
|
|
18
18
|
log.debug("Initializing ReSVG WASM");
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
// can statically analyse them and emit the `?module` wasm chunk correctly.
|
|
23
|
-
// Burying these inside nested async callbacks breaks wasm bundling on Cloudflare.
|
|
24
|
-
const moduleImport = isWorkerLikeRuntime
|
|
25
|
-
? import("./resvg/edge.js")
|
|
26
|
-
: import("./resvg/node.js");
|
|
27
|
-
resvgInstance.instance = await handleAsync(() => moduleImport.then((m) => m.default), ErrorCodes.RESVG_INIT_FAILED, "Failed to import ReSVG module");
|
|
19
|
+
// one provider for every runtime now (wasm comes from the dep via ?module).
|
|
20
|
+
// keep this a direct import() so the bundler can emit the wasm chunk.
|
|
21
|
+
resvgInstance.instance = await handleAsync(() => import("./resvg/index.js").then((m) => m.default), ErrorCodes.RESVG_INIT_FAILED, "Failed to import ReSVG module");
|
|
28
22
|
await handleAsync(() => resvgInstance.instance.initWasmPromise, ErrorCodes.RESVG_INIT_FAILED, "Failed to initialize ReSVG WASM");
|
|
29
23
|
return resvgInstance.instance.Resvg;
|
|
30
24
|
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Resvg as _Resvg, initWasm } from "@resvg/resvg-wasm";
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
// load resvg's wasm from the dep (it exports ./index_bg.wasm) via ?module, so we
|
|
5
|
+
// don't vendor a copy. precompiled module works on node + workers alike.
|
|
6
|
+
initWasmPromise: initWasm(
|
|
7
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
8
|
+
// @ts-ignore
|
|
9
|
+
import("@resvg/resvg-wasm/index_bg.wasm?module").then((r) => r.default || r)
|
|
10
|
+
),
|
|
11
|
+
Resvg: _Resvg,
|
|
12
|
+
};
|
|
@@ -1,16 +1,12 @@
|
|
|
1
1
|
import _satori, { init } from "satori/standalone";
|
|
2
2
|
|
|
3
|
-
//
|
|
4
|
-
//
|
|
5
|
-
//
|
|
6
|
-
//
|
|
7
|
-
// `satori/standalone` exposes `init()` so we can hand it a pre-compiled
|
|
8
|
-
// WebAssembly.Module instead. Importing the vendored yoga.wasm with `?module`
|
|
9
|
-
// makes the consumer bundler emit a real CompiledWasm module, so no runtime
|
|
10
|
-
// byte compilation happens. Mirrors providers/resvg/edge.js.
|
|
3
|
+
// the default satori entry compiles yoga's wasm at runtime, which workers block
|
|
4
|
+
// ("Wasm code generation disallowed by embedder"). satori/standalone takes a
|
|
5
|
+
// precompiled module via init(), so we hand it satori's own yoga wasm (it exports
|
|
6
|
+
// ./yoga.wasm) through ?module — no vendored copy. mirrors providers/resvg.
|
|
11
7
|
export default {
|
|
12
8
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
13
9
|
// @ts-ignore
|
|
14
|
-
initWasmPromise: init(import("
|
|
10
|
+
initWasmPromise: init(import("satori/yoga.wasm?module").then((r) => r.default || r)),
|
|
15
11
|
satori: _satori,
|
|
16
12
|
};
|
package/dist/takumi/fonts.d.ts
CHANGED
|
@@ -1,26 +1,16 @@
|
|
|
1
1
|
import type { FontDetails } from "takumi-js/node";
|
|
2
2
|
import { BaseFont } from "../fonts.js";
|
|
3
3
|
import type { MayBePromise } from "../types.js";
|
|
4
|
-
/** Font bytes Takumi accepts for registration. */
|
|
5
4
|
type ByteBuf = Uint8Array | ArrayBuffer | Buffer;
|
|
6
|
-
/**
|
|
7
|
-
* A Takumi-native font descriptor. `data` may be the bytes directly or a lazy
|
|
8
|
-
* loader returning them — matching `takumi-js`'s own font option shape.
|
|
9
|
-
*/
|
|
5
|
+
/** Takumi-native font descriptor; data is the bytes or a lazy loader, like takumi-js wants. */
|
|
10
6
|
export interface TakumiFontDescriptor {
|
|
11
7
|
name?: string;
|
|
12
8
|
data: ByteBuf | (() => MayBePromise<ByteBuf>);
|
|
13
9
|
weight?: number;
|
|
14
10
|
style?: FontDetails["style"];
|
|
15
11
|
}
|
|
16
|
-
/**
|
|
17
|
-
* Accepted font inputs on the Takumi path: this library's `GoogleFont` /
|
|
18
|
-
* `CustomFont` helpers (any `BaseFont`) or a raw Takumi descriptor.
|
|
19
|
-
*/
|
|
12
|
+
/** What the takumi path accepts: our GoogleFont/CustomFont, or a raw takumi descriptor. */
|
|
20
13
|
export type TakumiFontInput = BaseFont | TakumiFontDescriptor;
|
|
21
|
-
/**
|
|
22
|
-
* Resolves mixed font inputs into Takumi `FontDetails` ready for
|
|
23
|
-
* `renderer.registerFont`. Loaders run in parallel.
|
|
24
|
-
*/
|
|
14
|
+
/** Normalize mixed font inputs to FontDetails for registerFont, loaders run in parallel. */
|
|
25
15
|
export declare function resolveTakumiFonts(fonts: TakumiFontInput[]): Promise<FontDetails[]>;
|
|
26
16
|
export {};
|
package/dist/takumi/fonts.js
CHANGED
|
@@ -2,17 +2,14 @@ import { BaseFont } from "../fonts.js";
|
|
|
2
2
|
import { handleAsync, ErrorCodes } from "../helpers/error-handler.js";
|
|
3
3
|
async function normalizeFont(font) {
|
|
4
4
|
if (font instanceof BaseFont) {
|
|
5
|
-
//
|
|
5
|
+
// our font classes lazily load + cache through the data getter
|
|
6
6
|
const data = (await font.data);
|
|
7
7
|
return { name: font.name, data, weight: font.weight, style: font.style };
|
|
8
8
|
}
|
|
9
9
|
const data = typeof font.data === "function" ? await font.data() : await font.data;
|
|
10
10
|
return { name: font.name, data, weight: font.weight, style: font.style };
|
|
11
11
|
}
|
|
12
|
-
/**
|
|
13
|
-
* Resolves mixed font inputs into Takumi `FontDetails` ready for
|
|
14
|
-
* `renderer.registerFont`. Loaders run in parallel.
|
|
15
|
-
*/
|
|
12
|
+
/** Normalize mixed font inputs to FontDetails for registerFont, loaders run in parallel. */
|
|
16
13
|
export async function resolveTakumiFonts(fonts) {
|
|
17
14
|
return handleAsync(() => Promise.all(fonts.map(normalizeFont)), ErrorCodes.FONT_LOAD_FAILED, "Failed to resolve fonts for Takumi");
|
|
18
15
|
}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import type { Component, ComponentProps } from "svelte";
|
|
2
2
|
import type { TakumiImageResponseOptions } from "./types.js";
|
|
3
|
-
/**
|
|
4
|
-
* Generates an Open Graph image with the Takumi engine and returns it as a
|
|
5
|
-
* `Response`. Accepts an HTML string or a Svelte component (with props).
|
|
6
|
-
*/
|
|
3
|
+
/** OG image rendered by Takumi. Takes an HTML string or a Svelte component. */
|
|
7
4
|
export declare class ImageResponse<T extends string | Component<any>> extends Response {
|
|
8
5
|
constructor(element: T, options?: TakumiImageResponseOptions, props?: T extends Component<any> ? ComponentProps<T> : never);
|
|
9
6
|
}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import { createTakumiImage } from "./render.js";
|
|
2
|
-
import {
|
|
3
|
-
import { handleAsync, ImageResponseError, ErrorCodes } from "../helpers/error-handler.js";
|
|
4
|
-
import { formatBytes } from "../helpers/utils.js";
|
|
2
|
+
import { buildImageResponse } from "../helpers/response.js";
|
|
5
3
|
const DEFAULT_OPTIONS = {
|
|
6
4
|
width: 1200,
|
|
7
5
|
height: 630,
|
|
@@ -9,6 +7,7 @@ const DEFAULT_OPTIONS = {
|
|
|
9
7
|
emoji: "twemoji",
|
|
10
8
|
debug: false,
|
|
11
9
|
};
|
|
10
|
+
// takumi can also encode jpeg/webp/ico/raw, plus svg as text
|
|
12
11
|
const CONTENT_TYPES = {
|
|
13
12
|
png: "image/png",
|
|
14
13
|
jpeg: "image/jpeg",
|
|
@@ -17,46 +16,18 @@ const CONTENT_TYPES = {
|
|
|
17
16
|
raw: "application/octet-stream",
|
|
18
17
|
svg: "image/svg+xml",
|
|
19
18
|
};
|
|
20
|
-
/**
|
|
21
|
-
* Generates an Open Graph image with the Takumi engine and returns it as a
|
|
22
|
-
* `Response`. Accepts an HTML string or a Svelte component (with props).
|
|
23
|
-
*/
|
|
19
|
+
/** OG image rendered by Takumi. Takes an HTML string or a Svelte component. */
|
|
24
20
|
export class ImageResponse extends Response {
|
|
25
21
|
constructor(element, options, props) {
|
|
26
22
|
const opts = { ...DEFAULT_OPTIONS, ...options };
|
|
27
|
-
const
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
// renderSvg returns a string; raster formats return bytes. A
|
|
35
|
-
// Response body stream must emit Uint8Array chunks.
|
|
36
|
-
const bytes = typeof output === "string" ? new TextEncoder().encode(output) : output;
|
|
37
|
-
log.info(`Generated ${format.toUpperCase()}: ${formatBytes(bytes.byteLength)}`);
|
|
38
|
-
controller.enqueue(bytes);
|
|
39
|
-
controller.close();
|
|
40
|
-
}
|
|
41
|
-
catch (error) {
|
|
42
|
-
const err = error instanceof ImageResponseError
|
|
43
|
-
? error
|
|
44
|
-
: new ImageResponseError(error instanceof Error ? error.message : String(error), ErrorCodes.UNKNOWN_ERROR, error instanceof Error ? error : new Error(String(error)));
|
|
45
|
-
log.error("Failed to create Takumi image response:", err.message);
|
|
46
|
-
controller.error(err);
|
|
47
|
-
}
|
|
48
|
-
},
|
|
49
|
-
});
|
|
50
|
-
super(body, {
|
|
51
|
-
headers: {
|
|
52
|
-
"Content-Type": CONTENT_TYPES[format],
|
|
53
|
-
"Cache-Control": opts.debug
|
|
54
|
-
? "no-cache, no-store"
|
|
55
|
-
: "public, immutable, no-transform, max-age=31536000",
|
|
56
|
-
...opts.headers,
|
|
57
|
-
},
|
|
58
|
-
status: opts.status || 200,
|
|
59
|
-
statusText: opts.statusText || "Success",
|
|
23
|
+
const { body, init } = buildImageResponse(() => createTakumiImage(element, opts, props), {
|
|
24
|
+
label: opts.format.toUpperCase(),
|
|
25
|
+
contentType: CONTENT_TYPES[opts.format],
|
|
26
|
+
debug: opts.debug,
|
|
27
|
+
headers: opts.headers,
|
|
28
|
+
status: opts.status,
|
|
29
|
+
statusText: opts.statusText,
|
|
60
30
|
});
|
|
31
|
+
super(body, init);
|
|
61
32
|
}
|
|
62
33
|
}
|
package/dist/takumi/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { ImageResponse } from "./image-response.js";
|
|
2
2
|
export { resolveTakumiFonts } from "./fonts.js";
|
|
3
|
-
//
|
|
3
|
+
// re-export the font helpers so the takumi path works from one import
|
|
4
4
|
export { GoogleFont, CustomFont, loadGoogleFont } from "../fonts.js";
|
package/dist/takumi/render.d.ts
CHANGED
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
import type { Component } from "svelte";
|
|
2
2
|
import type { TakumiImageOptions } from "./types.js";
|
|
3
|
-
/**
|
|
4
|
-
* Renders an HTML string or Svelte component to image bytes (or an SVG string)
|
|
5
|
-
* using a cached, font-registered Takumi renderer for the current runtime.
|
|
6
|
-
*/
|
|
3
|
+
/** Render an HTML string or Svelte component to image bytes (or an svg string). */
|
|
7
4
|
export declare function createTakumiImage(element: string | Component, options: TakumiImageOptions, props?: Record<string, unknown>): Promise<Uint8Array | string>;
|
package/dist/takumi/render.js
CHANGED
|
@@ -7,15 +7,11 @@ import { handleAsync, handleSync, ErrorCodes } from "../helpers/error-handler.js
|
|
|
7
7
|
function elementToHtml(element, props) {
|
|
8
8
|
if (typeof element === "string")
|
|
9
9
|
return element.replaceAll("\n", "").trim();
|
|
10
|
-
//
|
|
11
|
-
// `<svelte:options css="injected" />`, so it goes first.
|
|
10
|
+
// head carries css injected via <svelte:options css="injected" />, so it goes first
|
|
12
11
|
const { head, body } = renderComponentToHtml(element, props);
|
|
13
12
|
return head + body;
|
|
14
13
|
}
|
|
15
|
-
/**
|
|
16
|
-
* Renders an HTML string or Svelte component to image bytes (or an SVG string)
|
|
17
|
-
* using a cached, font-registered Takumi renderer for the current runtime.
|
|
18
|
-
*/
|
|
14
|
+
/** Render an HTML string or Svelte component to image bytes (or an svg string). */
|
|
19
15
|
export async function createTakumiImage(element, options, props) {
|
|
20
16
|
const log = createLogger(options.debug ?? false);
|
|
21
17
|
const html = handleSync(() => elementToHtml(element, props), ErrorCodes.VNODE_CREATION_FAILED, "Failed to create HTML for Takumi");
|
|
@@ -25,8 +21,6 @@ export async function createTakumiImage(element, options, props) {
|
|
|
25
21
|
await registerTakumiFonts(renderer, fonts);
|
|
26
22
|
}
|
|
27
23
|
const { width, height, format = "png", quality, stylesheets, emoji } = options;
|
|
28
|
-
// `renderer` is typed as the native Renderer; on edge it's the wasm Renderer,
|
|
29
|
-
// which is structurally compatible for takumi-js's managed render.
|
|
30
24
|
const shared = { renderer: renderer, width, height, stylesheets, emoji };
|
|
31
25
|
log.debug(`Rendering ${format.toUpperCase()} with Takumi`);
|
|
32
26
|
if (format === "svg") {
|
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
import type { Renderer as NodeRenderer, FontDetails } from "takumi-js/node";
|
|
2
|
-
/** Either backend's Renderer; both expose `render`/`renderSvg`/`registerFont`. */
|
|
3
2
|
export type TakumiRenderer = NodeRenderer;
|
|
4
3
|
/** Lazily creates and caches the Takumi renderer for the current runtime. */
|
|
5
|
-
export declare function useTakumiRenderer(
|
|
6
|
-
/**
|
|
7
|
-
* Registers each font on the renderer once. Keyed by name/weight/style so the
|
|
8
|
-
* same face isn't re-registered across requests.
|
|
9
|
-
*/
|
|
4
|
+
export declare function useTakumiRenderer(_debug?: boolean): Promise<TakumiRenderer>;
|
|
5
|
+
/** Register each font once, keyed by name/weight/style. */
|
|
10
6
|
export declare function registerTakumiFonts(renderer: TakumiRenderer, fonts: FontDetails[]): Promise<void>;
|
package/dist/takumi/renderer.js
CHANGED
|
@@ -1,33 +1,29 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { createLogger } from "../helpers/logger.js";
|
|
1
|
+
import autoModule, { init as initTakumiWasm, Renderer } from "takumi-js/wasm";
|
|
3
2
|
import { handleAsync, ErrorCodes } from "../helpers/error-handler.js";
|
|
4
|
-
//
|
|
5
|
-
//
|
|
6
|
-
// track which have already been registered to avoid duplicate work.
|
|
3
|
+
// keep one renderer alive across requests, same as the satori/resvg instances.
|
|
4
|
+
// fonts registered on it stick around, so we dedupe by key.
|
|
7
5
|
let rendererPromise;
|
|
8
6
|
const registeredFontKeys = new Set();
|
|
9
|
-
async function initRenderer(
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
7
|
+
async function initRenderer() {
|
|
8
|
+
await handleAsync(async () => {
|
|
9
|
+
// reuse the wasm that ships with takumi-js instead of vendoring our own.
|
|
10
|
+
// @takumi-rs/wasm/auto picks the right binary per runtime (workerd, edge,
|
|
11
|
+
// node, ?module) via export conditions. this is the same dance takumi-js
|
|
12
|
+
// does internally.
|
|
13
|
+
const resolved = typeof autoModule === "function" ? await autoModule() : await autoModule;
|
|
14
|
+
const input = resolved && typeof resolved === "object" && "default" in resolved
|
|
15
|
+
? resolved.default
|
|
16
|
+
: resolved;
|
|
17
|
+
await initTakumiWasm(input ? { module_or_path: input } : undefined);
|
|
18
|
+
}, ErrorCodes.TAKUMI_INIT_FAILED, "Failed to initialize Takumi WASM");
|
|
19
|
+
return new Renderer();
|
|
21
20
|
}
|
|
22
21
|
/** Lazily creates and caches the Takumi renderer for the current runtime. */
|
|
23
|
-
export async function useTakumiRenderer(
|
|
24
|
-
rendererPromise ??= initRenderer(
|
|
22
|
+
export async function useTakumiRenderer(_debug = false) {
|
|
23
|
+
rendererPromise ??= initRenderer();
|
|
25
24
|
return rendererPromise;
|
|
26
25
|
}
|
|
27
|
-
/**
|
|
28
|
-
* Registers each font on the renderer once. Keyed by name/weight/style so the
|
|
29
|
-
* same face isn't re-registered across requests.
|
|
30
|
-
*/
|
|
26
|
+
/** Register each font once, keyed by name/weight/style. */
|
|
31
27
|
export async function registerTakumiFonts(renderer, fonts) {
|
|
32
28
|
for (const font of fonts) {
|
|
33
29
|
const key = `${font.name ?? "unnamed"}-${font.weight ?? "auto"}-${font.style ?? "normal"}`;
|
package/package.json
CHANGED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { Resvg as _Resvg, initWasm } from "@resvg/resvg-wasm";
|
|
2
|
-
|
|
3
|
-
export default {
|
|
4
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
5
|
-
// @ts-ignore
|
|
6
|
-
initWasmPromise: initWasm(import("./resvg.wasm?module").then((r) => r.default || r)),
|
|
7
|
-
Resvg: _Resvg,
|
|
8
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { Resvg as _Resvg, initWasm } from "@resvg/resvg-wasm";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Fetch will be called only once whenever you load this file.
|
|
5
|
-
* In vercel serverless functions, fetch will run on cold start.
|
|
6
|
-
* In Node.js (Stateful e.g. Linux servers), Fetch will run once when you start your server.
|
|
7
|
-
* */
|
|
8
|
-
const resvgWasm = fetch("https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm");
|
|
9
|
-
|
|
10
|
-
export default {
|
|
11
|
-
initWasmPromise: initWasm(resvgWasm),
|
|
12
|
-
Resvg: _Resvg,
|
|
13
|
-
};
|
|
Binary file
|
|
Binary file
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { init, Renderer } from "takumi-js/wasm";
|
|
2
|
-
|
|
3
|
-
// Worker-like runtimes (Cloudflare Workers, Vercel Edge) can't compile WASM at
|
|
4
|
-
// runtime, so we hand the wasm-bindgen `init` a pre-compiled module. Importing
|
|
5
|
-
// the vendored takumi.wasm with `?module` makes the consumer bundler emit a real
|
|
6
|
-
// CompiledWasm module — mirrors providers/resvg/edge.js and providers/satori/edge.js.
|
|
7
|
-
export default {
|
|
8
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
9
|
-
// @ts-ignore
|
|
10
|
-
initWasmPromise: init({
|
|
11
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
12
|
-
// @ts-ignore
|
|
13
|
-
module_or_path: import("./takumi.wasm?module").then((r) => r.default || r),
|
|
14
|
-
}),
|
|
15
|
-
Renderer,
|
|
16
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { Renderer } from "takumi-js/node";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Native Node.js backend (@takumi-rs/core). The renderer is a native addon, so
|
|
5
|
-
* there is no WASM to initialize — construction is synchronous.
|
|
6
|
-
* */
|
|
7
|
-
export default {
|
|
8
|
-
initWasmPromise: Promise.resolve(),
|
|
9
|
-
Renderer,
|
|
10
|
-
};
|
|
Binary file
|
|
File without changes
|