@ethercorps/sveltekit-og 4.3.0-next.7 → 4.3.0

package/README.md

@@ -4,7 +4,12 @@
 
 # SvelteKit Open Graph Image Generation
 
-Dynamically generate Open Graph images from an HTML+CSS template or Svelte component using fast and efficient conversion from HTML > SVG > PNG. Based on [Satori](https://github.com/vercel/satori#documentation). No headless browser required.
+Dynamically generate Open Graph images from an HTML+CSS template or Svelte component. No headless browser required.
+
+Pick the rendering engine that fits your needs:
+
+- **Satori** (default) — HTML → SVG → PNG, based on [Satori](https://github.com/vercel/satori#documentation).
+- **[Takumi](https://takumi.kane.tw)** — a Rust/WASM engine with more output formats (`webp`, `jpeg`, `ico`, `svg`, …) and a built-in font, available from `@ethercorps/sveltekit-og/takumi` (v4.3.0+).
 
 ## Table of Contents
 
@@ -35,6 +40,8 @@ pnpm install @ethercorps/sveltekit-og
 
 For detailed usage instructions, please see the [Getting Started](https://sveltekit-og.dev/docs/getting-started) section of our documentation.
 
+Prefer the Takumi engine — more output formats and a built-in font? See the [Takumi Engine](https://sveltekit-og.dev/docs/usage/takumi) guide.
+
 ## Examples
 
 - **ImageResponse**: [_source_](/src/routes/+server.ts) · [_demo_](https://vercel.sveltekit-og.dev)
@@ -57,6 +64,7 @@ This project is licensed under the [MIT License](LICENSE).
 This project would not be possible without the following projects:
 
 - [Satori & @vercel/og](https://github.com/vercel/satori)
+- [Takumi](https://takumi.kane.tw)
 - [Noto by Google Fonts](https://fonts.google.com/noto)
 - [fineshopdesign](https://github.com/fineshopdesign/cf-wasm)
 

package/dist/fonts.js

@@ -50,8 +50,10 @@ const constructGoogleFontCssUrl = (family, { text, weight = 400, style = "normal
     };
     if (text)
         params.text = encodeURIComponent(text);
-    return `https://fonts.googleapis.com/css2?${Object.keys(params)
-        .map((key) => `${key}=${params[key]}`)
+    if (display)
+        params.display = display;
+    return `https://fonts.googleapis.com/css2?${Object.entries(params)
+        .map(([key, value]) => `${key}=${value}`)
         .join("&")}`;
 };
 /** Loads Google font ArrayBuffer with caching. */

package/dist/helpers/create.d.ts

@@ -1,4 +1,7 @@
 import type { Component } from "svelte";
 import type { ComponentOptions, ImageOptions } from "../types.js";
-export declare function createSvg(element: string | Component, imageOptions: ImageOptions, componentOptions?: ComponentOptions): Promise<string>;
-export declare function createPng(element: string | Component, imageOptions: ImageOptions, componentOptions?: ComponentOptions): Promise<Uint8Array<ArrayBufferLike>>;
+/** Single entry for the Satori and ReSVG engine */
+export declare function createImage(element: string | Component<any>, imageOptions: ImageOptions, componentOptions?: ComponentOptions): Promise<Uint8Array | string>;
+/** Create an SVG string from a Svelte component or HTML string using Satori */
+export declare function createSvg(element: string | Component<any>, imageOptions: ImageOptions, componentOptions?: ComponentOptions): Promise<string>;
+export declare function createPng(element: string | Component<any>, imageOptions: ImageOptions, componentOptions?: ComponentOptions): Promise<Uint8Array<ArrayBufferLike>>;

package/dist/helpers/create.js

@@ -3,15 +3,23 @@ import { default_fonts, DEFAULT_WIDTH } from "../helpers/defaults.js";
 import { useResvg, useSatori } from "../providers/instances.js";
 import { createVNode } from "./toJSX.js";
 import { createLogger } from "./logger.js";
-import { handleAsyncAll, handleAsync, ErrorCodes } from "./error-handler.js";
+import { handleAsync, ErrorCodes } from "./error-handler.js";
+/** Single entry for the Satori and ReSVG engine */
+export function createImage(element, imageOptions, componentOptions) {
+    return imageOptions.format === "svg"
+        ? createSvg(element, imageOptions, componentOptions)
+        : createPng(element, imageOptions, componentOptions);
+}
+/** Create an SVG string from a Svelte component or HTML string using Satori */
 export async function createSvg(element, imageOptions, componentOptions) {
     const log = createLogger(imageOptions.debug ?? false);
-    const [satori, vnodes] = await handleAsyncAll([() => useSatori(imageOptions.debug), () => Promise.resolve(createVNode(element, componentOptions))], ErrorCodes.SATORI_RENDER_FAILED, "Failed to initialize Satori or create VNode");
-    const satoriOptions = structuredClone(imageOptions);
-    if (!Object.hasOwn(satoriOptions, "fonts")) {
-        satoriOptions["fonts"] = await handleAsync(() => default_fonts(), ErrorCodes.FONT_LOAD_FAILED, "Failed to load default fonts for Satori");
+    const vnodes = createVNode(element, componentOptions);
+    const satori = await useSatori(imageOptions.debug);
+    const satoriOptions = { ...imageOptions };
+    if (!satoriOptions.fonts) {
+        satoriOptions.fonts = await handleAsync(() => default_fonts(), ErrorCodes.FONT_LOAD_FAILED, "Failed to load default fonts for Satori");
     }
-    satoriOptions["loadAdditionalAsset"] = loadDynamicAsset({
+    satoriOptions.loadAdditionalAsset = loadDynamicAsset({
         emoji: imageOptions.emoji,
     });
     log.debug("Generating SVG with Satori");
@@ -19,6 +27,7 @@ export async function createSvg(element, imageOptions, componentOptions) {
     log.info("Options provided to satori:", imageOptions);
     return handleAsync(() => satori(vnodes, satoriOptions), ErrorCodes.SATORI_RENDER_FAILED, "Failed to render SVG with Satori");
 }
+/* Create a PNG image from a Svelte component or HTML string using Satori and ReSVG */
 export async function createPng(element, imageOptions, componentOptions) {
     const log = createLogger(imageOptions.debug ?? false);
     const svg = await handleAsync(() => createSvg(element, imageOptions, componentOptions), ErrorCodes.SATORI_RENDER_FAILED, "Failed to create SVG for PNG rendering");

package/dist/helpers/defaults.js

@@ -1,5 +1,14 @@
 import { handleAsyncAll, validateResponse, ErrorCodes } from "./error-handler.js";
-export async function default_fonts() {
+// fetched once per process; a rejected fetch clears the cache so the next request retries
+let defaultFontsPromise;
+export function default_fonts() {
+    defaultFontsPromise ??= loadDefaultFonts().catch((error) => {
+        defaultFontsPromise = undefined;
+        throw error;
+    });
+    return defaultFontsPromise;
+}
+async function loadDefaultFonts() {
     const [noto_sans_regular_font_resp, noto_sans_bold_font_reps] = await handleAsyncAll([
         () => fetch("https://cdn-sveltekit-og.ethercorps.io/NotoSans-Regular.ttf"),
         () => fetch("https://cdn-sveltekit-og.ethercorps.io/NotoSans-Bold.ttf"),

package/dist/helpers/emoji.d.ts

@@ -8,6 +8,6 @@ declare const emoji_apis: {
 };
 export declare const loadDynamicAsset: ({ emoji }: {
     emoji: EmojiType;
-}) => (...args: any[]) => Promise<string | undefined>;
+}) => (code: string, text: string) => Promise<string | undefined>;
 export type EmojiType = keyof typeof emoji_apis;
 export {};

package/dist/helpers/emoji.js

@@ -51,7 +51,7 @@ async function loadEmoji(code, type) {
     }, ErrorCodes.EMOJI_LOAD_FAILED, `Failed to load emoji for code: ${code}`);
 }
 export const loadDynamicAsset = ({ emoji }) => {
-    const fn = async (code, text) => {
+    return async (code, text) => {
         if (code === "emoji") {
             return handleAsync(async () => {
                 const iconCode = getIconCode(text);
@@ -62,9 +62,4 @@ export const loadDynamicAsset = ({ emoji }) => {
             }, ErrorCodes.EMOJI_LOAD_FAILED, `Failed to process emoji: ${text}`);
         }
     };
-    return async (...args) => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        return await fn(...args);
-    };
 };

package/dist/helpers/error-handler.d.ts

@@ -3,6 +3,8 @@ export declare class ImageResponseError extends Error {
     originalError?: Error | undefined;
     constructor(message: string, code: string, originalError?: Error | undefined);
 }
+/** Coerce anything thrown into an ImageResponseError, keeping existing ones as-is. */
+export declare function toImageResponseError(error: unknown): ImageResponseError;
 export declare const ErrorCodes: {
     readonly FONT_LOAD_FAILED: "FONT_LOAD_FAILED";
     readonly VNODE_CREATION_FAILED: "VNODE_CREATION_FAILED";

package/dist/helpers/error-handler.js

@@ -8,6 +8,13 @@ export class ImageResponseError extends Error {
         this.name = "ImageResponseError";
     }
 }
+/** Coerce anything thrown into an ImageResponseError, keeping existing ones as-is. */
+export function toImageResponseError(error) {
+    if (error instanceof ImageResponseError)
+        return error;
+    const err = error instanceof Error ? error : new Error(String(error));
+    return new ImageResponseError(err.message, ErrorCodes.UNKNOWN_ERROR, err);
+}
 export const ErrorCodes = {
     FONT_LOAD_FAILED: "FONT_LOAD_FAILED",
     VNODE_CREATION_FAILED: "VNODE_CREATION_FAILED",

package/dist/helpers/logger.js

@@ -1,4 +1,4 @@
-const PREFIX = '[SvelteKit-OG]';
+const PREFIX = "[SvelteKit-OG]";
 export function createLogger(debug) {
     return {
         debug: (message, ...args) => {
@@ -16,6 +16,6 @@ export function createLogger(debug) {
         error: (message, ...args) => {
             if (debug)
                 console.error(`${PREFIX} ❌ ${message}`, ...args);
-        }
+        },
     };
 }

package/dist/helpers/response.d.ts

@@ -0,0 +1,30 @@
+/** format → content type for every format either engine can emit; satori uses the
+ * png/svg subset, takumi the whole map. */
+export declare const CONTENT_TYPES: {
+    readonly png: "image/png";
+    readonly jpeg: "image/jpeg";
+    readonly webp: "image/webp";
+    readonly ico: "image/x-icon";
+    readonly raw: "application/octet-stream";
+    readonly svg: "image/svg+xml";
+};
+type ImageProducer = () => Promise<Uint8Array | string>;
+interface BuildOptions {
+    /** uppercased format, used in logs e.g. "PNG" */
+    label: string;
+    contentType: string;
+    debug: boolean;
+    headers?: Record<string, string>;
+    status?: number;
+    statusText?: string;
+}
+/**
+ * Shared body + response init for both engines' ImageResponse. Streams the image
+ * out as bytes (a Response stream can't take a raw string), with consistent
+ * cache headers and error handling.
+ */
+export declare function buildImageResponse(produce: ImageProducer, opts: BuildOptions): {
+    body: ReadableStream;
+    init: ResponseInit;
+};
+export {};

package/dist/helpers/response.js

@@ -0,0 +1,52 @@
+import { createLogger } from "./logger.js";
+import { handleAsync, toImageResponseError, ErrorCodes } from "./error-handler.js";
+import { DEFAULT_STATUS_CODE, DEFAULT_STATUS_TEXT } from "./defaults.js";
+import { formatBytes } from "./utils.js";
+/** format → content type for every format either engine can emit; satori uses the
+ * png/svg subset, takumi the whole map. */
+export const CONTENT_TYPES = {
+    png: "image/png",
+    jpeg: "image/jpeg",
+    webp: "image/webp",
+    ico: "image/x-icon",
+    raw: "application/octet-stream",
+    svg: "image/svg+xml",
+};
+// TextEncoder is stateless; one shared instance instead of one per svg response
+const textEncoder = new TextEncoder();
+/**
+ * Shared body + response init for both engines' ImageResponse. Streams the image
+ * out as bytes (a Response stream can't take a raw string), with consistent
+ * cache headers and error handling.
+ */
+export function buildImageResponse(produce, opts) {
+    const log = createLogger(opts.debug);
+    const body = new ReadableStream({
+        async start(controller) {
+            try {
+                const out = await handleAsync(produce, ErrorCodes.UNKNOWN_ERROR, `Failed to generate ${opts.label}`);
+                const bytes = typeof out === "string" ? textEncoder.encode(out) : out;
+                log.info(`Generated ${opts.label}: ${formatBytes(bytes.byteLength)}`);
+                controller.enqueue(bytes);
+                controller.close();
+            }
+            catch (error) {
+                const err = toImageResponseError(error);
+                log.error("Failed to create image response:", err.message);
+                controller.error(err);
+            }
+        },
+    });
+    const init = {
+        headers: {
+            "Content-Type": opts.contentType,
+            "Cache-Control": opts.debug
+                ? "no-cache, no-store"
+                : "public, immutable, no-transform, max-age=31536000",
+            ...opts.headers,
+        },
+        status: opts.status || DEFAULT_STATUS_CODE,
+        statusText: opts.statusText || DEFAULT_STATUS_TEXT,
+    };
+    return { body, init };
+}

package/dist/helpers/to-html.d.ts

@@ -1,11 +1,8 @@
 import type { Component } from "svelte";
 /**
- * Renders a Svelte component to its server-side HTML parts.
- *
- * Shared by both rendering engines: the satori path feeds `body + head` into
- * `satori-html`, while the takumi path passes an HTML string to its renderer.
- * Components that need their styles inlined should use
- * `<svelte:options css="injected" />` so the CSS lands in `head`.
+ * Render a Svelte component to its SSR html parts. Shared by both engines — satori
+ * feeds body+head to satori-html, takumi passes the html string straight in. Use
+ * `<svelte:options css="injected" />` to get component styles into `head`.
  */
 export declare function renderComponentToHtml(component: Component<any>, props?: Record<string, unknown>): {
     head: string;

package/dist/helpers/to-html.js

@@ -1,12 +1,9 @@
 import { render } from "svelte/server";
 import { handleSync, ErrorCodes } from "./error-handler.js";
 /**
- * Renders a Svelte component to its server-side HTML parts.
- *
- * Shared by both rendering engines: the satori path feeds `body + head` into
- * `satori-html`, while the takumi path passes an HTML string to its renderer.
- * Components that need their styles inlined should use
- * `<svelte:options css="injected" />` so the CSS lands in `head`.
+ * Render a Svelte component to its SSR html parts. Shared by both engines — satori
+ * feeds body+head to satori-html, takumi passes the html string straight in. Use
+ * `<svelte:options css="injected" />` to get component styles into `head`.
  */
 export function renderComponentToHtml(component, props = {}) {
     return handleSync(() => render(component, { props }), ErrorCodes.VNODE_CREATION_FAILED, "Failed to render Svelte component to HTML");

package/dist/helpers/toJSX.d.ts

@@ -1,3 +1,3 @@
 import type { Component } from "svelte";
 import type { ComponentOptions, VNode } from "../types.js";
-export declare function createVNode(element: string | Component, componentOptions?: ComponentOptions): VNode;
+export declare function createVNode(element: string | Component<any>, componentOptions?: ComponentOptions): VNode;

package/dist/helpers/toJSX.js

@@ -1,14 +1,11 @@
 import { html } from "satori-html";
 import { handleSync, ErrorCodes } from "./error-handler.js";
 import { renderComponentToHtml } from "./to-html.js";
-function svelteComponentToHTML(component, props = {}) {
+export function createVNode(element, componentOptions) {
     return handleSync(() => {
-        const { body, head } = renderComponentToHtml(component, props);
+        if (typeof element === "string")
+            return html(element.replaceAll("\n", "").trim());
+        const { body, head } = renderComponentToHtml(element, componentOptions?.props);
         return html(body + head);
-    }, ErrorCodes.VNODE_CREATION_FAILED, "Failed to render Svelte component to HTML");
-}
-export function createVNode(element, componentOptions) {
-    return handleSync(() => typeof element === "string"
-        ? html(element.replaceAll("\n", "").trim())
-        : svelteComponentToHTML(element, componentOptions?.props), ErrorCodes.VNODE_CREATION_FAILED, "Failed to create VNode");
+    }, ErrorCodes.VNODE_CREATION_FAILED, "Failed to create VNode");
 }

package/dist/helpers/utils.d.ts

@@ -1,2 +1,2 @@
 export declare const formatBytes: (bytes: number, decimals?: number) => string;
-export declare function importWasm(input: any): Promise<any>;
+export declare function importWasm(input: unknown): Promise<any>;

package/dist/helpers/utils.js

@@ -4,7 +4,7 @@ export const formatBytes = (bytes, decimals = 2) => {
     if (bytes === 0)
         return "0 Bytes";
     const decimalPoint = decimals < 0 ? 0 : decimals;
-    const sizeIndex = Math.min(Math.floor(Math.log(bytes) / Math.log(kbSize)), 3);
+    const sizeIndex = Math.min(Math.floor(Math.log(bytes) / Math.log(kbSize)), sizeFormats.length - 1);
     return (parseFloat((bytes / Math.pow(kbSize, sizeIndex)).toFixed(decimalPoint)) +
         " " +
         sizeFormats[sizeIndex]);
@@ -12,7 +12,7 @@ export const formatBytes = (bytes, decimals = 2) => {
 export async function importWasm(input) {
     // may be a nested await for some reason
     const _input = await input;
-    const _module = _input.default || _input;
+    const _module = _input?.default || _input;
     // this is from rollup/wasm, it does some magic we need to recover from
     if (typeof _module === "function") {
         // empty input is to avoid instantiating the wasm module

package/dist/image-response.js

@@ -1,45 +1,18 @@
-import { DEFAULT_OPTIONS, DEFAULT_STATUS_CODE, DEFAULT_STATUS_TEXT } from "./helpers/defaults.js";
-import { createPng, createSvg } from "./helpers/create.js";
-import { createLogger } from "./helpers/logger.js";
-import { handleAsync, ImageResponseError, ErrorCodes } from "./helpers/error-handler.js";
-import { formatBytes } from "./helpers/utils.js";
+import { DEFAULT_OPTIONS } from "./helpers/defaults.js";
+import { createImage } from "./helpers/create.js";
+import { buildImageResponse, CONTENT_TYPES } from "./helpers/response.js";
 export class ImageResponse extends Response {
     constructor(element, options, props) {
-        const extended_options = Object.assign({ ...DEFAULT_OPTIONS }, options);
-        const isDebug = extended_options.debug ?? false;
-        const log = createLogger(isDebug);
-        log.debug("ImageResponse created");
-        const create_image_function = extended_options.format === "png" ? createPng : createSvg;
-        const body = new ReadableStream({
-            async start(controller) {
-                try {
-                    const buffer = (await handleAsync(() => create_image_function(element, extended_options, {
-                        props,
-                    }), ErrorCodes.UNKNOWN_ERROR, `Failed to generate ${extended_options.format?.toUpperCase()}`));
-                    log.debug(buffer.length.toLocaleString());
-                    log.info(`Generated ${extended_options.format.toUpperCase()}: ${formatBytes(buffer.length)}`);
-                    controller.enqueue(buffer);
-                    controller.close();
-                }
-                catch (error) {
-                    const err = error instanceof ImageResponseError
-                        ? error
-                        : new ImageResponseError(error instanceof Error ? error.message : String(error), ErrorCodes.UNKNOWN_ERROR, error instanceof Error ? error : new Error(String(error)));
-                    log.error("Failed to create image response:", err.message);
-                    controller.error(err);
-                }
-            },
-        });
-        super(body, {
-            headers: {
-                "Content-Type": `image/${extended_options.format}${extended_options.format === "svg" ? "+xml" : ""}`,
-                "Cache-Control": extended_options.debug
-                    ? "no-cache, no-store"
-                    : "public, immutable, no-transform, max-age=31536000",
-                ...extended_options.headers,
-            },
-            status: extended_options.status || DEFAULT_STATUS_CODE,
-            statusText: extended_options.statusText || DEFAULT_STATUS_TEXT,
+        const opts = { ...DEFAULT_OPTIONS, ...options };
+        const format = opts.format ?? "png";
+        const { body, init } = buildImageResponse(() => createImage(element, { ...opts, format }, { props }), {
+            label: format.toUpperCase(),
+            contentType: CONTENT_TYPES[format],
+            debug: opts.debug ?? false,
+            headers: opts.headers,
+            status: opts.status,
+            statusText: opts.statusText,
         });
+        super(body, init);
     }
 }

package/dist/providers/instances.js

@@ -1,45 +1,45 @@
 import { isEdgeLight, isWorkerd } from "std-env";
 import { createLogger } from "../helpers/logger.js";
 import { handleAsync, ErrorCodes } from "../helpers/error-handler.js";
-// we keep instances alive to avoid re-importing them on every request, maybe not needed but
-// also helps with type inference
-// Code from vue-og-images
-const resvgInstance = {
-    instance: undefined,
-};
-const satoriInstance = {
-    instance: undefined,
-};
+/**
+ * Lazy singleton around a node/edge wasm module pair. The edge/node choice is
+ * made per-runtime via std-env; both sides stay direct import() expressions so
+ * the bundler can emit the wasm chunk. Memoizes the init promise (like
+ * takumi/renderer.ts) so concurrent first requests share one init, and clears
+ * it on rejection so a failed init can be retried.
+ */
+function createProvider(label, errorCode, imports) {
+    let instancePromise;
+    const init = async (debug) => {
+        const log = createLogger(debug);
+        log.debug(`Initializing ${label}`);
+        const isWorkerLikeRuntime = isEdgeLight || isWorkerd;
+        log.info(`Detected runtime: ${isWorkerLikeRuntime ? "Edge Light or Workerd" : "Node.js"}`);
+        const moduleImport = isWorkerLikeRuntime ? imports.edge() : imports.node();
+        const loaded = await handleAsync(() => moduleImport.then((m) => m.default), errorCode, `Failed to import ${label} module`);
+        await handleAsync(() => loaded.initWasmPromise, errorCode, `Failed to initialize ${label} WASM`);
+        return loaded;
+    };
+    return (debug = false) => {
+        instancePromise ??= init(debug).catch((error) => {
+            instancePromise = undefined;
+            throw error;
+        });
+        return instancePromise;
+    };
+}
+const useResvgModule = createProvider("ReSVG", ErrorCodes.RESVG_INIT_FAILED, {
+    // workers take a precompiled `?module`; node takes raw wasm bytes
+    edge: () => import("./resvg/edge.js"),
+    node: () => import("./resvg/node.js"),
+});
+const useSatoriModule = createProvider("Satori", ErrorCodes.SATORI_INIT_FAILED, {
+    edge: () => import("./satori/edge.js"),
+    node: () => import("./satori/node.js"),
+});
 export async function useResvg(debug = false) {
-    const log = createLogger(debug);
-    if (resvgInstance.instance) {
-        return resvgInstance.instance.Resvg;
-    }
-    log.debug("Initializing ReSVG WASM");
-    const isWorkerLikeRuntime = isEdgeLight || isWorkerd;
-    log.info(`Detected runtime: ${isWorkerLikeRuntime ? "Edge Light or Workerd" : "Node.js"}`);
-    // Keep both dynamic imports as direct expressions so the bundler (unwasm/Rollup)
-    // can statically analyse them and emit the `?module` wasm chunk correctly.
-    // Burying these inside nested async callbacks breaks wasm bundling on Cloudflare.
-    const moduleImport = isWorkerLikeRuntime
-        ? import("./resvg/edge.js")
-        : import("./resvg/node.js");
-    resvgInstance.instance = await handleAsync(() => moduleImport.then((m) => m.default), ErrorCodes.RESVG_INIT_FAILED, "Failed to import ReSVG module");
-    await handleAsync(() => resvgInstance.instance.initWasmPromise, ErrorCodes.RESVG_INIT_FAILED, "Failed to initialize ReSVG WASM");
-    return resvgInstance.instance.Resvg;
+    return (await useResvgModule(debug)).Resvg;
 }
 export async function useSatori(debug = false) {
-    const log = createLogger(debug);
-    if (satoriInstance.instance) {
-        return satoriInstance.instance.satori;
-    }
-    log.debug("Initializing Satori");
-    const isWorkerLikeRuntime = isEdgeLight || isWorkerd;
-    log.info(`Detected runtime: ${isWorkerLikeRuntime ? "Edge Light or Workerd" : "Node.js"}`);
-    const moduleImport = isWorkerLikeRuntime
-        ? import("./satori/edge.js")
-        : import("./satori/node.js");
-    satoriInstance.instance = await handleAsync(() => moduleImport.then((m) => m.default), ErrorCodes.SATORI_INIT_FAILED, "Failed to import Satori module");
-    await handleAsync(() => satoriInstance.instance.initWasmPromise, ErrorCodes.SATORI_INIT_FAILED, "Failed to initialize Satori WASM");
-    return satoriInstance.instance.satori;
+    return (await useSatoriModule(debug)).satori;
 }

package/dist/providers/resvg/edge.js

@@ -1,8 +1,12 @@
 import { Resvg as _Resvg, initWasm } from "@resvg/resvg-wasm";
 
 export default {
-	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-	// @ts-ignore
-	initWasmPromise: initWasm(import("./resvg.wasm?module").then((r) => r.default || r)),
+	// load resvg's wasm from the dep (it exports ./index_bg.wasm) via ?module, so we
+	// don't vendor a copy. precompiled module works on node + workers alike.
+	initWasmPromise: initWasm(
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		import("@resvg/resvg-wasm/index_bg.wasm?module").then((r) => r.default || r)
+	),
 	Resvg: _Resvg,
 };

package/dist/providers/resvg/node.js

@@ -1,13 +1,22 @@
 import { Resvg as _Resvg, initWasm } from "@resvg/resvg-wasm";
+import { readFile } from "node:fs/promises";
+import { createRequire } from "node:module";
 
-/**
- * Fetch will be called only once whenever you load this file.
- * In vercel serverless functions, fetch will run on cold start.
- * In Node.js (Stateful e.g. Linux servers), Fetch will run once when you start your server.
- * */
-const resvgWasm = fetch("https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm");
+// prefer reading resvg's wasm straight from the installed dependency (no
+// network). some serverless bundlers (vercel/netlify via nft) don't trace the
+// sibling .wasm onto disk, so fall back to fetching it there. either way we hand
+// initWasm raw bytes / a Response — never a `?module` import, which node
+// serverless can't instantiate. runs once when this module first loads.
+async function loadResvgWasm() {
+	try {
+		const require = createRequire(import.meta.url);
+		return await readFile(require.resolve("@resvg/resvg-wasm/index_bg.wasm"));
+	} catch {
+		return fetch("https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm");
+	}
+}
 
 export default {
-	initWasmPromise: initWasm(resvgWasm),
+	initWasmPromise: initWasm(loadResvgWasm()),
 	Resvg: _Resvg,
 };

package/dist/providers/satori/edge.js

@@ -1,16 +1,12 @@
 import _satori, { init } from "satori/standalone";
 
-// On worker-like runtimes (Cloudflare Workers, Edge) the default `satori` entry
-// fails: it bundles yoga's layout wasm as base64 and compiles it at runtime,
-// which Workers block ("Wasm code generation disallowed by embedder").
-//
-// `satori/standalone` exposes `init()` so we can hand it a pre-compiled
-// WebAssembly.Module instead. Importing the vendored yoga.wasm with `?module`
-// makes the consumer bundler emit a real CompiledWasm module, so no runtime
-// byte compilation happens. Mirrors providers/resvg/edge.js.
+// the default satori entry compiles yoga's wasm at runtime, which workers block
+// ("Wasm code generation disallowed by embedder"). satori/standalone takes a
+// precompiled module via init(), so we hand it satori's own yoga wasm (it exports
+// ./yoga.wasm) through ?module — no vendored copy. mirrors providers/resvg.
 export default {
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 	// @ts-ignore
-	initWasmPromise: init(import("./yoga.wasm?module").then((r) => r.default || r)),
+	initWasmPromise: init(import("satori/yoga.wasm?module").then((r) => r.default || r)),
 	satori: _satori,
 };

package/dist/takumi/fonts.d.ts

@@ -1,26 +1,16 @@
 import type { FontDetails } from "takumi-js/node";
 import { BaseFont } from "../fonts.js";
 import type { MayBePromise } from "../types.js";
-/** Font bytes Takumi accepts for registration. */
 type ByteBuf = Uint8Array | ArrayBuffer | Buffer;
-/**
- * A Takumi-native font descriptor. `data` may be the bytes directly or a lazy
- * loader returning them — matching `takumi-js`'s own font option shape.
- */
+/** Takumi-native font descriptor; data is the bytes or a lazy loader, like takumi-js wants. */
 export interface TakumiFontDescriptor {
     name?: string;
     data: ByteBuf | (() => MayBePromise<ByteBuf>);
     weight?: number;
     style?: FontDetails["style"];
 }
-/**
- * Accepted font inputs on the Takumi path: this library's `GoogleFont` /
- * `CustomFont` helpers (any `BaseFont`) or a raw Takumi descriptor.
- */
+/** What the takumi path accepts: our GoogleFont/CustomFont, or a raw takumi descriptor. */
 export type TakumiFontInput = BaseFont | TakumiFontDescriptor;
-/**
- * Resolves mixed font inputs into Takumi `FontDetails` ready for
- * `renderer.registerFont`. Loaders run in parallel.
- */
+/** Normalize mixed font inputs to FontDetails for registerFont, loaders run in parallel. */
 export declare function resolveTakumiFonts(fonts: TakumiFontInput[]): Promise<FontDetails[]>;
 export {};

package/dist/takumi/fonts.js

@@ -2,17 +2,14 @@ import { BaseFont } from "../fonts.js";
 import { handleAsync, ErrorCodes } from "../helpers/error-handler.js";
 async function normalizeFont(font) {
     if (font instanceof BaseFont) {
-        // GoogleFont/CustomFont: the `data` getter lazily loads (and caches) bytes.
+        // our font classes lazily load + cache through the data getter
         const data = (await font.data);
         return { name: font.name, data, weight: font.weight, style: font.style };
     }
     const data = typeof font.data === "function" ? await font.data() : await font.data;
     return { name: font.name, data, weight: font.weight, style: font.style };
 }
-/**
- * Resolves mixed font inputs into Takumi `FontDetails` ready for
- * `renderer.registerFont`. Loaders run in parallel.
- */
+/** Normalize mixed font inputs to FontDetails for registerFont, loaders run in parallel. */
 export async function resolveTakumiFonts(fonts) {
     return handleAsync(() => Promise.all(fonts.map(normalizeFont)), ErrorCodes.FONT_LOAD_FAILED, "Failed to resolve fonts for Takumi");
 }

package/dist/takumi/image-response.d.ts

@@ -1,9 +1,6 @@
 import type { Component, ComponentProps } from "svelte";
 import type { TakumiImageResponseOptions } from "./types.js";
-/**
- * Generates an Open Graph image with the Takumi engine and returns it as a
- * `Response`. Accepts an HTML string or a Svelte component (with props).
- */
+/** OG image rendered by Takumi. Takes an HTML string or a Svelte component. */
 export declare class ImageResponse<T extends string | Component<any>> extends Response {
     constructor(element: T, options?: TakumiImageResponseOptions, props?: T extends Component<any> ? ComponentProps<T> : never);
 }

package/dist/takumi/image-response.js

@@ -1,62 +1,27 @@
 import { createTakumiImage } from "./render.js";
-import { createLogger } from "../helpers/logger.js";
-import { handleAsync, ImageResponseError, ErrorCodes } from "../helpers/error-handler.js";
-import { formatBytes } from "../helpers/utils.js";
+import { DEFAULT_WIDTH, DEFAULT_HEIGHT } from "../helpers/defaults.js";
+import { buildImageResponse, CONTENT_TYPES as SHARED_CONTENT_TYPES } from "../helpers/response.js";
 const DEFAULT_OPTIONS = {
-    width: 1200,
-    height: 630,
+    width: DEFAULT_WIDTH,
+    height: DEFAULT_HEIGHT,
     format: "png",
     emoji: "twemoji",
     debug: false,
 };
-const CONTENT_TYPES = {
-    png: "image/png",
-    jpeg: "image/jpeg",
-    webp: "image/webp",
-    ico: "image/x-icon",
-    raw: "application/octet-stream",
-    svg: "image/svg+xml",
-};
-/**
- * Generates an Open Graph image with the Takumi engine and returns it as a
- * `Response`. Accepts an HTML string or a Svelte component (with props).
- */
+// Verifies the shared map covers every takumi format
+const CONTENT_TYPES = SHARED_CONTENT_TYPES;
+/** OG image rendered by Takumi. Takes an HTML string or a Svelte component. */
 export class ImageResponse extends Response {
     constructor(element, options, props) {
         const opts = { ...DEFAULT_OPTIONS, ...options };
-        const log = createLogger(opts.debug);
-        log.debug("Takumi ImageResponse created");
-        const format = opts.format;
-        const body = new ReadableStream({
-            async start(controller) {
-                try {
-                    const output = await handleAsync(() => createTakumiImage(element, opts, props), ErrorCodes.UNKNOWN_ERROR, `Failed to generate ${format.toUpperCase()}`);
-                    // renderSvg returns a string; raster formats return bytes. A
-                    // Response body stream must emit Uint8Array chunks.
-                    const bytes = typeof output === "string" ? new TextEncoder().encode(output) : output;
-                    log.info(`Generated ${format.toUpperCase()}: ${formatBytes(bytes.byteLength)}`);
-                    controller.enqueue(bytes);
-                    controller.close();
-                }
-                catch (error) {
-                    const err = error instanceof ImageResponseError
-                        ? error
-                        : new ImageResponseError(error instanceof Error ? error.message : String(error), ErrorCodes.UNKNOWN_ERROR, error instanceof Error ? error : new Error(String(error)));
-                    log.error("Failed to create Takumi image response:", err.message);
-                    controller.error(err);
-                }
-            },
-        });
-        super(body, {
-            headers: {
-                "Content-Type": CONTENT_TYPES[format],
-                "Cache-Control": opts.debug
-                    ? "no-cache, no-store"
-                    : "public, immutable, no-transform, max-age=31536000",
-                ...opts.headers,
-            },
-            status: opts.status || 200,
-            statusText: opts.statusText || "Success",
+        const { body, init } = buildImageResponse(() => createTakumiImage(element, opts, props), {
+            label: opts.format.toUpperCase(),
+            contentType: CONTENT_TYPES[opts.format],
+            debug: opts.debug,
+            headers: opts.headers,
+            status: opts.status,
+            statusText: opts.statusText,
         });
+        super(body, init);
     }
 }

package/dist/takumi/index.js

@@ -1,4 +1,4 @@
 export { ImageResponse } from "./image-response.js";
 export { resolveTakumiFonts } from "./fonts.js";
-// Re-export the font helpers so the Takumi path is usable from a single import.
+// re-export the font helpers so the takumi path works from one import
 export { GoogleFont, CustomFont, loadGoogleFont } from "../fonts.js";

package/dist/takumi/render.d.ts

@@ -1,7 +1,4 @@
 import type { Component } from "svelte";
 import type { TakumiImageOptions } from "./types.js";
-/**
- * Renders an HTML string or Svelte component to image bytes (or an SVG string)
- * using a cached, font-registered Takumi renderer for the current runtime.
- */
-export declare function createTakumiImage(element: string | Component, options: TakumiImageOptions, props?: Record<string, unknown>): Promise<Uint8Array | string>;
+/** Render an HTML string or Svelte component to image bytes (or an svg string). */
+export declare function createTakumiImage(element: string | Component<any>, options: TakumiImageOptions, props?: Record<string, unknown>): Promise<Uint8Array | string>;

package/dist/takumi/render.js

@@ -1,36 +1,23 @@
 import { render as takumiRender, renderSvg } from "takumi-js";
-import { renderComponentToHtml } from "../helpers/to-html.js";
 import { useTakumiRenderer, registerTakumiFonts } from "./renderer.js";
 import { resolveTakumiFonts } from "./fonts.js";
 import { createLogger } from "../helpers/logger.js";
-import { handleAsync, handleSync, ErrorCodes } from "../helpers/error-handler.js";
-function elementToHtml(element, props) {
-    if (typeof element === "string")
-        return element.replaceAll("\n", "").trim();
-    // Takumi reads inline `style`/`<style>`; `head` carries CSS injected via
-    // `<svelte:options css="injected" />`, so it goes first.
-    const { head, body } = renderComponentToHtml(element, props);
-    return head + body;
-}
-/**
- * Renders an HTML string or Svelte component to image bytes (or an SVG string)
- * using a cached, font-registered Takumi renderer for the current runtime.
- */
+import { handleAsync, ErrorCodes, handleSync } from "../helpers/error-handler.js";
+import { createVNode } from "../helpers/toJSX.js";
+/** Render an HTML string or Svelte component to image bytes (or an svg string). */
 export async function createTakumiImage(element, options, props) {
     const log = createLogger(options.debug ?? false);
-    const html = handleSync(() => elementToHtml(element, props), ErrorCodes.VNODE_CREATION_FAILED, "Failed to create HTML for Takumi");
-    const renderer = await useTakumiRenderer(options.debug);
+    const vNode = handleSync(() => createVNode(element, { props }), ErrorCodes.VNODE_CREATION_FAILED, "Failed to create HTML for Takumi");
+    const renderer = await useTakumiRenderer();
     if (options.fonts?.length) {
         const fonts = await resolveTakumiFonts(options.fonts);
         await registerTakumiFonts(renderer, fonts);
     }
     const { width, height, format = "png", quality, stylesheets, emoji } = options;
-    // `renderer` is typed as the native Renderer; on edge it's the wasm Renderer,
-    // which is structurally compatible for takumi-js's managed render.
     const shared = { renderer: renderer, width, height, stylesheets, emoji };
     log.debug(`Rendering ${format.toUpperCase()} with Takumi`);
     if (format === "svg") {
-        return handleAsync(() => renderSvg(html, shared), ErrorCodes.TAKUMI_RENDER_FAILED, "Failed to render SVG with Takumi");
+        return handleAsync(() => renderSvg(vNode, shared), ErrorCodes.TAKUMI_RENDER_FAILED, "Failed to render SVG with Takumi");
     }
-    return handleAsync(() => takumiRender(html, { ...shared, format, quality }), ErrorCodes.TAKUMI_RENDER_FAILED, "Failed to render image with Takumi");
+    return handleAsync(() => takumiRender(vNode, { ...shared, format, quality }), ErrorCodes.TAKUMI_RENDER_FAILED, "Failed to render image with Takumi");
 }

package/dist/takumi/renderer.d.ts

@@ -1,10 +1,7 @@
 import type { Renderer as NodeRenderer, FontDetails } from "takumi-js/node";
-/** Either backend's Renderer; both expose `render`/`renderSvg`/`registerFont`. */
 export type TakumiRenderer = NodeRenderer;
-/** Lazily creates and caches the Takumi renderer for the current runtime. */
-export declare function useTakumiRenderer(debug?: boolean): Promise<TakumiRenderer>;
-/**
- * Registers each font on the renderer once. Keyed by name/weight/style so the
- * same face isn't re-registered across requests.
- */
+/** Lazily creates and caches the Takumi renderer for the current runtime.
+ * A rejected init clears the cache so the next request retries. */
+export declare function useTakumiRenderer(): Promise<TakumiRenderer>;
+/** Register each font once, keyed by name/weight/style. */
 export declare function registerTakumiFonts(renderer: TakumiRenderer, fonts: FontDetails[]): Promise<void>;

package/dist/takumi/renderer.js

@@ -1,33 +1,33 @@
-import { isEdgeLight, isWorkerd } from "std-env";
-import { createLogger } from "../helpers/logger.js";
+import autoModule, { init as initTakumiWasm, Renderer } from "takumi-js/wasm";
 import { handleAsync, ErrorCodes } from "../helpers/error-handler.js";
-// Keep one renderer alive across requests (mirrors satori/resvg instance reuse
-// and Takumi's own global renderer). Fonts registered on it accumulate, so we
-// track which have already been registered to avoid duplicate work.
+// keep one renderer alive across requests, same as the satori/resvg instances.
+// fonts registered on it stick around, so we dedupe by key.
 let rendererPromise;
 const registeredFontKeys = new Set();
-async function initRenderer(debug) {
-    const log = createLogger(debug);
-    const isWorkerLikeRuntime = isEdgeLight || isWorkerd;
-    log.info(`Detected runtime: ${isWorkerLikeRuntime ? "Edge Light or Workerd" : "Node.js"}`);
-    // Keep the imports as direct ternary expressions so the bundler can statically
-    // emit the wasm chunk for the edge build (see providers/takumi/edge.js).
-    const moduleImport = isWorkerLikeRuntime
-        ? import("../providers/takumi/edge.js")
-        : import("../providers/takumi/node.js");
-    const provider = (await handleAsync(() => moduleImport.then((m) => m.default), ErrorCodes.TAKUMI_INIT_FAILED, "Failed to import Takumi renderer module"));
-    await handleAsync(() => provider.initWasmPromise, ErrorCodes.TAKUMI_INIT_FAILED, "Failed to initialize Takumi WASM");
-    return new provider.Renderer();
+async function initRenderer() {
+    await handleAsync(async () => {
+        // reuse the wasm that ships with takumi-js instead of vendoring our own.
+        // @takumi-rs/wasm/auto picks the right binary per runtime (workerd, edge,
+        // node, ?module) via export conditions. this is the same dance takumi-js
+        // does internally.
+        const resolved = typeof autoModule === "function" ? await autoModule() : await autoModule;
+        const input = resolved && typeof resolved === "object" && "default" in resolved
+            ? resolved.default
+            : resolved;
+        await initTakumiWasm(input ? { module_or_path: input } : undefined);
+    }, ErrorCodes.TAKUMI_INIT_FAILED, "Failed to initialize Takumi WASM");
+    return new Renderer();
 }
-/** Lazily creates and caches the Takumi renderer for the current runtime. */
-export async function useTakumiRenderer(debug = false) {
-    rendererPromise ??= initRenderer(debug);
+/** Lazily creates and caches the Takumi renderer for the current runtime.
+ * A rejected init clears the cache so the next request retries. */
+export async function useTakumiRenderer() {
+    rendererPromise ??= initRenderer().catch((error) => {
+        rendererPromise = undefined;
+        throw error;
+    });
     return rendererPromise;
 }
-/**
- * Registers each font on the renderer once. Keyed by name/weight/style so the
- * same face isn't re-registered across requests.
- */
+/** Register each font once, keyed by name/weight/style. */
 export async function registerTakumiFonts(renderer, fonts) {
     for (const font of fonts) {
         const key = `${font.name ?? "unnamed"}-${font.weight ?? "auto"}-${font.style ?? "normal"}`;

package/dist/types.d.ts

@@ -85,7 +85,3 @@ export interface VNode {
 }
 /** utils types */
 export type MayBePromise<T> = T | Promise<T>;
-export type OnlyProps<T, P> = {
-    [K in keyof T as K extends P ? K : never]: T[K];
-};
-export type StringWithSuggestions<S extends string> = (string & Record<never, never>) | S;

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "@ethercorps/sveltekit-og",
-	"version": "4.3.0-next.7",
+	"version": "4.3.0",
 	"license": "MIT",
 	"homepage": "https://sveltekit-og.dev",
-	"repository": "github:ethercorps/sveltekit-og",
+	"repository": "github:etherCorps/sveltekit-og",
 	"funding": "https://github.com/sponsors/ethercorps",
 	"author": "Shivam Meena <https://github.com/theetherGit>",
 	"description": "Dynamically generate Open Graph images from an HTML, CSS template or Svelte component using fast and efficient conversion from HTML > SVG > PNG",
@@ -36,10 +36,9 @@
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
-		"build:examples": "pnpm -F \"./examples/**\" --parallel --color build",
-		"check:examples": "pnpm install -r",
 		"preview": "vite preview",
 		"package": "svelte-kit sync && svelte-package && publint",
+		"prepare": "svelte-kit sync && svelte-package",
 		"prepublishOnly": "pnpm run package",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -70,7 +69,8 @@
 		"./plugin": {
 			"types": "./dist/plugin.d.ts",
 			"import": "./dist/plugin.js"
-		}
+		},
+		"./package.json": "./package.json"
 	},
 	"files": [
 		"dist",
@@ -80,7 +80,7 @@
 	"devDependencies": {
 		"@eslint/compat": "^2.0.3",
 		"@eslint/js": "^9.39.3",
-		"@sveltejs/adapter-vercel": "^5.10.3",
+		"@sveltejs/adapter-auto": "^3.3.1",
 		"@sveltejs/kit": "^2.53.4",
 		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^4.0.4",
@@ -105,7 +105,7 @@
 		"typescript": "^5.9.3",
 		"typescript-eslint": "^8.57.0",
 		"vite": "^5.4.21",
-		"takumi-js": "2.0.0-beta.14",
+		"takumi-js": "2.0.1",
 		"vitest": "^1.6.1"
 	},
 	"main": "./dist/index.js",
@@ -121,7 +121,7 @@
 	},
 	"peerDependencies": {
 		"@sveltejs/kit": ">=2.0.0",
-		"takumi-js": "^2.0.0-beta.14"
+		"takumi-js": "^2.0.1"
 	},
 	"peerDependenciesMeta": {
 		"takumi-js": {

package/dist/providers/takumi/edge.d.ts

@@ -1,6 +0,0 @@
-declare namespace _default {
-    export let initWasmPromise: Promise<import("takumi-js/wasm", { with: { "resolution-mode": "require" } }).InitOutput>;
-    export { Renderer };
-}
-export default _default;
-import { Renderer } from "takumi-js/wasm";

package/dist/providers/takumi/edge.js

@@ -1,16 +0,0 @@
-import { init, Renderer } from "takumi-js/wasm";
-
-// Worker-like runtimes (Cloudflare Workers, Vercel Edge) can't compile WASM at
-// runtime, so we hand the wasm-bindgen `init` a pre-compiled module. Importing
-// the vendored takumi.wasm with `?module` makes the consumer bundler emit a real
-// CompiledWasm module — mirrors providers/resvg/edge.js and providers/satori/edge.js.
-export default {
-	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-	// @ts-ignore
-	initWasmPromise: init({
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-ignore
-		module_or_path: import("./takumi.wasm?module").then((r) => r.default || r),
-	}),
-	Renderer,
-};

package/dist/providers/takumi/node.d.ts

@@ -1,6 +0,0 @@
-declare namespace _default {
-    export let initWasmPromise: Promise<void>;
-    export { Renderer };
-}
-export default _default;
-import { Renderer } from "takumi-js/node";

package/dist/providers/takumi/node.js

@@ -1,10 +0,0 @@
-import { Renderer } from "takumi-js/node";
-
-/**
- * Native Node.js backend (@takumi-rs/core). The renderer is a native addon, so
- * there is no WASM to initialize — construction is synchronous.
- * */
-export default {
-	initWasmPromise: Promise.resolve(),
-	Renderer,
-};