@ethercorps/sveltekit-og 4.3.0-next.12 → 4.3.0-next.14

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";
+/** Single entry for the Satori and ReSVG engine */
+export declare function createImage(element: string | Component, 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, imageOptions: ImageOptions, componentOptions?: ComponentOptions): Promise<string>;
 export declare function createPng(element: string | Component, 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/response.d.ts

@@ -1,3 +1,13 @@
+/** 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" */

package/dist/helpers/response.js

@@ -1,6 +1,19 @@
 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
@@ -12,7 +25,7 @@ export function buildImageResponse(produce, opts) {
         async start(controller) {
             try {
                 const out = await handleAsync(produce, ErrorCodes.UNKNOWN_ERROR, `Failed to generate ${opts.label}`);
-                const bytes = typeof out === "string" ? new TextEncoder().encode(out) : out;
+                const bytes = typeof out === "string" ? textEncoder.encode(out) : out;
                 log.info(`Generated ${opts.label}: ${formatBytes(bytes.byteLength)}`);
                 controller.enqueue(bytes);
                 controller.close();
@@ -32,8 +45,8 @@ export function buildImageResponse(produce, opts) {
                 : "public, immutable, no-transform, max-age=31536000",
             ...opts.headers,
         },
-        status: opts.status || 200,
-        statusText: opts.statusText || "Success",
+        status: opts.status || DEFAULT_STATUS_CODE,
+        statusText: opts.statusText || DEFAULT_STATUS_TEXT,
     };
     return { body, init };
 }

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, componentProps?: 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, componentProps) {
     return handleSync(() => {
-        const { body, head } = renderComponentToHtml(component, props);
+        if (typeof element === "string")
+            return html(element.replaceAll("\n", "").trim());
+        const { body, head } = renderComponentToHtml(element, componentProps?.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.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]);

package/dist/image-response.js

@@ -1,14 +1,13 @@
 import { DEFAULT_OPTIONS } from "./helpers/defaults.js";
-import { createPng, createSvg } from "./helpers/create.js";
-import { buildImageResponse } from "./helpers/response.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 opts = Object.assign({ ...DEFAULT_OPTIONS }, options);
+        const opts = { ...DEFAULT_OPTIONS, ...options };
         const format = opts.format ?? "png";
-        const createImage = format === "png" ? createPng : createSvg;
-        const { body, init } = buildImageResponse(() => createImage(element, opts, { props }), {
+        const { body, init } = buildImageResponse(() => createImage(element, { ...opts, format }, { props }), {
             label: format.toUpperCase(),
-            contentType: `image/${format}${format === "svg" ? "+xml" : ""}`,
+            contentType: CONTENT_TYPES[format],
             debug: opts.debug ?? false,
             headers: opts.headers,
             status: opts.status,

package/dist/providers/instances.js

@@ -1,44 +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"}`);
-    // workers take a precompiled `?module`; node takes raw wasm bytes. keep both
-    // as direct import() expressions so the bundler can emit the wasm chunk.
-    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/takumi/image-response.js

@@ -1,21 +1,15 @@
 import { createTakumiImage } from "./render.js";
-import { buildImageResponse } from "../helpers/response.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,
 };
-// takumi can also encode jpeg/webp/ico/raw, plus svg as text
-const CONTENT_TYPES = {
-    png: "image/png",
-    jpeg: "image/jpeg",
-    webp: "image/webp",
-    ico: "image/x-icon",
-    raw: "application/octet-stream",
-    svg: "image/svg+xml",
-};
+// 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) {

package/dist/takumi/render.js

@@ -4,19 +4,12 @@ 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";
-import { html } from "satori-html";
-function elementToHtml(element, props) {
-    if (typeof element === "string")
-        return html(element.replaceAll("\n", "").trim());
-    // head carries css injected via <svelte:options css="injected" />, so it goes first
-    const { head, body } = renderComponentToHtml(element, props);
-    return html(head + body);
-}
+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(() => 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);

package/dist/takumi/renderer.d.ts

@@ -1,6 +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. */
-export declare function useTakumiRenderer(_debug?: boolean): Promise<TakumiRenderer>;
+/** 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

@@ -18,9 +18,13 @@ async function initRenderer() {
     }, 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();
+/** 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. */

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,6 +1,6 @@
 {
   "name": "@ethercorps/sveltekit-og",
-  "version": "4.3.0-next.12",
+  "version": "4.3.0-next.14",
   "license": "MIT",
   "homepage": "https://sveltekit-og.dev",
   "repository": "github:ethercorps/sveltekit-og",