@ethercorps/sveltekit-og 4.2.1 → 4.3.0-next.1

package/README.md

@@ -6,8 +6,24 @@
 
 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.
 
+## Table of Contents
+
+- [SvelteKit Open Graph Image Generation](#sveltekit-open-graph-image-generation)
+    - [Table of Contents](#table-of-contents)
+    - [Docs](#docs)
+    - [Installation](#installation)
+    - [Usage](#usage)
+    - [Examples](#examples)
+    - [Contributing](#contributing)
+    - [Changelog](#changelog)
+    - [License](#license)
+    - [Acknowledgements](#acknowledgements)
+    - [Authors](#authors)
+    - [Contributors](#contributors)
+
 ## Docs
-- With `sveltekit-og@4`, we have [official documentation](https://sveltekit-og.dev). 
+
+For more detailed information and advanced usage, please refer to the [official documentation](https://sveltekit-og.dev).
 
 ## Installation
 
@@ -17,210 +33,28 @@ pnpm install @ethercorps/sveltekit-og
 
 ## Usage
 
-### Vite (Recommended)
-
-- Add vite plugin
-
-```typescript title="vite.cofig.js"
-import { sveltekit } from '@sveltejs/kit/vite';
-import { sveltekitOG } from '@ethercorps/sveltekit-og/plugin';
-const config = {
-	plugins: [sveltekit(), sveltekitOG()]
-};
- 
-export default config;
-```
-
-### Rollup (will be deprecated in v5)
-- Add `rollupWasm` to `build.rollupOptions.plugins` in `vite.cofig.js` file.
-- For more information, check [docs](https://sveltekit-og.dev/docs/getting-started)
-
-```ts title="vite.cofig.js"
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vitest/config';
-import { rollupWasm } from '@ethercorps/sveltekit-og/plugin';
-
-export default defineConfig({
-	plugins: [sveltekit()],
-	build: {
-		rollupOptions: {
-			plugins: [rollupWasm()],
-		}
-	}
-});
-```
-
-- For node adapter update config with `rollupWasm`
-- Check node runtime [docs](https://sveltekit-og.dev/docs/runtime/node)
-
-```ts title="vite.cofig.js"
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vitest/config';
-import { rollupWasm } from '@ethercorps/sveltekit-og/plugin';
-
-export default defineConfig({
-	plugins: [sveltekit()],
-	build: {
-		rollupOptions: {
-			plugins: [
-				rollupWasm({ esmImport: false })
-            ],
-		}
-	}
-});
-```
-
-- Create a file at `/src/routes/og/+server.ts`. Alternatively, you can use JavaScript by removing the types from this example.
-
-```typescript
-// src/routes/og/+server.ts
-import { ImageResponse } from '@ethercorps/sveltekit-og';
-import { RequestHandler } from './$types';
-
-const template = `
- <div tw="bg-gray-50 flex w-full h-full items-center justify-center">
-    <div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
-      <h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left">
-        <span>Ready to dive in?</span>
-        <span tw="text-indigo-600">Start your free trial today.</span>
-      </h2>
-      <div tw="mt-8 flex md:mt-0">
-        <div tw="flex rounded-md shadow">
-          <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white">Get started</a>
-        </div>
-        <div tw="ml-3 flex rounded-md shadow">
-          <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600">Learn more</a>
-        </div>
-      </div>
-    </div>
-  </div>
-`;
-
-const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
-const fontData: ArrayBuffer = await fontFile.arrayBuffer();
-
-export const GET: RequestHandler = async () => {
-  return await new ImageResponse(template, {
-    height: 630,
-    width: 1200,
-    fonts: [
-      {
-        name: 'Inter Latin',
-        data: fontData,
-        weight: 400
-      }
-    ]
-  });
-};
-```
-
-Then run `npm dev` and visit `localhost:5173/og` to view your generated PNG. Remember that hot module reloading does not work with server routes, so if you change your HTML or CSS, hard refresh the route to see changes.
-
-## Example Output
-
-![Rendered OG image](https://github.com/etherCorps/sveltekit-og/blob/main/static/og.png)
-
-## Headers
-
-When run in development, image headers contain `cache-control: no-cache, no-store`. In production, image headers contain `'cache-control': 'public, immutable, no-transform, max-age=31536000'`, which caches the image for 1 year. In both cases, the `'content-type': 'image/png'` is used.
-
-## Styling
-
-Notice that our example uses TailwindCSS classes (e.g. `tw="bg-gray-50"`). Alternatively, your HTML can contain style attributes using any of [the subset of CSS supported by Satori](https://github.com/vercel/satori#css).
-
-Satori supports only a subset of HTML and CSS. For full details, see [Satori’s documentation](https://github.com/vercel/satori#documentation). Notably, Satori only supports flex-based layouts.
-
-## Fonts
-
-Satori supports `ttf`, `otf`, and `woff` font formats; `woff2` is not supported. To maximize the font parsing speed, `ttf` or `otf` are recommended over `woff`.
-
-By default, `@ethercorps/sveltekit-og` includes only 'Noto Sans' font. If you need to use other fonts, you can specify them as shown in the example. Notably, you can also import a font file that is stored locally within your project and are not required to use fetch.
+For detailed usage instructions, please see the [Getting Started](https://sveltekit-og.dev/docs/getting-started) section of our documentation.
 
 ## Examples
 
-- `ImageResponse` · [_source_](/src/routes/+server.ts) · [_demo_](https://vercel.sveltekit-og.dev)
-- `Component Rendering` · [_source_](/src/routes/sc/+server.ts) · [_demo_](https://vercel.sveltekit-og.dev/sc)
-
-## API Reference
-
-The package exposes an `ImageResponse` constructors, with the following options available:
-
-```typescript
-import {ImageResponse} from '@ethercorps/sveltekit-og'
-import {SvelteComponent} from "svelte";
-
-ImageResponse(
-    element : string | Component,
-    options : {
-      width ? : number = 1200
-      height ? : number = 630,
-      backgroundColor ? : string = "#fff"
-      fonts ? : {
-          name: string,
-          data: ArrayBuffer,
-          weight: number,
-          style: 'normal' | 'italic'
-      }[]
-      debug ? : boolean = false
-      // Options that will be passed to the HTTP response
-      status ? : number = 200
-      statusText ? : string
-      headers ? : Record<string, string>
-    },
-    // Component props if components. 
-    ComponentProps<Component>
-  )
-```
-
-## Changelog
-
-### v4.0.0 (Breaking Changes)
-
-> Just install @ethercorps/sveltekit-og
-
-> Support for NodeJS, Deno, Cloudflare Pages, Cloudflare Workers, Vercel and Netlify.
-
-> No support for Bun tried and failed.
-
-
-### v3.0.0 (Breaking Changes)
-
-> Just install @ethercorps/sveltekit-og
-> No wasm as of now, only support for nodejs based runtime.
+- **ImageResponse**: [_source_](/src/routes/+server.ts) · [_demo_](https://vercel.sveltekit-og.dev)
+- **Component Rendering**: [_source_](/src/routes/sc/+server.ts) · [_demo_](https://vercel.sveltekit-og.dev/sc)
 
-### v1.2.3 Update (Breaking Changes)
+## Contributing
 
-> Now you have to install dependency by yourself which will make it easier to build for all plateforms.
+Contributions are welcome! Please read our [contributing guidelines](CONTRIBUTING.md) to get started.
 
-```
-npm i @resvg/resvg-js
-```
-
-```
-npm i satori
-```
-
-> From now on their will be no issues related to build, and soon this library going to have its own documentation.
-
-### v1.2.2 Update (Breaking Change)
-
-- We don't provide access to satori from `@ethercorps/sveltekit-og`.
-
-### v1.0.0 Update (Breaking Changes)
+## Changelog
 
-Finally, We have added html to react like element like object converter out of the box and with svelte compiler.
-Now you can use `{ toReactElement }` with `"@ethercorps/sveltekit-og"` like:
+All notable changes to this project are documented in the [changelog](CHANGELOG.md).
 
-- We have changed to function based instead of class based ImageResponse and componentToImageResponse.
-- Removed `@resvg/resvg-wasm` with `@resvg/resvg-js` because of internal errors.
-- Removed `satori-html` because now we have `toReactElement` out of the box with svelte compiler.
-  > If you find a problem related to undefined a please check [_vite.config.js_](/vite.config.ts) and add ` define: { _a: 'undefined' } in config.`
+## License
 
-> If you find any issue and have suggestion for this project please open a ticket and if you want to contribute please create a new discussion.
+This project is licensed under the [MIT License](LICENSE).
 
 ## Acknowledgements
 
-This project will not be possible without the following projects:
+This project would not be possible without the following projects:
 
 - [Satori & @vercel/og](https://github.com/vercel/satori)
 - [Noto by Google Fonts](https://fonts.google.com/noto)

package/dist/fonts.d.ts

@@ -1,4 +1,4 @@
-import type { FinalFontOptions, FontStyle, FontWeight, MayBePromise } from './types.js';
+import type { FinalFontOptions, FontStyle, FontWeight, MayBePromise } from "./types.js";
 interface BaseFontOptions {
     weight?: FontWeight;
     style?: FontStyle;
@@ -7,32 +7,24 @@ interface BaseFontOptions {
  * All font types inherit from this class.
  */
 export declare class BaseFont {
-    protected input: any;
     name: string;
     style: FontStyle;
     weight: FontWeight;
-    constructor(name: string, input: any, { weight, style }?: BaseFontOptions);
+    constructor(name: string, { weight, style }?: BaseFontOptions);
     /** * Abstract getter that returns the promised ArrayBuffer.
      * Overridden by CustomFont and GoogleFont for lazy loading.
      */
     get data(): MayBePromise<Buffer | ArrayBuffer>;
 }
-/** * A helper class to load Custom fonts, typically from local files.
- * The input must be a function provided by the user (e.g., using $app/server/read).
- */
 export declare class CustomFont extends BaseFont {
+    protected input: MayBePromise<Buffer | ArrayBuffer> | (() => MayBePromise<Buffer | ArrayBuffer>);
     private promise?;
-    /**
-     * Creates an instance of CustomFont.
-     * @param name The name of the font (for CSS font-family).
-     * @param input Font data as ArrayBuffer or a function that resolves to ArrayBuffer (user must provide the loading logic).
-     */
     constructor(name: string, input: MayBePromise<Buffer | ArrayBuffer> | (() => MayBePromise<Buffer | ArrayBuffer>), options?: BaseFontOptions);
-    /** A promise which resolves to font data as `ArrayBuffer` (Lazy load) */
+    /** A promise which resolves to font data as `ArrayBuffer` (Lazy load and CACHED) */
     get data(): Promise<Buffer | ArrayBuffer>;
 }
 /** Loads Google font ArrayBuffer with caching. */
-export declare const loadGoogleFont: (family: string, { text, weight, style, display }?: {
+export declare const loadGoogleFont: (family: string, { text, weight, style, display, }?: {
     text?: string;
     weight?: string | number;
     style?: FontStyle;

package/dist/fonts.js

@@ -1,14 +1,13 @@
-import { FONT_CACHE_MAP } from './helpers/cache.js';
+import { FONT_CACHE_MAP } from "./helpers/cache.js";
+import { logger } from "./helpers/logger.js";
 /** * Base font class defining the structure required by Satori.
  * All font types inherit from this class.
  */
 export class BaseFont {
-    input;
     name;
     style;
     weight;
-    constructor(name, input, { weight = 400, style = 'normal' } = {}) {
-        this.input = input;
+    constructor(name, { weight = 400, style = "normal" } = {}) {
         this.name = name;
         this.style = style;
         this.weight = weight;
@@ -17,43 +16,47 @@ export class BaseFont {
      * Overridden by CustomFont and GoogleFont for lazy loading.
      */
     get data() {
-        return this.input;
+        throw new Error("The 'data' getter must be implemented by subclasses of BaseFont.");
     }
 }
-/** * A helper class to load Custom fonts, typically from local files.
- * The input must be a function provided by the user (e.g., using $app/server/read).
- */
 export class CustomFont extends BaseFont {
+    input;
     promise;
-    /**
-     * Creates an instance of CustomFont.
-     * @param name The name of the font (for CSS font-family).
-     * @param input Font data as ArrayBuffer or a function that resolves to ArrayBuffer (user must provide the loading logic).
-     */
     constructor(name, input, options) {
-        super(name, input, options);
+        super(name, options);
+        this.input = input;
     }
-    /** A promise which resolves to font data as `ArrayBuffer` (Lazy load) */
+    /** A promise which resolves to font data as `ArrayBuffer` (Lazy load and CACHED) */
     get data() {
-        // Defines the loading mechanism: execute the input function or resolve the promise/buffer.
-        const fallback = async () => (typeof this.input === 'function' ? this.input() : this.input);
-        // Memoization: ensures the input function is executed only once.
+        const cacheKey = `${this.name}-${this.weight}-${this.style}`;
+        const cachedData = FONT_CACHE_MAP.get(cacheKey);
+        if (cachedData) {
+            return Promise.resolve(cachedData);
+        }
+        const fallback = async () => {
+            const buffer = typeof this.input === "function" ? this.input() : this.input;
+            const resolvedBuffer = await buffer;
+            FONT_CACHE_MAP.set(cacheKey, resolvedBuffer);
+            return resolvedBuffer;
+        };
         this.promise = this.promise?.then(null, fallback) ?? fallback();
         return this.promise;
     }
 }
 /** Constructs Google font css url */
-const constructGoogleFontCssUrl = (family, { text, weight = 400, style = 'normal', display } = {}) => {
+const constructGoogleFontCssUrl = (family, { text, weight = 400, style = "normal", display, } = {}) => {
     // Logic to build the URL (e.g., https://fonts.googleapis.com/css2?family=...wght@...)
     const params = {
-        family: `${family.replaceAll(' ', '+')}:${style === 'italic' ? 'ital,' : ''}wght@${style === 'italic' ? '1,' : ''}${weight}`,
+        family: `${family.replaceAll(" ", "+")}:${style === "italic" ? "ital," : ""}wght@${style === "italic" ? "1," : ""}${weight}`,
     };
     if (text)
         params.text = encodeURIComponent(text);
-    return `https://fonts.googleapis.com/css2?${Object.keys(params).map((key) => `${key}=${params[key]}`).join('&')}`;
+    return `https://fonts.googleapis.com/css2?${Object.keys(params)
+        .map((key) => `${key}=${params[key]}`)
+        .join("&")}`;
 };
 /** Loads Google font ArrayBuffer with caching. */
-export const loadGoogleFont = async (family, { text, weight = 400, style = 'normal', display } = {}) => {
+export const loadGoogleFont = async (family, { text, weight = 400, style = "normal", display, } = {}) => {
     const cssUrl = constructGoogleFontCssUrl(family, { text, weight, display, style });
     const fromMap = FONT_CACHE_MAP.get(cssUrl);
     if (fromMap) {
@@ -61,22 +64,26 @@ export const loadGoogleFont = async (family, { text, weight = 400, style = 'norm
     }
     const cssResponse = await fetch(cssUrl);
     if (!cssResponse.ok) {
+        logger.error(`Failed to fetch Google Font CSS for ${family}. Status: ${cssResponse.status}`);
         throw new Error(`Failed to fetch Google Font CSS for ${family}. Status: ${cssResponse.status}`);
     }
     const css = await cssResponse.text();
     // 3. Extract the font file URL (the actual TTF/OTF file)
     const fontUrl = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/)?.[1];
     if (!fontUrl) {
+        logger.error(`Could not find a compatible truetype font source in the CSS for ${family}.`);
         throw new Error(`Could not find a compatible truetype font source in the CSS for ${family}.`);
     }
     // 4. Fetch the font buffer
     const fontResponse = await fetch(fontUrl);
     if (!fontResponse.ok) {
+        logger.error(`Failed to fetch font file from URL. Status: ${fontResponse.status}`);
         throw new Error(`Failed to fetch font file from URL. Status: ${fontResponse.status}`);
     }
     const buffer = await fontResponse.arrayBuffer();
     // 5. CACHE AND RETURN: Store the resolved ArrayBuffer in the Map, keyed by the CSS URL.
     FONT_CACHE_MAP.set(cssUrl, buffer);
+    logger.debug(`Loaded Google Font: ${family}`);
     return buffer;
 };
 export class GoogleFont extends BaseFont {
@@ -84,7 +91,7 @@ export class GoogleFont extends BaseFont {
     text;
     promise;
     constructor(family, options = {}) {
-        super(options.name || family, undefined, options);
+        super(options.name || family, options);
         this.family = family;
         this.text = options.text;
     }
@@ -108,5 +115,5 @@ export async function resolveFonts(fontClasses) {
             style: fontClass.style,
         };
     }));
-    return resolvedFonts.filter(font => font !== null);
+    return resolvedFonts.filter((font) => font !== null);
 }

package/dist/helpers/create.d.ts

@@ -1,4 +1,4 @@
-import type { Component } from 'svelte';
-import type { ComponentOptions, ImageOptions } from '../types.js';
+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>>;

package/dist/helpers/create.js

@@ -1,37 +1,37 @@
-import { loadDynamicAsset } from './emoji.js';
-import { default_fonts, DEFAULT_WIDTH } from '../helpers/defaults.js';
-import { useResvg, useSatori } from '../providers/instances.js';
-import { createVNode } from './toJSX.js';
+import { loadDynamicAsset } from "./emoji.js";
+import { default_fonts, DEFAULT_WIDTH } from "../helpers/defaults.js";
+import { useResvg, useSatori } from "../providers/instances.js";
+import { createVNode } from "./toJSX.js";
+import { logger } from "./logger.js";
 export async function createSvg(element, imageOptions, componentOptions) {
-    const [satori, vnodes] = await Promise.all([useSatori(), createVNode(element, componentOptions)]);
+    const [satori, vnodes] = await Promise.all([
+        useSatori(),
+        createVNode(element, componentOptions),
+    ]);
     const satoriOptions = structuredClone(imageOptions);
-    if (!Object.hasOwn(satoriOptions, 'fonts')) {
-        satoriOptions['fonts'] = await default_fonts();
+    if (!Object.hasOwn(satoriOptions, "fonts")) {
+        satoriOptions["fonts"] = await default_fonts();
     }
-    satoriOptions['loadAdditionalAsset'] = loadDynamicAsset({
-        emoji: imageOptions.emoji
+    satoriOptions["loadAdditionalAsset"] = loadDynamicAsset({
+        emoji: imageOptions.emoji,
     });
-    if (satoriOptions.debug) {
-        console.info('VNode proivided to satori:', vnodes, '\n');
-        console.info('Options proivided to satori:', imageOptions, '\n');
-    }
+    logger.debug("Generating SVG with Satori");
+    logger.info("VNode provided to satori:", JSON.stringify(vnodes, null, 2), "\n");
+    logger.info("Options provided to satori:", imageOptions);
     return satori(vnodes, satoriOptions);
 }
 export async function createPng(element, imageOptions, componentOptions) {
     const svg = await createSvg(element, imageOptions, componentOptions);
-    if (imageOptions.debug) {
-        console.info('SVG generated by satori:', svg, '\n');
-    }
+    logger.debug("SVG generated by satori for ReSVG: \n", svg, "\n");
     const resvg_instance = await useResvg();
     const resvg_options = {
         fitTo: {
-            mode: 'width',
+            mode: "width",
             value: imageOptions.width || DEFAULT_WIDTH,
-        }
+        },
     };
-    if (imageOptions.debug) {
-        console.info('Options provided to ReSVG:', resvg_options, '\n');
-    }
+    logger.debug("Rendering PNG with ReSVG");
+    logger.info("Options provided to ReSVG:", resvg_options, "\n");
     const resvg = new resvg_instance(svg, resvg_options);
     const png_data = resvg.render();
     return png_data.asPng();

package/dist/helpers/defaults.d.ts

@@ -1,7 +1,7 @@
-import type { SatoriOptions } from 'satori';
-import type { ImageOptions } from '../types.js';
-import type { EmojiType } from './emoji.js';
-export declare function default_fonts(): Promise<SatoriOptions['fonts']>;
+import type { SatoriOptions } from "satori";
+import type { ImageOptions } from "../types.js";
+import type { EmojiType } from "./emoji.js";
+export declare function default_fonts(): Promise<SatoriOptions["fonts"]>;
 export declare const DEFAULT_FORMAT = "png";
 export declare const DEFAULT_WIDTH = 1200;
 export declare const DEFAULT_HEIGHT = 630;

package/dist/helpers/defaults.js

@@ -1,37 +1,41 @@
 export async function default_fonts() {
     const [noto_sans_regular_font_resp, noto_sans_bold_font_reps] = await Promise.all([
-        fetch('https://cdn-sveltekit-og.ethercorps.io/NotoSans-Regular.ttf'), fetch('https://cdn-sveltekit-og.ethercorps.io/NotoSans-Bold.ttf')
+        fetch("https://cdn-sveltekit-og.ethercorps.io/NotoSans-Regular.ttf"),
+        fetch("https://cdn-sveltekit-og.ethercorps.io/NotoSans-Bold.ttf"),
     ]);
     if (!(noto_sans_bold_font_reps.ok || noto_sans_bold_font_reps.ok)) {
-        console.error('Not able to load default fonts');
-        throw new Error('Not able to load default fonts');
+        console.error("Not able to load default fonts");
+        throw new Error("Not able to load default fonts");
     }
-    const [noto_sans_regular_font, noto_sans_bold_font] = await Promise.all([noto_sans_regular_font_resp.arrayBuffer(), noto_sans_bold_font_reps.arrayBuffer()]);
+    const [noto_sans_regular_font, noto_sans_bold_font] = await Promise.all([
+        noto_sans_regular_font_resp.arrayBuffer(),
+        noto_sans_bold_font_reps.arrayBuffer(),
+    ]);
     return [
         {
             data: noto_sans_regular_font,
-            name: 'Inter',
+            name: "Inter",
             weight: 400,
-            style: 'normal'
+            style: "normal",
         },
         {
             data: noto_sans_bold_font,
-            name: 'Inter',
+            name: "Inter",
             weight: 700,
-            style: 'normal'
-        }
+            style: "normal",
+        },
     ];
 }
-export const DEFAULT_FORMAT = 'png';
+export const DEFAULT_FORMAT = "png";
 export const DEFAULT_WIDTH = 1200;
 export const DEFAULT_HEIGHT = 630;
-export const DEFAULT_EMOJI_PROVIDER = 'twemoji';
+export const DEFAULT_EMOJI_PROVIDER = "twemoji";
 export const DEFAULT_STATUS_CODE = 200;
-export const DEFAULT_STATUS_TEXT = 'Success';
+export const DEFAULT_STATUS_TEXT = "Success";
 export const DEFAULT_OPTIONS = {
     height: DEFAULT_HEIGHT,
     width: DEFAULT_WIDTH,
     debug: false,
     format: DEFAULT_FORMAT,
-    emoji: 'twemoji'
+    emoji: "twemoji",
 };

package/dist/helpers/emoji.js

@@ -1,4 +1,4 @@
-import { DEFAULT_EMOJI_PROVIDER } from '../helpers/defaults.js';
+import { DEFAULT_EMOJI_PROVIDER } from "../helpers/defaults.js";
 // Code stolen from @vercel/og and https://github.com/fineshopdesign/cf-wasm
 const U200D = String.fromCharCode(8205);
 const UFE0Fg = /\uFE0F/g;
@@ -11,7 +11,7 @@ function toCodePoint(unicodeSurrogates) {
     while (i < unicodeSurrogates.length) {
         c = unicodeSurrogates.charCodeAt(i++);
         if (p) {
-            r.push((65536 + (p - 55296 << 10) + (c - 56320)).toString(16));
+            r.push((65536 + ((p - 55296) << 10) + (c - 56320)).toString(16));
             p = 0;
         }
         else if (55296 <= c && c <= 56319) {
@@ -24,12 +24,18 @@ function toCodePoint(unicodeSurrogates) {
     return r.join("-");
 }
 const emoji_apis = {
-    twemoji: (code) => "https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/" + code.toLowerCase() + ".svg",
+    twemoji: (code) => "https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/" +
+        code.toLowerCase() +
+        ".svg",
     openmoji: "https://cdn.jsdelivr.net/npm/@svgmoji/openmoji@2.0.0/svg/",
     blobmoji: "https://cdn.jsdelivr.net/npm/@svgmoji/blob@2.0.0/svg/",
     noto: "https://cdn.jsdelivr.net/gh/svgmoji/svgmoji/packages/svgmoji__noto/svg/",
-    fluent: (code) => "https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/" + code.toLowerCase() + "_color.svg",
-    fluentFlat: (code) => "https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/" + code.toLowerCase() + "_flat.svg"
+    fluent: (code) => "https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/" +
+        code.toLowerCase() +
+        "_color.svg",
+    fluentFlat: (code) => "https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/" +
+        code.toLowerCase() +
+        "_flat.svg",
 };
 function loadEmoji(code, type) {
     if (!type || !emoji_apis[type]) {
@@ -44,7 +50,11 @@ function loadEmoji(code, type) {
 export const loadDynamicAsset = ({ emoji }) => {
     const fn = async (code, text) => {
         if (code === "emoji") {
-            return `data:image/svg+xml;base64,` + btoa(await (await loadEmoji(getIconCode(text), emoji)).text());
+            const iconCode = getIconCode(text);
+            const emojiResponse = await loadEmoji(iconCode, emoji);
+            const svgText = await emojiResponse.text();
+            const base64Data = btoa(svgText);
+            return `data:image/svg+xml;base64,` + base64Data;
         }
     };
     return async (...args) => {

package/dist/helpers/logger.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Set the debug flag for the current request context
+ * Call this once at the beginning of your request handler
+ */
+export declare function setDebug(enabled: boolean): void;
+/**
+ * Get the current debug flag from the request context
+ */
+export declare function isDebugEnabled(): boolean;
+export declare const logger: {
+    debug: (message: string, ...args: unknown[]) => void;
+    info: (message: string, ...args: unknown[]) => void;
+    warn: (message: string, ...args: unknown[]) => void;
+    error: (message: string, ...args: unknown[]) => void;
+};

package/dist/helpers/logger.js

@@ -0,0 +1,39 @@
+import { AsyncLocalStorage } from 'node:async_hooks';
+const PREFIX = '[SvelteKit-OG]';
+// Store for request-scoped debug flag
+const debugStorage = new AsyncLocalStorage();
+/**
+ * Set the debug flag for the current request context
+ * Call this once at the beginning of your request handler
+ */
+export function setDebug(enabled) {
+    debugStorage.enterWith(enabled);
+}
+/**
+ * Get the current debug flag from the request context
+ */
+export function isDebugEnabled() {
+    return debugStorage.getStore() ?? false;
+}
+export const logger = {
+    debug: (message, ...args) => {
+        if (isDebugEnabled()) {
+            console.log(`${PREFIX} 🔍 ${message}`, ...args);
+        }
+    },
+    info: (message, ...args) => {
+        if (isDebugEnabled()) {
+            console.info(`${PREFIX} ℹ️ ${message}`, ...args);
+        }
+    },
+    warn: (message, ...args) => {
+        if (isDebugEnabled()) {
+            console.warn(`${PREFIX} ⚠️ ${message}`, ...args);
+        }
+    },
+    error: (message, ...args) => {
+        if (isDebugEnabled()) {
+            console.error(`${PREFIX} ❌ ${message}`, ...args);
+        }
+    }
+};

package/dist/helpers/toJSX.d.ts

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

package/dist/helpers/toJSX.js

@@ -1,9 +1,11 @@
-import { render } from 'svelte/server';
-import { html } from 'satori-html';
+import { render } from "svelte/server";
+import { html } from "satori-html";
 function svelteComponentToHTML(component, props = {}) {
     const { body, head } = render(component, { props });
     return html(body + head);
 }
 export function createVNode(element, componentOptions) {
-    return typeof element === 'string' ? html(element.replaceAll('\n', '').trim()) : svelteComponentToHTML(element, componentOptions?.props);
+    return typeof element === "string"
+        ? html(element.replaceAll("\n", "").trim())
+        : svelteComponentToHTML(element, componentOptions?.props);
 }

package/dist/image-response.d.ts

@@ -1,5 +1,5 @@
-import type { Component, ComponentProps } from 'svelte';
-import type { ImageResponseOptions } from './types.js';
+import type { Component, ComponentProps } from "svelte";
+import type { ImageResponseOptions } from "./types.js";
 export declare class ImageResponse<T extends string | Component<any>> extends Response {
     constructor(element: T, options?: ImageResponseOptions, props?: T extends Component<any> ? ComponentProps<T> : never);
 }

package/dist/image-response.js

@@ -1,26 +1,31 @@
-import { DEFAULT_OPTIONS, DEFAULT_STATUS_CODE, DEFAULT_STATUS_TEXT } from './helpers/defaults.js';
-import { createPng, createSvg } from './helpers/create.js';
+import { DEFAULT_OPTIONS, DEFAULT_STATUS_CODE, DEFAULT_STATUS_TEXT } from "./helpers/defaults.js";
+import { createPng, createSvg } from "./helpers/create.js";
+import { isDebugEnabled, logger, setDebug } from "./helpers/logger.js";
 export class ImageResponse extends Response {
     constructor(element, options, props) {
         const extended_options = Object.assign({ ...DEFAULT_OPTIONS }, options);
-        const create_image_function = extended_options.format === 'png' ? createPng : createSvg;
+        setDebug(extended_options.debug ?? false);
+        logger.debug("Debug mode", isDebugEnabled());
+        const create_image_function = extended_options.format === "png" ? createPng : createSvg;
         const body = new ReadableStream({
             async start(controller) {
-                const buffer = await create_image_function(element, extended_options, { props });
+                const buffer = await create_image_function(element, extended_options, {
+                    props,
+                });
                 controller.enqueue(buffer);
                 controller.close();
-            }
+            },
         });
         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
+                "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
+            statusText: extended_options.statusText || DEFAULT_STATUS_TEXT,
         });
     }
 }

package/dist/plugin.js

@@ -3,20 +3,20 @@ export function rollupWasm(options) {
     return unwasm({
         esmImport: true,
         lazy: true,
-        ...options
+        ...options,
     });
 }
 export function sveltekitOG(options) {
     return {
-        name: 'vite-plugin-sveltekit-og',
+        name: "vite-plugin-sveltekit-og",
         config() {
             return {
                 build: {
                     rollupOptions: {
-                        plugins: [rollupWasm(options)]
-                    }
-                }
+                        plugins: [rollupWasm(options)],
+                    },
+                },
             };
-        }
+        },
     };
 }

package/dist/providers/instances.d.ts

@@ -1,4 +1,4 @@
-import type _satori from 'satori';
+import type _satori from "satori";
 export declare function useResvg(): Promise<new (svg: Uint8Array | string, options?: import("@resvg/resvg-wasm").ResvgRenderOptions) => {
     free(): void;
     render(): {

package/dist/providers/instances.js

@@ -1,17 +1,32 @@
-import { isEdgeLight, isWorkerd } from 'std-env';
+import { isEdgeLight, isWorkerd } from "std-env";
+import { logger } from "../helpers/logger.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 };
+const resvgInstance = {
+    instance: undefined,
+};
+const satoriInstance = {
+    instance: undefined,
+};
 export async function useResvg() {
-    const moduleImport = isEdgeLight || isWorkerd ? import(`./resvg/edge.js`) : import('./resvg/node.js');
-    resvgInstance.instance = resvgInstance.instance || await moduleImport.then(m => m.default);
+    if (resvgInstance.instance) {
+        return resvgInstance.instance.Resvg;
+    }
+    logger.debug("Initializing Resvg WASM");
+    const isWorkerLikeRuntime = isEdgeLight || isWorkerd;
+    logger.info(`Detected runtime: ${isWorkerLikeRuntime ? "Edge Light or Workerd" : "Node.js"}`);
+    const moduleImport = isWorkerLikeRuntime ? import(`./resvg/edge.js`) : import("./resvg/node.js");
+    resvgInstance.instance = await moduleImport.then((m) => m.default);
     await resvgInstance.instance.initWasmPromise;
     return resvgInstance.instance.Resvg;
 }
 export async function useSatori() {
-    satoriInstance.instance = satoriInstance.instance || await import(`./satori/node.js`).then(m => m.default);
+    if (satoriInstance.instance) {
+        return satoriInstance.instance.satori;
+    }
+    logger.debug("Initializing Satori WASM");
+    satoriInstance.instance = await import(`./satori/node.js`).then((m) => m.default);
     await satoriInstance.instance.initWasmPromise;
     return satoriInstance.instance.satori;
 }

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

@@ -3,4 +3,4 @@ declare namespace _default {
     export { _Resvg as Resvg };
 }
 export default _default;
-import { Resvg as _Resvg } from '@resvg/resvg-wasm';
+import { Resvg as _Resvg } from "@resvg/resvg-wasm";

package/dist/providers/resvg/edge.js

@@ -1,8 +1,10 @@
-import { Resvg as _Resvg, initWasm } from '@resvg/resvg-wasm'
+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)),
-  Resvg: _Resvg,
-}
+	// @ts-ignore
+	initWasmPromise: initWasm(
+		import("@resvg/resvg-wasm/index_bg.wasm?module").then((r) => r.default || r)
+	),
+	Resvg: _Resvg,
+};

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

@@ -3,4 +3,4 @@ declare namespace _default {
     export { _Resvg as Resvg };
 }
 export default _default;
-import { Resvg as _Resvg } from '@resvg/resvg-wasm';
+import { Resvg as _Resvg } from "@resvg/resvg-wasm";

package/dist/providers/resvg/node.js

@@ -1,13 +1,13 @@
-import { Resvg as _Resvg, initWasm } from '@resvg/resvg-wasm';
+import { Resvg as _Resvg, initWasm } from "@resvg/resvg-wasm";
 
 /**
  * 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')
+const resvgWasm = fetch("https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm");
 
 export default {
 	initWasmPromise: initWasm(resvgWasm),
 	Resvg: _Resvg,
-}
+};

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

@@ -3,4 +3,4 @@ declare namespace _default {
     export { _satori as satori };
 }
 export default _default;
-import _satori from 'satori';
+import _satori from "satori";

package/dist/providers/satori/node.js

@@ -1,6 +1,6 @@
-import _satori from 'satori'
+import _satori from "satori";
 
 export default {
-  initWasmPromise: Promise.resolve(),
-  satori: _satori,
-}
+	initWasmPromise: Promise.resolve(),
+	satori: _satori,
+};

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/wasm";
+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,9 +78,9 @@ 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 */

package/package.json

@@ -1,12 +1,38 @@
 {
   "name": "@ethercorps/sveltekit-og",
-  "version": "4.2.1",
+  "version": "4.3.0-next.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",
@@ -28,26 +54,33 @@
     "!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-vercel": "^5.10.3",
+    "@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",
     "vitest": "^1.6.1"
   },
   "main": "./dist/index.js",
@@ -56,26 +89,28 @@
   "type": "module",
   "dependencies": {
     "@resvg/resvg-wasm": "^2.6.2",
-    "@takumi-rs/helpers": "^0.55.0",
-    "@takumi-rs/image-response": "^0.55.0",
-    "@takumi-rs/wasm": "^0.55.0",
-    "satori": "^0.10.14",
+    "satori": "^0.25.0",
     "satori-html": "0.3.2",
-    "std-env": "^3.9.0",
-    "unwasm": "^0.5.0"
+    "std-env": "^3.10.0",
+    "unwasm": "^0.5.3"
   },
   "peerDependencies": {
     "@sveltejs/kit": ">=2.0.0"
   },
+  "engines": {
+    "node": ">=22.16.0"
+  },
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
+    "build:examples": "pnpm -F \"./examples/**\" --parallel --color build",
+    "check:examples": "pnpm -F \"./examples/**\" --parallel --color i",
     "preview": "vite preview",
     "package": "svelte-kit sync && svelte-package && publint",
     "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 .",
+    "lint": "oxlint . && eslint .",
     "format": "prettier --plugin-search-dir . --write .",
     "publishBeta": "npm publish --tag beta"
   }