@ethercorps/sveltekit-og 4.0.0-next.1 → 4.0.0-next.2

package/dist/helpers/create.d.ts

@@ -0,0 +1,5 @@
+import type { Component } from 'svelte';
+import type { ComponentOptions, ImageOptions, VNode } from '../types.js';
+export declare function createVNode(element: string | Component, componentOptions?: ComponentOptions): Promise<VNode>;
+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

@@ -0,0 +1,48 @@
+import { html } from 'satori-html';
+import { loadDynamicAsset } from './emoji.js';
+import { default_fonts, DEFAULT_WIDTH } from '../helpers/defaults.js';
+import { useResvg, useSatori } from '../providers/instances.js';
+import { render } from 'svelte/server';
+function svelteComponentToJsx(component, props = {}) {
+    const { body, head } = render(component, { props });
+    return html(body + head);
+}
+export async function createVNode(element, componentOptions) {
+    return typeof element === 'string' ? html(element.replaceAll('\n', '').trim()) : 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
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    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();
+    const resvg_options = {
+        fitTo: {
+            mode: 'width',
+            value: imageOptions.width || DEFAULT_WIDTH,
+        }
+    };
+    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(): Promise<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: DEFAULT_FORMAT,
+    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 { 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

@@ -0,0 +1,26 @@
+import { DEFAULT_OPTIONS, DEFAULT_STATUS_CODE, DEFAULT_STATUS_TEXT } from './helpers/defaults.js';
+import { createPng, createSvg } from './helpers/create.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;
+        const body = new ReadableStream({
+            async start(controller) {
+                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
+            },
+            status: extended_options.status || DEFAULT_STATUS_CODE,
+            statusText: extended_options.statusText || DEFAULT_STATUS_TEXT
+        });
+    }
+}

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/plugin.d.ts

@@ -0,0 +1,4 @@
+import { unwasm, type UnwasmPluginOptions } from "unwasm/plugin";
+type Plugin = ReturnType<typeof unwasm>;
+export declare function rollupWasm(options?: UnwasmPluginOptions): Plugin;
+export {};

package/dist/plugin.js

@@ -0,0 +1,9 @@
+import { unwasm } from "unwasm/plugin";
+import { isNode } from 'std-env';
+export function rollupWasm(options) {
+    return unwasm({
+        esmImport: !isNode,
+        lazy: true,
+        ...options
+    });
+}

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,17 @@
+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 moduleImport = isEdgeLight || isWorkerd ? import(`./resvg/edge.js`) : import('./resvg/node.js');
+    resvgInstance.instance = 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);
+    await satoriInstance.instance.initWasmPromise;
+    return satoriInstance.instance.satori;
+}

package/dist/providers/resvg/edge.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/edge.js

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

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-wasm';

package/dist/providers/resvg/node.js

