@ethercorps/sveltekit-og 4.2.0 → 4.3.0-beta.1

package/dist/takumi/fonts.d.ts

@@ -0,0 +1,16 @@
+import type { FontDetails } from "takumi-js/node";
+import { BaseFont } from "../fonts.js";
+import type { MayBePromise } from "../types.js";
+type ByteBuf = Uint8Array | ArrayBuffer | Buffer;
+/** 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"];
+}
+/** What the takumi path accepts: our GoogleFont/CustomFont, or a raw takumi descriptor. */
+export type TakumiFontInput = BaseFont | TakumiFontDescriptor;
+/** 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

@@ -0,0 +1,15 @@
+import { BaseFont } from "../fonts.js";
+import { handleAsync, ErrorCodes } from "../helpers/error-handler.js";
+async function normalizeFont(font) {
+    if (font instanceof BaseFont) {
+        // 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 };
+}
+/** 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

@@ -0,0 +1,6 @@
+import type { Component, ComponentProps } from "svelte";
+import type { TakumiImageResponseOptions } from "./types.js";
+/** 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

@@ -0,0 +1,27 @@
+import { createTakumiImage } from "./render.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: DEFAULT_WIDTH,
+    height: DEFAULT_HEIGHT,
+    format: "png",
+    emoji: "twemoji",
+    debug: false,
+};
+// 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 { 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.d.ts

@@ -0,0 +1,5 @@
+export { ImageResponse } from "./image-response.js";
+export type { TakumiImageResponseOptions, TakumiImageOptions, TakumiResponseOptions, TakumiFormat, } from "./types.js";
+export type { TakumiFontInput, TakumiFontDescriptor } from "./fonts.js";
+export { resolveTakumiFonts } from "./fonts.js";
+export { GoogleFont, CustomFont, loadGoogleFont } from "../fonts.js";

package/dist/takumi/index.js

@@ -0,0 +1,4 @@
+export { ImageResponse } from "./image-response.js";
+export { resolveTakumiFonts } from "./fonts.js";
+// 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

@@ -0,0 +1,4 @@
+import type { Component } from "svelte";
+import type { TakumiImageOptions } from "./types.js";
+/** 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

@@ -0,0 +1,23 @@
+import { render as takumiRender, renderSvg } from "takumi-js";
+import { useTakumiRenderer, registerTakumiFonts } from "./renderer.js";
+import { resolveTakumiFonts } from "./fonts.js";
+import { createLogger } from "../helpers/logger.js";
+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 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;
+    const shared = { renderer: renderer, width, height, stylesheets, emoji };
+    log.debug(`Rendering ${format.toUpperCase()} with Takumi`);
+    if (format === "svg") {
+        return handleAsync(() => renderSvg(vNode, shared), ErrorCodes.TAKUMI_RENDER_FAILED, "Failed to render SVG 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

@@ -0,0 +1,7 @@
+import type { Renderer as NodeRenderer, FontDetails } from "takumi-js/node";
+export type TakumiRenderer = NodeRenderer;
+/** 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

@@ -0,0 +1,39 @@
+import autoModule, { init as initTakumiWasm, Renderer } from "takumi-js/wasm";
+import { handleAsync, ErrorCodes } from "../helpers/error-handler.js";
+// 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() {
+    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.
+ * 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;
+}
+/** 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"}`;
+        if (registeredFontKeys.has(key))
+            continue;
+        await handleAsync(() => renderer.registerFont(font), ErrorCodes.FONT_LOAD_FAILED, `Failed to register Takumi font: ${key}`);
+        registeredFontKeys.add(key);
+    }
+}

package/dist/takumi/types.d.ts

@@ -0,0 +1,64 @@
+import type { EmojiType } from "takumi-js/helpers/emoji";
+import type { OutputFormat } from "takumi-js/node";
+import type { TakumiFontInput } from "./fonts.js";
+/** Static output formats Takumi can encode, plus vector `svg`. */
+export type TakumiFormat = OutputFormat | "svg";
+export type TakumiImageOptions = {
+    /**
+     * Width of the image.
+     * @default 1200
+     * */
+    width?: number;
+    /**
+     * Height of the image.
+     * @default 630
+     * */
+    height?: number;
+    /**
+     * Output format.
+     * @default png
+     * */
+    format?: TakumiFormat;
+    /**
+     * Quality for lossy formats (jpeg, lossy webp), 0-100.
+     * */
+    quality?: number;
+    /**
+     * Fonts to register. Accepts this library's `GoogleFont`/`CustomFont`
+     * helpers or raw Takumi font descriptors. If omitted, Takumi's built-in
+     * sans-serif is used.
+     * */
+    fonts?: TakumiFontInput[];
+    /**
+     * Extra CSS stylesheets applied before rendering.
+     * */
+    stylesheets?: string[];
+    /**
+     * Emoji provider, or `"from-font"` to source emoji glyphs from loaded fonts.
+     * @default twemoji
+     * */
+    emoji?: EmojiType | "from-font";
+    /**
+     * Enable debug logging.
+     * @default false
+     * */
+    debug?: boolean;
+};
+export type TakumiResponseOptions = {
+    /**
+     * Response status code.
+     * @default 200
+     * */
+    status?: number;
+    /**
+     * Response status text.
+     * @default Success
+     * */
+    statusText?: string;
+    /**
+     * Response headers.
+     * */
+    headers?: Record<string, string>;
+};
+/** Options for the Takumi `ImageResponse`. */
+export type TakumiImageResponseOptions = TakumiImageOptions & TakumiResponseOptions;

