@ethercorps/sveltekit-og 2.0.2 → 3.0.0-next.10

package/README.md

@@ -1,58 +1,171 @@
-# create-svelte
+# SvelteKit Open Graph Image Generation
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+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.
 
-Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
+## Disclaimer
+This project doesn't support edge services like vercel edge and cloudflare workers.
 
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
+## Installation
 
 ```bash
-# create a new project in the current directory
-npm create svelte@latest
+pnpm install @ethercorps/sveltekit-og
+```
 
-# create a new project in my-app
-npm create svelte@latest my-app
+## Usage
+
+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 ImageResponse(template, {
+    height: 630,
+    width: 1200,
+    fonts: [
+      {
+        name: 'Inter Latin',
+        data: fontData,
+        weight: 400
+      }
+    ]
+  });
+};
 ```
 
-## Developing
+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.
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+## Example Output
 
-```bash
-npm run dev
+![Rendered OG image](static/demo.png)
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
+## Headers
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+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.
 
-## Building
+## Styling
 
-To build your library:
+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).
 
-```bash
-npm run package
-```
+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.
 
-To create a production version of your showcase app:
+## Fonts
 
-```bash
-npm run build
+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.
+
+## Examples
+
+- `ImageResponse` · [_source_](/src/routes/+server.ts) · [_demo_](https://sveltekit-og-five.vercel.app)
+- `Component Rendering` · [_source_](/src/routes/sc/+server.ts) · [_demo_](https://sveltekit-og-five.vercel.app/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,
+    options : {
+      width ? : number = 1200
+      height ? : number = 630,
+      backgroundColor ? : string = "#fff"
+      fonts ? : {
+          name: string,
+          data: ArrayBuffer,
+          weight: number,
+          style: 'normal' | 'italic'
+      }[]
+      debug ? : boolean = false
+      graphemeImages ? : Record<string, string>;
+      loadAdditionalAsset ? : (languageCode: string, segment: string) => Promise<SatoriOptions["fonts"] | string | undefined>;
+      // Options that will be passed to the HTTP response
+      status ? : number = 200
+      statusText ? : string
+      headers ? : Record<string, string>
+    } {props})
 ```
 
-You can preview the production build with `npm run preview`.
+## Changelog
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+### v3.0.0 (Breaking Changes)
 
-## Publishing
+> Just install @ethercorps/sveltekit-og
+> No wasm as of now, only support for nodejs based runtime.
 
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+### v1.2.3 Update (Breaking Changes)
 
