@ethercorps/sveltekit-og 4.3.0-next.6 → 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 +4 -0
- package/dist/helpers/error-handler.js +9 -0
- package/dist/helpers/response.d.ts +20 -0
- package/dist/helpers/response.js +39 -0
- package/dist/helpers/to-html.d.ts +10 -0
- package/dist/helpers/to-html.js +10 -0
- package/dist/helpers/toJSX.js +2 -2
- package/dist/image-response.js +13 -25
- 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 +16 -0
- package/dist/takumi/fonts.js +15 -0
- package/dist/takumi/image-response.d.ts +6 -0
- package/dist/takumi/image-response.js +33 -0
- package/dist/takumi/index.d.ts +5 -0
- package/dist/takumi/index.js +4 -0
- package/dist/takumi/render.d.ts +4 -0
- package/dist/takumi/render.js +30 -0
- package/dist/takumi/renderer.d.ts +6 -0
- package/dist/takumi/renderer.js +35 -0
- package/dist/takumi/types.d.ts +64 -0
- package/dist/takumi/types.js +1 -0
- package/package.json +130 -113
- 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/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";
|
|
@@ -11,6 +13,8 @@ export declare const ErrorCodes: {
|
|
|
11
13
|
readonly RESVG_RENDER_FAILED: "RESVG_RENDER_FAILED";
|
|
12
14
|
readonly SATORI_INIT_FAILED: "SATORI_INIT_FAILED";
|
|
13
15
|
readonly EMOJI_LOAD_FAILED: "EMOJI_LOAD_FAILED";
|
|
16
|
+
readonly TAKUMI_INIT_FAILED: "TAKUMI_INIT_FAILED";
|
|
17
|
+
readonly TAKUMI_RENDER_FAILED: "TAKUMI_RENDER_FAILED";
|
|
14
18
|
readonly UNKNOWN_ERROR: "UNKNOWN_ERROR";
|
|
15
19
|
};
|
|
16
20
|
/**
|
|
@@ -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",
|
|
@@ -16,6 +23,8 @@ export const ErrorCodes = {
|
|
|
16
23
|
RESVG_RENDER_FAILED: "RESVG_RENDER_FAILED",
|
|
17
24
|
SATORI_INIT_FAILED: "SATORI_INIT_FAILED",
|
|
18
25
|
EMOJI_LOAD_FAILED: "EMOJI_LOAD_FAILED",
|
|
26
|
+
TAKUMI_INIT_FAILED: "TAKUMI_INIT_FAILED",
|
|
27
|
+
TAKUMI_RENDER_FAILED: "TAKUMI_RENDER_FAILED",
|
|
19
28
|
UNKNOWN_ERROR: "UNKNOWN_ERROR",
|
|
20
29
|
};
|
|
21
30
|
/**
|
|
@@ -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
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Component } from "svelte";
|
|
2
|
+
/**
|
|
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`.
|
|
6
|
+
*/
|
|
7
|
+
export declare function renderComponentToHtml(component: Component<any>, props?: Record<string, unknown>): {
|
|
8
|
+
head: string;
|
|
9
|
+
body: string;
|
|
10
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { render } from "svelte/server";
|
|
2
|
+
import { handleSync, ErrorCodes } from "./error-handler.js";
|
|
3
|
+
/**
|
|
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`.
|
|
7
|
+
*/
|
|
8
|
+
export function renderComponentToHtml(component, props = {}) {
|
|
9
|
+
return handleSync(() => render(component, { props }), ErrorCodes.VNODE_CREATION_FAILED, "Failed to render Svelte component to HTML");
|
|
10
|
+
}
|
package/dist/helpers/toJSX.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { render } from "svelte/server";
|
|
2
1
|
import { html } from "satori-html";
|
|
3
2
|
import { handleSync, ErrorCodes } from "./error-handler.js";
|
|
3
|
+
import { renderComponentToHtml } from "./to-html.js";
|
|
4
4
|
function svelteComponentToHTML(component, props = {}) {
|
|
5
5
|
return handleSync(() => {
|
|
6
|
-
const { body, head } =
|
|
6
|
+
const { body, head } = renderComponentToHtml(component, props);
|
|
7
7
|
return html(body + head);
|
|
8
8
|
}, ErrorCodes.VNODE_CREATION_FAILED, "Failed to render Svelte component to HTML");
|
|
9
9
|
}
|
package/dist/image-response.js
CHANGED
|
@@ -1,31 +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
|
-
});
|
|
19
|
-
super(body, {
|
|
20
|
-
headers: {
|
|
21
|
-
"Content-Type": `image/${extended_options.format}${extended_options.format === "svg" ? "+xml" : ""}`,
|
|
22
|
-
"Cache-Control": extended_options.debug
|
|
23
|
-
? "no-cache, no-store"
|
|
24
|
-
: "public, immutable, no-transform, max-age=31536000",
|
|
25
|
-
...extended_options.headers,
|
|
26
|
-
},
|
|
27
|
-
status: extended_options.status || DEFAULT_STATUS_CODE,
|
|
28
|
-
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,
|
|
29
16
|
});
|
|
17
|
+
super(body, init);
|
|
30
18
|
}
|
|
31
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
|
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { FontDetails } from "takumi-js/node";
|
|
2
|
+
import { BaseFont } from "../fonts.js";
|
|
3
|
+
import type { MayBePromise } from "../types.js";
|
|
4
|
+
type ByteBuf = Uint8Array | ArrayBuffer | Buffer;
|
|
5
|
+
/** Takumi-native font descriptor; data is the bytes or a lazy loader, like takumi-js wants. */
|
|
6
|
+
export interface TakumiFontDescriptor {
|
|
7
|
+
name?: string;
|
|
8
|
+
data: ByteBuf | (() => MayBePromise<ByteBuf>);
|
|
9
|
+
weight?: number;
|
|
10
|
+
style?: FontDetails["style"];
|
|
11
|
+
}
|
|
12
|
+
/** What the takumi path accepts: our GoogleFont/CustomFont, or a raw takumi descriptor. */
|
|
13
|
+
export type TakumiFontInput = BaseFont | TakumiFontDescriptor;
|
|
14
|
+
/** Normalize mixed font inputs to FontDetails for registerFont, loaders run in parallel. */
|
|
15
|
+
export declare function resolveTakumiFonts(fonts: TakumiFontInput[]): Promise<FontDetails[]>;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { BaseFont } from "../fonts.js";
|
|
2
|
+
import { handleAsync, ErrorCodes } from "../helpers/error-handler.js";
|
|
3
|
+
async function normalizeFont(font) {
|
|
4
|
+
if (font instanceof BaseFont) {
|
|
5
|
+
// our font classes lazily load + cache through the data getter
|
|
6
|
+
const data = (await font.data);
|
|
7
|
+
return { name: font.name, data, weight: font.weight, style: font.style };
|
|
8
|
+
}
|
|
9
|
+
const data = typeof font.data === "function" ? await font.data() : await font.data;
|
|
10
|
+
return { name: font.name, data, weight: font.weight, style: font.style };
|
|
11
|
+
}
|
|
12
|
+
/** Normalize mixed font inputs to FontDetails for registerFont, loaders run in parallel. */
|
|
13
|
+
export async function resolveTakumiFonts(fonts) {
|
|
14
|
+
return handleAsync(() => Promise.all(fonts.map(normalizeFont)), ErrorCodes.FONT_LOAD_FAILED, "Failed to resolve fonts for Takumi");
|
|
15
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { Component, ComponentProps } from "svelte";
|
|
2
|
+
import type { TakumiImageResponseOptions } from "./types.js";
|
|
3
|
+
/** OG image rendered by Takumi. Takes an HTML string or a Svelte component. */
|
|
4
|
+
export declare class ImageResponse<T extends string | Component<any>> extends Response {
|
|
5
|
+
constructor(element: T, options?: TakumiImageResponseOptions, props?: T extends Component<any> ? ComponentProps<T> : never);
|
|
6
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { createTakumiImage } from "./render.js";
|
|
2
|
+
import { buildImageResponse } from "../helpers/response.js";
|
|
3
|
+
const DEFAULT_OPTIONS = {
|
|
4
|
+
width: 1200,
|
|
5
|
+
height: 630,
|
|
6
|
+
format: "png",
|
|
7
|
+
emoji: "twemoji",
|
|
8
|
+
debug: false,
|
|
9
|
+
};
|
|
10
|
+
// takumi can also encode jpeg/webp/ico/raw, plus svg as text
|
|
11
|
+
const CONTENT_TYPES = {
|
|
12
|
+
png: "image/png",
|
|
13
|
+
jpeg: "image/jpeg",
|
|
14
|
+
webp: "image/webp",
|
|
15
|
+
ico: "image/x-icon",
|
|
16
|
+
raw: "application/octet-stream",
|
|
17
|
+
svg: "image/svg+xml",
|
|
18
|
+
};
|
|
19
|
+
/** OG image rendered by Takumi. Takes an HTML string or a Svelte component. */
|
|
20
|
+
export class ImageResponse extends Response {
|
|
21
|
+
constructor(element, options, props) {
|
|
22
|
+
const opts = { ...DEFAULT_OPTIONS, ...options };
|
|
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,
|
|
30
|
+
});
|
|
31
|
+
super(body, init);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { ImageResponse } from "./image-response.js";
|
|
2
|
+
export type { TakumiImageResponseOptions, TakumiImageOptions, TakumiResponseOptions, TakumiFormat, } from "./types.js";
|
|
3
|
+
export type { TakumiFontInput, TakumiFontDescriptor } from "./fonts.js";
|
|
4
|
+
export { resolveTakumiFonts } from "./fonts.js";
|
|
5
|
+
export { GoogleFont, CustomFont, loadGoogleFont } from "../fonts.js";
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { Component } from "svelte";
|
|
2
|
+
import type { TakumiImageOptions } from "./types.js";
|
|
3
|
+
/** Render an HTML string or Svelte component to image bytes (or an svg string). */
|
|
4
|
+
export declare function createTakumiImage(element: string | Component, options: TakumiImageOptions, props?: Record<string, unknown>): Promise<Uint8Array | string>;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { render as takumiRender, renderSvg } from "takumi-js";
|
|
2
|
+
import { renderComponentToHtml } from "../helpers/to-html.js";
|
|
3
|
+
import { useTakumiRenderer, registerTakumiFonts } from "./renderer.js";
|
|
4
|
+
import { resolveTakumiFonts } from "./fonts.js";
|
|
5
|
+
import { createLogger } from "../helpers/logger.js";
|
|
6
|
+
import { handleAsync, handleSync, ErrorCodes } from "../helpers/error-handler.js";
|
|
7
|
+
function elementToHtml(element, props) {
|
|
8
|
+
if (typeof element === "string")
|
|
9
|
+
return element.replaceAll("\n", "").trim();
|
|
10
|
+
// head carries css injected via <svelte:options css="injected" />, so it goes first
|
|
11
|
+
const { head, body } = renderComponentToHtml(element, props);
|
|
12
|
+
return head + body;
|
|
13
|
+
}
|
|
14
|
+
/** Render an HTML string or Svelte component to image bytes (or an svg string). */
|
|
15
|
+
export async function createTakumiImage(element, options, props) {
|
|
16
|
+
const log = createLogger(options.debug ?? false);
|
|
17
|
+
const html = handleSync(() => elementToHtml(element, props), ErrorCodes.VNODE_CREATION_FAILED, "Failed to create HTML for Takumi");
|
|
18
|
+
const renderer = await useTakumiRenderer(options.debug);
|
|
19
|
+
if (options.fonts?.length) {
|
|
20
|
+
const fonts = await resolveTakumiFonts(options.fonts);
|
|
21
|
+
await registerTakumiFonts(renderer, fonts);
|
|
22
|
+
}
|
|
23
|
+
const { width, height, format = "png", quality, stylesheets, emoji } = options;
|
|
24
|
+
const shared = { renderer: renderer, width, height, stylesheets, emoji };
|
|
25
|
+
log.debug(`Rendering ${format.toUpperCase()} with Takumi`);
|
|
26
|
+
if (format === "svg") {
|
|
27
|
+
return handleAsync(() => renderSvg(html, shared), ErrorCodes.TAKUMI_RENDER_FAILED, "Failed to render SVG with Takumi");
|
|
28
|
+
}
|
|
29
|
+
return handleAsync(() => takumiRender(html, { ...shared, format, quality }), ErrorCodes.TAKUMI_RENDER_FAILED, "Failed to render image with Takumi");
|
|
30
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { Renderer as NodeRenderer, FontDetails } from "takumi-js/node";
|
|
2
|
+
export type TakumiRenderer = NodeRenderer;
|
|
3
|
+
/** Lazily creates and caches the Takumi renderer for the current runtime. */
|
|
4
|
+
export declare function useTakumiRenderer(_debug?: boolean): Promise<TakumiRenderer>;
|
|
5
|
+
/** Register each font once, keyed by name/weight/style. */
|
|
6
|
+
export declare function registerTakumiFonts(renderer: TakumiRenderer, fonts: FontDetails[]): Promise<void>;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import autoModule, { init as initTakumiWasm, Renderer } from "takumi-js/wasm";
|
|
2
|
+
import { handleAsync, ErrorCodes } from "../helpers/error-handler.js";
|
|
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.
|
|
5
|
+
let rendererPromise;
|
|
6
|
+
const registeredFontKeys = new Set();
|
|
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();
|
|
20
|
+
}
|
|
21
|
+
/** Lazily creates and caches the Takumi renderer for the current runtime. */
|
|
22
|
+
export async function useTakumiRenderer(_debug = false) {
|
|
23
|
+
rendererPromise ??= initRenderer();
|
|
24
|
+
return rendererPromise;
|
|
25
|
+
}
|
|
26
|
+
/** Register each font once, keyed by name/weight/style. */
|
|
27
|
+
export async function registerTakumiFonts(renderer, fonts) {
|
|
28
|
+
for (const font of fonts) {
|
|
29
|
+
const key = `${font.name ?? "unnamed"}-${font.weight ?? "auto"}-${font.style ?? "normal"}`;
|
|
30
|
+
if (registeredFontKeys.has(key))
|
|
31
|
+
continue;
|
|
32
|
+
await handleAsync(() => renderer.registerFont(font), ErrorCodes.FONT_LOAD_FAILED, `Failed to register Takumi font: ${key}`);
|
|
33
|
+
registeredFontKeys.add(key);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import type { EmojiType } from "takumi-js/helpers/emoji";
|
|
2
|
+
import type { OutputFormat } from "takumi-js/node";
|
|
3
|
+
import type { TakumiFontInput } from "./fonts.js";
|
|
4
|
+
/** Static output formats Takumi can encode, plus vector `svg`. */
|
|
5
|
+
export type TakumiFormat = OutputFormat | "svg";
|
|
6
|
+
export type TakumiImageOptions = {
|
|
7
|
+
/**
|
|
8
|
+
* Width of the image.
|
|
9
|
+
* @default 1200
|
|
10
|
+
* */
|
|
11
|
+
width?: number;
|
|
12
|
+
/**
|
|
13
|
+
* Height of the image.
|
|
14
|
+
* @default 630
|
|
15
|
+
* */
|
|
16
|
+
height?: number;
|
|
17
|
+
/**
|
|
18
|
+
* Output format.
|
|
19
|
+
* @default png
|
|
20
|
+
* */
|
|
21
|
+
format?: TakumiFormat;
|
|
22
|
+
/**
|
|
23
|
+
* Quality for lossy formats (jpeg, lossy webp), 0-100.
|
|
24
|
+
* */
|
|
25
|
+
quality?: number;
|
|
26
|
+
/**
|
|
27
|
+
* Fonts to register. Accepts this library's `GoogleFont`/`CustomFont`
|
|
28
|
+
* helpers or raw Takumi font descriptors. If omitted, Takumi's built-in
|
|
29
|
+
* sans-serif is used.
|
|
30
|
+
* */
|
|
31
|
+
fonts?: TakumiFontInput[];
|
|
32
|
+
/**
|
|
33
|
+
* Extra CSS stylesheets applied before rendering.
|
|
34
|
+
* */
|
|
35
|
+
stylesheets?: string[];
|
|
36
|
+
/**
|
|
37
|
+
* Emoji provider, or `"from-font"` to source emoji glyphs from loaded fonts.
|
|
38
|
+
* @default twemoji
|
|
39
|
+
* */
|
|
40
|
+
emoji?: EmojiType | "from-font";
|
|
41
|
+
/**
|
|
42
|
+
* Enable debug logging.
|
|
43
|
+
* @default false
|
|
44
|
+
* */
|
|
45
|
+
debug?: boolean;
|
|
46
|
+
};
|
|
47
|
+
export type TakumiResponseOptions = {
|
|
48
|
+
/**
|
|
49
|
+
* Response status code.
|
|
50
|
+
* @default 200
|
|
51
|
+
* */
|
|
52
|
+
status?: number;
|
|
53
|
+
/**
|
|
54
|
+
* Response status text.
|
|
55
|
+
* @default Success
|
|
56
|
+
* */
|
|
57
|
+
statusText?: string;
|
|
58
|
+
/**
|
|
59
|
+
* Response headers.
|
|
60
|
+
* */
|
|
61
|
+
headers?: Record<string, string>;
|
|
62
|
+
};
|
|
63
|
+
/** Options for the Takumi `ImageResponse`. */
|
|
64
|
+
export type TakumiImageResponseOptions = TakumiImageOptions & TakumiResponseOptions;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,114 +1,131 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
2
|
+
"name": "@ethercorps/sveltekit-og",
|
|
3
|
+
"version": "4.3.0-next.9",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"homepage": "https://sveltekit-og.dev",
|
|
6
|
+
"repository": "github:ethercorps/sveltekit-og",
|
|
7
|
+
"funding": "https://github.com/sponsors/ethercorps",
|
|
8
|
+
"author": "Shivam Meena <https://github.com/theetherGit>",
|
|
9
|
+
"description": "Dynamically generate Open Graph images from an HTML, CSS template or Svelte component using fast and efficient conversion from HTML > SVG > PNG",
|
|
10
|
+
"contributors": [
|
|
11
|
+
{
|
|
12
|
+
"name": "Shivam Meena",
|
|
13
|
+
"github": "https://github.com/theetherGit"
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
"name": "Jason",
|
|
17
|
+
"github": "https://github.com/jasongitmail"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"name": "Mihkel Martin Kasterpalu",
|
|
21
|
+
"github": "https://github.com/MihkelMK"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"name": "Luke Parke",
|
|
25
|
+
"github": "https://github.com/LukasParke"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"name": "Willow (GHOST)",
|
|
29
|
+
"github": "https://github.com/ghostdevv"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"name": "Minseo Lee",
|
|
33
|
+
"github": "https://github.com/quiple"
|
|
34
|
+
}
|
|
35
|
+
],
|
|
36
|
+
"scripts": {
|
|
37
|
+
"dev": "vite dev",
|
|
38
|
+
"build": "vite build && npm run package",
|
|
39
|
+
"build:examples": "pnpm -F \"./examples/**\" --parallel --color build",
|
|
40
|
+
"check:examples": "pnpm install -r",
|
|
41
|
+
"preview": "vite preview",
|
|
42
|
+
"package": "svelte-kit sync && svelte-package && publint",
|
|
43
|
+
"prepublishOnly": "pnpm run package",
|
|
44
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
45
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
46
|
+
"test": "vitest",
|
|
47
|
+
"bench": "vitest bench --run",
|
|
48
|
+
"bench:save": "vitest bench --run --outputJson benchmarks/baseline.json",
|
|
49
|
+
"bench:compare": "vitest bench --run --compare benchmarks/baseline.json",
|
|
50
|
+
"bench:snapshot": "node scripts/bench-snapshot.mjs",
|
|
51
|
+
"lint": "oxlint . && eslint .",
|
|
52
|
+
"format": "prettier --plugin-search-dir . --write .",
|
|
53
|
+
"publishBeta": "npm publish --tag beta"
|
|
54
|
+
},
|
|
55
|
+
"exports": {
|
|
56
|
+
".": {
|
|
57
|
+
"types": "./dist/index.d.ts",
|
|
58
|
+
"svelte": "./dist/index.js",
|
|
59
|
+
"import": "./dist/index.js"
|
|
60
|
+
},
|
|
61
|
+
"./fonts": {
|
|
62
|
+
"types": "./dist/fonts.d.ts",
|
|
63
|
+
"import": "./dist/fonts.js"
|
|
64
|
+
},
|
|
65
|
+
"./takumi": {
|
|
66
|
+
"types": "./dist/takumi/index.d.ts",
|
|
67
|
+
"svelte": "./dist/takumi/index.js",
|
|
68
|
+
"import": "./dist/takumi/index.js"
|
|
69
|
+
},
|
|
70
|
+
"./plugin": {
|
|
71
|
+
"types": "./dist/plugin.d.ts",
|
|
72
|
+
"import": "./dist/plugin.js"
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
"files": [
|
|
76
|
+
"dist",
|
|
77
|
+
"!dist/**/*.test.*",
|
|
78
|
+
"!dist/**/*.spec.*"
|
|
79
|
+
],
|
|
80
|
+
"devDependencies": {
|
|
81
|
+
"@eslint/compat": "^2.0.3",
|
|
82
|
+
"@eslint/js": "^9.39.3",
|
|
83
|
+
"@sveltejs/adapter-vercel": "^5.10.3",
|
|
84
|
+
"@sveltejs/kit": "^2.53.4",
|
|
85
|
+
"@sveltejs/package": "^2.5.7",
|
|
86
|
+
"@sveltejs/vite-plugin-svelte": "^4.0.4",
|
|
87
|
+
"@types/node": "^24.11.0",
|
|
88
|
+
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
|
89
|
+
"@typescript-eslint/parser": "^5.62.0",
|
|
90
|
+
"css-tree": "^2.3.1",
|
|
91
|
+
"eslint": "^8.57.1",
|
|
92
|
+
"eslint-config-prettier": "^8.10.2",
|
|
93
|
+
"eslint-plugin-oxlint": "^1.55.0",
|
|
94
|
+
"eslint-plugin-svelte": "^2.46.1",
|
|
95
|
+
"globals": "^16.5.0",
|
|
96
|
+
"oxlint": "^1.55.0",
|
|
97
|
+
"prettier": "^3.8.1",
|
|
98
|
+
"prettier-plugin-svelte": "^3.5.1",
|
|
99
|
+
"prettier-plugin-tailwindcss": "^0.6.14",
|
|
100
|
+
"publint": "^0.1.16",
|
|
101
|
+
"rollup-plugin-visualizer": "^5.14.0",
|
|
102
|
+
"svelte": "^5.53.10",
|
|
103
|
+
"svelte-check": "^4.4.5",
|
|
104
|
+
"tslib": "^2.8.1",
|
|
105
|
+
"typescript": "^5.9.3",
|
|
106
|
+
"typescript-eslint": "^8.57.0",
|
|
107
|
+
"vite": "^5.4.21",
|
|
108
|
+
"takumi-js": "2.0.0-beta.14",
|
|
109
|
+
"vitest": "^1.6.1"
|
|
110
|
+
},
|
|
111
|
+
"main": "./dist/index.js",
|
|
112
|
+
"svelte": "./dist/index.js",
|
|
113
|
+
"types": "./dist/index.d.ts",
|
|
114
|
+
"type": "module",
|
|
115
|
+
"dependencies": {
|
|
116
|
+
"@resvg/resvg-wasm": "^2.6.2",
|
|
117
|
+
"satori": "^0.25.0",
|
|
118
|
+
"satori-html": "0.3.2",
|
|
119
|
+
"std-env": "^4.1.0",
|
|
120
|
+
"unwasm": "^0.5.3"
|
|
121
|
+
},
|
|
122
|
+
"peerDependencies": {
|
|
123
|
+
"@sveltejs/kit": ">=2.0.0",
|
|
124
|
+
"takumi-js": "^2.0.0-beta.14"
|
|
125
|
+
},
|
|
126
|
+
"peerDependenciesMeta": {
|
|
127
|
+
"takumi-js": {
|
|
128
|
+
"optional": true
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
@@ -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
|
|
File without changes
|