package/dist/takumi/types.js

@@ -0,0 +1 @@
+export {};

package/dist/types.d.ts

@@ -1,9 +1,9 @@
-import type { SatoriOptions } from 'satori/wasm';
-import type { EmojiType } from './helpers/emoji.js';
-export type Font = SatoriOptions['fonts'][number];
+import type { SatoriOptions } from "satori";
+import type { EmojiType } from "./helpers/emoji.js";
+export type Font = SatoriOptions["fonts"][number];
 export type Fonts = Font[];
-export type FontStyle = Font['style'];
-export type FontWeight = Font['weight'];
+export type FontStyle = Font["style"];
+export type FontWeight = Font["weight"];
 export type FinalFontOptions = NonNullable<Fonts>;
 export type ImageOptions = {
     /**
@@ -30,7 +30,7 @@ export type ImageOptions = {
      * Tailwind config
      * @default provided by satori
      * */
-    tailwindConfig?: SatoriOptions['tailwindConfig'];
+    tailwindConfig?: SatoriOptions["tailwindConfig"];
     /**
      * Debug operations
      * @default false
@@ -40,7 +40,7 @@ export type ImageOptions = {
      * Image format
      * @default png
      * */
-    format?: 'svg' | 'png';
+    format?: "svg" | "png";
 };
 export type ResponseImageOptions = {
     /**
@@ -70,7 +70,7 @@ export type ImageResponseOptions = ImageOptions & ResponseImageOptions;
  * Svelte Component props to render the component which dynamic content
  * */
 export type ComponentOptions = {
-    props?: Record<string, any>;
+    props?: Record<string, unknown>;
 };
 /**
  * React virtual node, supported by satori as input (alternative to JSX input).
@@ -78,14 +78,10 @@ export type ComponentOptions = {
 export interface VNode {
     type: string;
     props: {
-        style?: Record<string, any>;
+        style?: Record<string, unknown>;
         children?: string | VNode | VNode[];
-        [prop: string]: any;
+        [prop: string]: unknown;
     };
 }
 /** 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,6 +1,38 @@
 {
   "name": "@ethercorps/sveltekit-og",
-  "version": "4.2.0",
+  "version": "4.3.0-beta.1",
+  "license": "MIT",
+  "homepage": "https://sveltekit-og.dev",
+  "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",
+  "contributors": [
+    {
+      "name": "Shivam Meena",
+      "github": "https://github.com/theetherGit"
+    },
+    {
+      "name": "Jason",
+      "github": "https://github.com/jasongitmail"
+    },
+    {
+      "name": "Mihkel Martin Kasterpalu",
+      "github": "https://github.com/MihkelMK"
+    },
+    {
+      "name": "Luke Parke",
+      "github": "https://github.com/LukasParke"
+    },
+    {
+      "name": "Willow (GHOST)",
+      "github": "https://github.com/ghostdevv"
+    },
+    {
+      "name": "Minseo Lee",
+      "github": "https://github.com/quiple"
+    }
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -11,10 +43,16 @@
       "types": "./dist/fonts.d.ts",
       "import": "./dist/fonts.js"
     },
+    "./takumi": {
+      "types": "./dist/takumi/index.d.ts",
+      "svelte": "./dist/takumi/index.js",
+      "import": "./dist/takumi/index.js"
+    },
     "./plugin": {
       "types": "./dist/plugin.d.ts",
       "import": "./dist/plugin.js"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "dist",
@@ -22,26 +60,34 @@
     "!dist/**/*.spec.*"
   ],
   "devDependencies": {
-    "@sveltejs/adapter-vercel": "^5.10.2",
-    "@sveltejs/kit": "^2.48.5",
-    "@sveltejs/package": "^2.5.4",
+    "@eslint/compat": "^2.0.3",
+    "@eslint/js": "^9.39.3",
+    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/kit": "^2.53.4",
+    "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^4.0.4",
-    "@types/node": "^24.7.1",
+    "@types/node": "^24.11.0",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "css-tree": "^2.3.1",
     "eslint": "^8.57.1",
-    "eslint-config-prettier": "^8.10.0",
+    "eslint-config-prettier": "^8.10.2",
+    "eslint-plugin-oxlint": "^1.55.0",
     "eslint-plugin-svelte": "^2.46.1",
-    "prettier": "^3.6.2",
-    "prettier-plugin-svelte": "^3.4.0",
+    "globals": "^16.5.0",
+    "oxlint": "^1.55.0",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.5.1",
+    "prettier-plugin-tailwindcss": "^0.6.14",
     "publint": "^0.1.16",
     "rollup-plugin-visualizer": "^5.14.0",
-    "svelte": "^5.43.12",
-    "svelte-check": "^4.3.2",
+    "svelte": "^5.53.10",
+    "svelte-check": "^4.4.5",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "vite": "^5.4.19",
+    "typescript-eslint": "^8.57.0",
+    "vite": "^5.4.21",
+    "takumi-js": "2.0.1",
     "vitest": "^1.6.1"
   },
   "main": "./dist/index.js",