@@ -0,0 +1,13 @@
+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')
+
+export default {
+	initWasmPromise: initWasm(resvgWasm),
+	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/types.d.ts

@@ -1,15 +1,79 @@
 import type { SatoriOptions } from 'satori/wasm';
-export interface ImageResponseOptions {
+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>;
-    format?: 'svg' | 'png';
-}
+};
+/**
+ * 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>;
-    style?: string;
 };
+/**
+ * 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;
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ethercorps/sveltekit-og",
-	"version": "4.0.0-next.1",
+	"version": "4.0.0-next.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -11,13 +11,18 @@
 		"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 ."
+		"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"
+		},
+		"./plugin": {
+			"types": "./dist/plugin.d.ts",
+			"import": "./dist/plugin.js"
 		}
 	},
 	"files": [
@@ -25,36 +30,41 @@
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*"
 	],
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/package": "^2.2.5",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/adapter-vercel": "^5.10.2",
+		"@sveltejs/kit": "^2.48.5",
+		"@sveltejs/package": "^2.5.4",
+		"@sveltejs/vite-plugin-svelte": "^4.0.4",
 		"@typescript-eslint/eslint-plugin": "^5.62.0",
 		"@typescript-eslint/parser": "^5.62.0",
 		"css-tree": "^2.3.1",
-		"eslint": "^8.56.0",
+		"eslint": "^8.57.1",
 		"eslint-config-prettier": "^8.10.0",
-		"eslint-plugin-svelte": "^2.35.1",
-		"prettier": "^2.8.8",
-		"prettier-plugin-svelte": "^2.10.1",
+		"eslint-plugin-svelte": "^2.46.1",
+		"prettier": "^3.6.2",
+		"prettier-plugin-svelte": "^3.4.0",
 		"publint": "^0.1.16",
-		"svelte": "^5.0.0-next.153",
-		"svelte-check": "^3.6.3",
-		"tslib": "^2.6.2",
-		"typescript": "^5.3.3",
-		"vite": "^5.0.0",
-		"vitest": "^1.0.0"
+		"rollup-plugin-visualizer": "^5.14.0",
+		"svelte": "^5.43.12",
+		"svelte-check": "^4.3.2",
+		"tslib": "^2.8.1",
+		"typescript": "^5.9.3",
+		"vite": "^5.4.19",
+		"vitest": "^1.6.1"
 	},
+	"main": "./dist/index.js",
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"@ethercorps/svelte-h2j": "5.0.0-next.2",
-		"@resvg/resvg-js": "^2.6.0",
-		"satori": "^0.10.11"
-	}
+		"@resvg/resvg-wasm": "^2.6.2",
+		"satori": "^0.10.14",
+		"satori-html": "0.3.2",
+		"std-env": "^3.9.0",
+		"unwasm": "^0.5.0"
+	},
+	"peerDependencies": {
+		"@sveltejs/kit": ">=2.0.0"
+	},
+	"packageManager": "pnpm@10.12.1"
 }

package/dist/api.d.ts

@@ -1,6 +0,0 @@
-import type { ComponentOptions, ImageResponseOptions } from './types.js';
-import { SvelteComponent } from "svelte";
-export declare const og: (element: string | typeof SvelteComponent, options: ImageResponseOptions, componentOptions: ComponentOptions) => Promise<any>;
-export declare class ImageResponse extends Response {
-    constructor(element: string | typeof SvelteComponent, options: ImageResponseOptions | undefined, { props, style }: ComponentOptions);
-}

package/dist/api.js

@@ -1,65 +0,0 @@
-import satori from 'satori';
-import { Resvg } from '@resvg/resvg-js';
-import { loadGoogleFont } from './font.js';
-import { toReactElement, svelteComponentToJsx } from "@ethercorps/svelte-h2j";
-import { SvelteComponent } from "svelte";
-export const og = async (element, options, componentOptions) => {
-    const reactElement = typeof element === 'string' ? toReactElement(element) : svelteComponentToJsx(element, componentOptions);
-    // render the React element-like object into an SVG
-    const svg = await satori(reactElement, {
-        width: options.width || 1200,
-        height: options.height || 630,
-        fonts: options.fonts?.length
-            ? options.fonts
-            : [
-                {
-                    name: 'Bitter',
-                    data: await loadGoogleFont({ family: 'Bitter', weight: 600 }),
-                    weight: 500,
-                    style: 'normal'
-                }
-            ]
-    });
-    const requestedFormat = options.format || 'png';
-    if (requestedFormat === 'svg') {
-        return svg;
-    }
-    // convert the SVG into a PNG
-    const opts = {
-        // background: "rgba(238, 235, 230, .9)",
-        fitTo: {
-            mode: 'width',
-            value: options.width || 1200
-        },
-        font: {
-            loadSystemFonts: false // It will be faster to disable loading system fonts.
-        }
-    };
-    const resvg = new Resvg(svg, opts);
-    const pngData = resvg.render();
-    const pngBuffer = pngData.asPng();
-    return pngBuffer;
-};
-export class ImageResponse extends Response {
-    constructor(element, options = {}, { props = {}, style = '' }) {
-        super();
-        const body = new ReadableStream({
-            async start(controller) {
-                const buffer = await og(element, options, { props, style });
-                controller.enqueue(buffer);
-                controller.close();
-            }
-        });
-        return new Response(body, {
-            headers: {
-                'Content-Type': 'image/png',
-                'Cache-Control': options.debug
-                    ? 'no-cache, no-store'
-                    : 'public, immutable, no-transform, max-age=31536000',
-                ...options.headers
-            },
-            status: options.status || 200,
-            statusText: options.statusText
-        });
-    }
-}

package/dist/font.d.ts

@@ -1,5 +0,0 @@
-export declare function loadGoogleFont({ family, weight, text }: {
-    family: string;
-    weight?: number;
-    text?: string;
-}): Promise<ArrayBuffer>;

package/dist/font.js

@@ -1,27 +0,0 @@
-export async function loadGoogleFont({ family, weight, text }) {
-    const params = {
-        family: `${encodeURIComponent(family)}${weight ? `:wght@${weight}` : ''}`
-    };
-    if (text) {
-        params.text = text;
-    }
-    else {
-        params.subset = 'latin';
-    }
-    const url = `https://fonts.googleapis.com/css2?${Object.keys(params)
-        .map((key) => `${key}=${params[key]}`)
-        .join('&')}`;
-    const res = await fetch(`${url}`, {
-        headers: {
-            // construct user agent to get TTF font
-            'User-Agent': 'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1'
-        }
-    });
-    const body = await res.text();
-    // Get the font URL from the CSS text
-    const fontUrl = body.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/)?.[1];
-    if (!fontUrl) {
-        throw new Error('Could not find font URL');
-    }
-    return fetch(fontUrl).then((res) => res.arrayBuffer());
-}