-To publish your library to [npm](https://www.npmjs.com):
+> Now you have to install dependency by yourself which will make it easier to build for all plateforms.
 
-```bash
-npm publish
 ```
+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)
+
+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:
+
+- 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.`
+
+> 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.
+
+## Acknowledgements
+
+This project will not be possible without the following projects:
+
+- [Satori & @vercel/og](https://github.com/vercel/satori)
+- [Noto by Google Fonts](https://fonts.google.com/noto)
+
+[//]: # (- [svg2png-wasm]&#40;https://github.com/ssssota/svg2png-wasm&#41;)
+
+## Authors
+
+- [@theetherGit](https://www.github.com/theetherGit)
+- [@etherCorps](https://www.github.com/etherCorps)
+
+## Contributors
+
+- [@jasongitmail](https://github.com/jasongitmail)

package/dist/helpers/create.d.ts

@@ -0,0 +1,5 @@
+import type { SvelteComponent } from "svelte";
+import type { ComponentOptions, ImageOptions, VNode } from '../types.js';
+export declare function createVNode(element: string | SvelteComponent, componentOptions?: ComponentOptions): VNode;
+export declare function createSvg(element: string | SvelteComponent, imageOptions: ImageOptions, componentOptions?: ComponentOptions): Promise<string>;
+export declare function createPng(element: string | SvelteComponent, imageOptions: ImageOptions, componentOptions?: ComponentOptions): Promise<Uint8Array>;

package/dist/helpers/create.js

@@ -0,0 +1,45 @@
+import { svelteComponentToJsx, toReactElement } from '@ethercorps/svelte-h2j';
+import { loadDynamicAsset } from './emoji.js';
+import { default_fonts } from '../helpers/defaults.js';
+import { useResvg, useSatori } from '../providers/instances.js';
+// TODO: Export VNode Type from svelte-h2j
+// TODO: Make svelte-h2j functions async in new v5 support
+export async function createVNode(element, componentOptions) {
+    return typeof element === 'string' ? toReactElement(element) : svelteComponentToJsx(element, componentOptions?.props);
+}
+export async function createSvg(element, imageOptions, componentOptions) {
+    const [satori, vnodes] = await Promise.all([useSatori(), createVNode(element, componentOptions)]);
+    if (!Object.hasOwn(imageOptions, 'fonts')) {
+        imageOptions['fonts'] = await default_fonts();
+    }
+    // Add dynamic emoji loading handler
+    imageOptions['loadAdditionalAsset'] = loadDynamicAsset({
+        emoji: imageOptions.emoji
+    });
+    if (imageOptions.debug) {
+        console.info('VNode proivided to satori:', vnodes, '\n');
+        console.info('Options proivided to satori:', imageOptions, '\n');
+    }
+    return satori(vnodes, imageOptions);
+}
+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');
+    }
+    const resvg_instance = await useResvg();
+    console.log(resvg_instance, 'f');
+    const resvg_options = {
+        fitTo: {
+            mode: 'width',
+            value: imageOptions.width
+        },
+        logLevel: imageOptions.debug ? 'info' : 'error'
+    };
+    if (imageOptions.debug) {
+        console.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

@@ -0,0 +1,10 @@
+import type { SatoriOptions } from 'satori';
+import type { ImageOptions } from '../types.js';
+export declare function default_fonts(): SatoriOptions['fonts'];
+export declare const DEFAULT_FORMAT = "png";
+export declare const DEFAULT_WIDTH = 1200;
+export declare const DEFAULT_HEIGHT = 630;
+export declare const DEFAULT_EMOJI_PROVIDER = "twemoji";
+export declare const DEFAULT_STATUS_CODE = 200;
+export declare const DEFAULT_STATUS_TEXT = "Success";
+export declare const DEFAULT_OPTIONS: ImageOptions;

package/dist/helpers/defaults.js

@@ -0,0 +1,37 @@
+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')
+    ]);
+    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');
+    }
+    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',
+            weight: 400,
+            style: 'normal'
+        },
+        {
+            data: noto_sans_bold_font,
+            name: 'Inter',
+            weight: 700,
+            style: 'normal'
+        }
+    ];
+}
+export const DEFAULT_FORMAT = 'png';
+export const DEFAULT_WIDTH = 1200;
+export const DEFAULT_HEIGHT = 630;
+export const DEFAULT_EMOJI_PROVIDER = 'twemoji';
+export const DEFAULT_STATUS_CODE = 200;
+export const DEFAULT_STATUS_TEXT = 'Success';
+export const DEFAULT_OPTIONS = {
+    height: DEFAULT_HEIGHT,
+    width: DEFAULT_WIDTH,
+    debug: false,
+    format: 'png',
+    emoji: 'twemoji'
+};

package/dist/helpers/emoji.d.ts

@@ -0,0 +1,3 @@
+export declare const loadDynamicAsset: ({ emoji }: {
+    emoji: any;
+}) => (...args: any[]) => Promise<string | undefined>;

package/dist/helpers/emoji.js

@@ -0,0 +1,53 @@
+import { DEFAULT_EMOJI_PROVIDER } from '../helpers/defaults.js';
+// Code stolen from @vercel/og
+const U200D = String.fromCharCode(8205);
+const UFE0Fg = /\uFE0F/g;
+function getIconCode(char) {
+    return toCodePoint(char.indexOf(U200D) < 0 ? char.replace(UFE0Fg, "") : char);
+}
+function toCodePoint(unicodeSurrogates) {
+    const r = [];
+    let c = 0, p = 0, i = 0;
+    while (i < unicodeSurrogates.length) {
+        c = unicodeSurrogates.charCodeAt(i++);
+        if (p) {
+            r.push((65536 + (p - 55296 << 10) + (c - 56320)).toString(16));
+            p = 0;
+        }
+        else if (55296 <= c && c <= 56319) {
+            p = c;
+        }
+        else {
+            r.push(c.toString(16));
+        }
+    }
+    return r.join("-");
+}
+const emoji_apis = {
+    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"
+};
+function loadEmoji(code, type) {
+    if (!type || !apis[type]) {
+        type = DEFAULT_EMOJI_PROVIDER;
+    }
+    const api = apis[type];
+    if (typeof api === "function") {
+        return fetch(api(code));
+    }
+    return fetch(`${api}${code.toUpperCase()}.svg`);
+}
+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());
+        }
+    };
+    return async (...args) => {
+        return await fn(...args);
+    };
+};

package/dist/image-response.d.ts

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

package/dist/image-response.js

@@ -0,0 +1,27 @@
+import { DEFAULT_OPTIONS, DEFAULT_STATUS_CODE, DEFAULT_STATUS_TEXT } from './helpers/defaults.js';
+import { createPng, createSvg } from './helpers/create.js';
+import { isDevelopment } from 'std-env';
+export class ImageResponse extends Response {
+    constructor(element, options, props) {
+        const extended_options = Object.assign({ ...DEFAULT_OPTIONS }, options);
+        const create_image_funtion = extended_options.format === 'png' ? createPng : createSvg;
+        const body = new ReadableStream({
+            async start(controller) {
+                const buffer = await create_image_funtion(element, extended_options, { props });
+                controller.enqueue(buffer);
+                controller.close();
+            }
+        });
+        super(body, {
+            headers: {
+                'Content-Type': `image/${extended_options.format}`,
+                'Cache-Control': (extended_options.debug || isDevelopment)
+                    ? '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
+        });
+    }
+}

package/dist/index.d.ts

@@ -1 +1,2 @@
-export { componentToImageResponse, ImageResponse, type ImageResponseOptions } from "./api.js";
+export { ImageResponse } from "./image-response.js";
+export type { ImageResponseOptions, VNode } from "./types.js";

package/dist/index.js

@@ -1 +1 @@
-export { componentToImageResponse, ImageResponse } from "./api.js";
+export { ImageResponse } from "./image-response.js";

package/dist/providers/instances.d.ts

@@ -0,0 +1,38 @@
+import type _satori from 'satori';
+export declare function useResvg(): Promise<new (svg: Uint8Array | string, options?: import("@resvg/resvg-wasm").ResvgRenderOptions) => {
+    free(): void;
+    render(): {
+        free(): void;
+        asPng(): Uint8Array;
+        readonly height: number;
+        readonly pixels: Uint8Array;
+        readonly width: number;
+    };
+    toString(): string;
+    innerBBox(): {
+        free(): void;
+        height: number;
+        width: number;
+        x: number;
+        y: number;
+    } | undefined;
+    getBBox(): {
+        free(): void;
+        height: number;
+        width: number;
+        x: number;
+        y: number;
+    } | undefined;
+    cropByBBox(bbox: {
+        free(): void;
+        height: number;
+        width: number;
+        x: number;
+        y: number;
+    }): void;
+    imagesToResolve(): any[];
+    resolveImage(href: string, buffer: Uint8Array): void;
+    readonly height: number;
+    readonly width: number;
+}>;
+export declare function useSatori(): Promise<typeof _satori>;

package/dist/providers/instances.js

@@ -0,0 +1,22 @@
+import { isEdgeLight, isWorkerd } from 'std-env';
+// 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 };
+export async function useResvg() {
+    const isEdge = isEdgeLight || isWorkerd;
+    try {
+        resvgInstance.instance = resvgInstance.instance || await import(`./resvg/${isEdge ? 'wasm' : 'node'}.js`).then(m => m.default);
+        await resvgInstance.instance.initWasmPromise;
+    }
+    catch (e) {
+        console.log(e);
+    }
+    return resvgInstance.instance.Resvg;
+}
+export async function useSatori() {
+    satoriInstance.instance = satoriInstance.instance || await import(`./satori/node.js`).then(m => m.default);
+    await satoriInstance.instance.initWasmPromise;
+    return satoriInstance.instance.satori;
+}

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

@@ -0,0 +1,6 @@
+declare namespace _default {
+    export let initWasmPromise: Promise<void>;
+    export { _Resvg as Resvg };
+}
+export default _default;
+import { Resvg as _Resvg } from '@resvg/resvg-js';

package/dist/providers/resvg/node.js

@@ -0,0 +1,6 @@
+import { Resvg as _Resvg } from '@resvg/resvg-js'
+
+export default {
+	initWasmPromise: Promise.resolve(),
+	Resvg: _Resvg,
+}

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

@@ -0,0 +1,6 @@
+declare namespace _default {
+    export let initWasmPromise: Promise<void>;
+    export { _Resvg as Resvg };
+}
+export default _default;
+import { Resvg as _Resvg } from '@resvg/resvg-wasm';

package/dist/providers/resvg/wasm.js

@@ -0,0 +1,6 @@
+import { Resvg as _Resvg, initWasm } from '@resvg/resvg-wasm'
+
+export default {
+  initWasmPromise: initWasm(import('@resvg/resvg-wasm/index_bg.wasm?module').then(r => r.default || r)),
+  Resvg: _Resvg,
+}

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

@@ -0,0 +1,6 @@
+declare namespace _default {
+    export let initWasmPromise: Promise<void>;
+    export { _satori as satori };
+}
+export default _default;
+import _satori from 'satori';

package/dist/providers/satori/node.js

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

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

@@ -0,0 +1,6 @@
+declare namespace _default {
+    export function initWasmPromise(resolve: any): void;
+    export { _satori as satori };
+}
+export default _default;
+import _satori from 'satori/wasm';

package/dist/providers/satori/wasm.js

@@ -0,0 +1,16 @@
+import _satori from 'satori/wasm'
+import initYoga from 'yoga-wasm-web'
+import { init } from 'satori'
+
+const wasm = import('yoga-wasm-web/dist/yoga.wasm?module')
+  .then(async yoga => await initYoga(yoga.default || yoga))
+
+export default {
+  initWasmPromise: ((resolve) => {
+    wasm.then((yoga) => {
+      init(yoga)
+      resolve()
+    })
+  }),
+  satori: _satori,
+}

package/dist/runtime/compatability.d.ts

@@ -0,0 +1,2 @@
+import type { RuntimeCompatibility, SupportedRuntimes } from '../types.js';
+export declare const runtimeCompatibility: Record<SupportedRuntimes, RuntimeCompatibility>;

package/dist/runtime/compatability.js

@@ -0,0 +1,25 @@
+const NodeRuntime = {
+    'resvg': 'wasm',
+    'satori': 'wasm',
+};
+const WorkersRuntime = {
+    'resvg': 'wasm',
+    'satori': 'node',
+};
+const WebContainerRuntime = {
+    'resvg': 'wasm-fs',
+    'satori': 'wasm-fs',
+};
+export const runtimeCompatibility = {
+    'dev': NodeRuntime,
+    'node': NodeRuntime,
+    'stackblitz': WebContainerRuntime,
+    'codesandbox': WebContainerRuntime,
+    'aws-lambda': NodeRuntime,
+    'netlify': NodeRuntime,
+    'netlify-edge': WorkersRuntime,
+    'vercel': NodeRuntime,
+    'vercel-edge': WorkersRuntime,
+    'cloudflare-pages': WorkersRuntime,
+    'cloudflare-workers': WorkersRuntime
+};

package/dist/runtime/detector.d.ts

@@ -0,0 +1,3 @@
+import type { RuntimeCompatibility, SupportedRuntimes } from '../types.js';
+export declare function getRuntime(): SupportedRuntimes;
+export declare function getRuntimeCompatibility(runtime?: SupportedRuntimes): RuntimeCompatibility;

package/dist/runtime/detector.js

@@ -0,0 +1,29 @@
+import { provider, env, runtime, isDevelopment } from 'std-env';
+import { runtimeCompatibility } from '../runtime/compatability.js';
+export function getRuntime() {
+    if (provider === 'stackblitz' || provider === 'codesandbox')
+        return provider;
+    if (isDevelopment) {
+        return 'node';
+    }
+    const parsedProvider = provider.replace('_', '-');
+    const compatibility = runtimeCompatibility[env['OG_RUNTIME'] || parsedProvider];
+    if (compatibility)
+        return parsedProvider;
+    switch (runtime) {
+        case 'node':
+        case 'deno':
+        case 'bun':
+        case 'netlify':
+        default:
+            return 'node';
+        case 'edge-light':
+            return 'vercel-edge';
+        case 'workerd':
+            return 'cloudflare-workers';
+    }
+    ;
+}
+export function getRuntimeCompatibility(runtime = getRuntime()) {
+    return runtimeCompatibility[runtime];
+}

package/dist/types.d.ts

@@ -0,0 +1,99 @@
+import type { SatoriOptions } from 'satori/wasm';
+export type ImageOptions = {
+    /**
+     * Width of the image
+     * @default 1200
+     * */
+    width?: number;
+    /**
+     * Height of the image
+     * @default 630
+     * */
+    height?: number;
+    /**
+     * Emoji provider
+     * @default twemoji
+     * */
+    emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' | 'fluent' | 'fluentFlat';
+    /**
+     * Fonts used for your text
+     * @default `helpers/defaults.js`
+     * */
+    fonts?: SatoriOptions['fonts'];
+    /**
+     * Tailwind config
+     * @default provided by satori
+     * */
+    tailwindConfig?: SatoriOptions['tailwindConfig'];
+    /**
+     * Debug operations
+     * @default false
+     * */
+    debug?: boolean;
+    /**
+     * Image format
+     * @default png
+     * */
+    format?: 'svg' | 'png';
+};
+export type ResponseImageOptions = {
+    /**
+     * Status code for response
+     * @default 200
+     * */
+    status?: number;
+    /**
+     * Status text for response
+     * @default Success
+     * */
+    statusText?: string;
+    /**
+     * Response Headers
+     * @default {
+     *   'Content-Type': 'image/png',
+     *   'Cache-Control': options.debug ? 'no-cache, no-store' : 'public, immutable, no-transform, max-age=31536000'
+     * }
+     * */
+    headers?: Record<string, string>;
+};
+/**
+ * Image response options type exposed to devs for ImageResponse Instance
+ * */
+export type ImageResponseOptions = ImageOptions & ResponseImageOptions;
+/**
+ * Svelte Component props to render the component which dynamic content
+ * */
+export type ComponentOptions = {
+    props: Record<string, any>;
+};
+/**
+ * React virtual node, supported by satori as input (alternative to JSX input).
+ * */
+export interface VNode {
+    type: string;
+    props: {
+        style?: Record<string, any>;
+        children?: string | VNode | VNode[];
+        [prop: string]: any;
+    };
+}
+/**
+ * Supported runtimes by sveltekit-og
+ * TODO: Test all the runtimes.
+ * */
+export type SupportedRuntimes = 'node' | 'stackblitz' | 'codesandbox' | 'aws-lambda' | 'netlify' | 'netlify-edge' | 'vercel' | 'vercel-edge' | 'cloudflare-pages' | 'cloudflare-workers';
+/**
+ * Files support on the basis of runtime
+ * node: Use nodejs based implementation of the provider
+ * wasm: Use wasm based implementation of the provider
+ * wasm-fs: Mainly provided for web containers which supports `fs`.
+ * */
+type SupportedImplementations = 'node' | 'wasm' | 'wasm-fs';
+/**
+ * Provider and There supported Implementations
+ * */
+export interface RuntimeCompatibility {
+    resvg: SupportedImplementations;
+    satori: SupportedImplementations;
+}
+export {};

package/dist/types.js

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

package/package.json

@@ -1,55 +1,69 @@
 {
-  "name": "@ethercorps/sveltekit-og",
-  "version": "2.0.2",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
-  ],
-  "peerDependencies": {
-    "svelte": "^4.0.0"
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-auto": "^2.0.0",
-    "@sveltejs/kit": "^1.20.4",
-    "@sveltejs/package": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-svelte": "^2.30.0",
-    "prettier": "^2.8.0",
-    "prettier-plugin-svelte": "^2.10.1",
-    "publint": "^0.1.9",
-    "svelte": "^4.0.5",
-    "svelte-check": "^3.4.3",
-    "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
-    "vite": "^4.4.2",
-    "vitest": "^0.34.0"
-  },
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "type": "module",
-  "dependencies": {
-    "@vercel/og": "^0.5.17",
-    "satori-html": "^0.3.2"
-  },
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run package",
-    "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 .",
-    "format": "prettier --plugin-search-dir . --write ."
-  }
+	"name": "@ethercorps/sveltekit-og",
+	"version": "3.0.0-next.10",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"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 .",
+		"format": "prettier --plugin-search-dir . --write .",
+		"publishBeta": "npm publish --tag beta"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"import": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.2.2",
+		"@sveltejs/adapter-vercel": "^5.3.2",
+		"@sveltejs/kit": "^2.5.17",
+		"@sveltejs/package": "^2.3.2",
+		"@sveltejs/vite-plugin-svelte": "^3.1.1",
+		"@typescript-eslint/eslint-plugin": "^5.62.0",
+		"@typescript-eslint/parser": "^5.62.0",
+		"css-tree": "^2.3.1",
+		"eslint": "^8.57.0",
+		"eslint-config-prettier": "^8.10.0",
+		"eslint-plugin-svelte": "^2.40.0",
+		"prettier": "^2.8.8",
+		"prettier-plugin-svelte": "^2.10.1",
+		"publint": "^0.1.16",
+		"svelte": "^4.2.18",
+		"svelte-check": "^3.8.1",
+		"tslib": "^2.6.3",
+		"typescript": "^5.5.2",
+		"vite": "^5.3.1",
+		"vite-plugin-wasm": "^3.3.0",
+		"vitest": "^1.6.0"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"dependencies": {
+		"@ethercorps/svelte-h2j": "^4.0.0",
+		"satori": "^0.10.13",
+		"std-env": "^3.7.0",
+		"unwasm": "^0.3.9",
+		"yoga-wasm-web": "^0.3.3"
+	},
+	"optionalDependencies": {
+		"@resvg/resvg-js": "^2.6.2",
+		"@resvg/resvg-wasm": "^2.6.2"
+	}
 }

package/dist/api.d.ts

@@ -1,63 +0,0 @@
-/// <reference types="node" />
-import { ImageResponse as IR } from "@vercel/og";
-import type { SvelteComponent } from "svelte";
-export declare const ImageResponse: (htmlTemplate: string, options?: ImageResponseOptions) => Promise<IR>;
-export declare const componentToImageResponse: (component: SvelteComponent, props: Record<string, any>, options?: ImageResponseOptions) => Promise<IR>;
-declare const apis: {
-    twemoji: (code: any) => string;
-    openmoji: string;
-    blobmoji: string;
-    noto: string;
-    fluent: (code: any) => string;
-    fluentFlat: (code: any) => string;
-};
-declare type EmojiType = keyof typeof apis;
-type Weight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
-type Style$1 = 'normal' | 'italic';
-interface FontOptions {
-    data: Buffer | ArrayBuffer;
-    name: string;
-    weight?: Weight;
-    style?: Style$1;
-    lang?: string;
-}
-export declare type ImageResponseOptions = ImageOptions & ConstructorParameters<typeof Response>[1];
-declare type ImageOptions = {
-    /**
-     * The width of the image.
-     *
-     * @type {number}
-     * @default 1200
-     */
-    width?: number;
-    /**
-     * The height of the image.
-     *
-     * @type {number}
-     * @default 630
-     */
-    height?: number;
-    /**
-     * Display debug information on the image.
-     *
-     * @type {boolean}
-     * @default false
-     */
-    debug?: boolean;
-    /**
-     * A list of fonts to use.
-     *
-     * @type {{ data: ArrayBuffer; name: string; weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; style?: 'normal' | 'italic' }[]}
-     * @default Noto Sans Latin Regular.
-     */
-    fonts?: FontOptions[];
-    /**
-     * Using a specific Emoji style. Defaults to `twemoji`.
-     *
-     * @link https://github.com/vercel/og#emoji
-     * @type {EmojiType}
-     * @default 'twemoji'
-     */
-    emoji?: EmojiType;
-};
-export {};

package/dist/api.js

@@ -1,12 +0,0 @@
-import { html } from "satori-html";
-import { ImageResponse as IR } from "@vercel/og";
-export const ImageResponse = async (htmlTemplate, options) => {
-    const reactVNode = html(`${htmlTemplate}`);
-    console.log(reactVNode);
-    return new IR(reactVNode, options);
-};
-export const componentToImageResponse = async (component, props, options) => {
-    const ssrSvelte = component.render(props);
-    console.log(ssrSvelte);
-    return ImageResponse(`${ssrSvelte.html}<style>${ssrSvelte.css.code}</style>`, options);
-};