@@ -50,13 +96,19 @@
   "type": "module",
   "dependencies": {
     "@resvg/resvg-wasm": "^2.6.2",
-    "satori": "^0.10.14",
+    "satori": "^0.25.0",
     "satori-html": "0.3.2",
-    "std-env": "^3.9.0",
-    "unwasm": "^0.5.0"
+    "std-env": "^4.1.0",
+    "unwasm": "^0.5.3"
   },
   "peerDependencies": {
-    "@sveltejs/kit": ">=2.0.0"
+    "@sveltejs/kit": ">=2.0.0",
+    "takumi-js": "^2.0.1"
+  },
+  "peerDependenciesMeta": {
+    "takumi-js": {
+      "optional": true
+    }
   },
   "scripts": {
     "dev": "vite dev",
@@ -66,7 +118,11 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test": "vitest",
-    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "bench": "vitest bench --run",
+    "bench:save": "vitest bench --run --outputJson benchmarks/baseline.json",
+    "bench:compare": "vitest bench --run --compare benchmarks/baseline.json",
+    "bench:snapshot": "node scripts/bench-snapshot.mjs",
+    "lint": "oxlint . && eslint .",
     "format": "prettier --plugin-search-dir . --write .",
     "publishBeta": "npm publish --tag beta"
   }