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

package/dist/fonts.d.ts

@@ -0,0 +1,54 @@
+import type { FinalFontOptions, FontStyle, FontWeight, MayBePromise } from './types.js';
+interface BaseFontOptions {
+    weight?: FontWeight;
+    style?: FontStyle;
+}
+/** * Base font class defining the structure required by Satori.
+ * 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);
+    /** * 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 {
+    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) */
+    get data(): Promise<Buffer | ArrayBuffer>;
+}
+/** Loads Google font ArrayBuffer with caching. */
+export declare const loadGoogleFont: (family: string, { text, weight, style, display }?: {
+    text?: string;
+    weight?: string | number;
+    style?: FontStyle;
+    display?: FontDisplay;
+}) => Promise<ArrayBuffer>;
+export declare class GoogleFont extends BaseFont {
+    family: string;
+    text: string | undefined;
+    private promise?;
+    constructor(family: string, options?: {
+        name?: string;
+        text?: string;
+        weight?: FontWeight;
+        style?: FontStyle;
+    });
+    get data(): Promise<ArrayBuffer>;
+}
+export declare function resolveFonts(fontClasses: Array<CustomFont | GoogleFont>): Promise<FinalFontOptions>;
+export {};

package/dist/fonts.js

@@ -0,0 +1,112 @@
+import { FONT_CACHE_MAP } from './helpers/cache.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;
+        this.name = name;
+        this.style = style;
+        this.weight = weight;
+    }
+    /** * Abstract getter that returns the promised ArrayBuffer.
+     * Overridden by CustomFont and GoogleFont for lazy loading.
+     */
+    get data() {
+        return this.input;
+    }
+}
+/** * 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 {
+    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);
+    }
+    /** A promise which resolves to font data as `ArrayBuffer` (Lazy load) */
+    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.
+        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 } = {}) => {
+    // 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}`,
+    };
+    if (text)
+        params.text = encodeURIComponent(text);
+    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 } = {}) => {
+    const cssUrl = constructGoogleFontCssUrl(family, { text, weight, display, style });
+    const fromMap = FONT_CACHE_MAP.get(cssUrl);
+    if (fromMap) {
+        return fromMap;
+    }
+    const cssResponse = await fetch(cssUrl);
+    if (!cssResponse.ok) {
+        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) {
+        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) {
+        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);
+    return buffer;
+};
+export class GoogleFont extends BaseFont {
+    family;
+    text;
+    promise;
+    constructor(family, options = {}) {
+        super(options.name || family, undefined, options);
+        this.family = family;
+        this.text = options.text;
+    }
+    get data() {
+        const fallback = async () => loadGoogleFont(this.family, {
+            weight: this.weight,
+            style: this.style,
+            text: this.text,
+        });
+        this.promise = this.promise?.then(null, fallback) ?? fallback();
+        return this.promise;
+    }
+}
+export async function resolveFonts(fontClasses) {
+    const resolvedFonts = await Promise.all(fontClasses.map(async (fontClass) => {
+        const dataBuffer = await fontClass.data;
+        return {
+            name: fontClass.name,
+            data: dataBuffer, // The resolved ArrayBuffer/Buffer
+            weight: fontClass.weight,
+            style: fontClass.style,
+        };
+    }));
+    return resolvedFonts.filter(font => font !== null);
+}

package/dist/helpers/cache.d.ts

@@ -0,0 +1 @@
+export declare const FONT_CACHE_MAP: Map<string, ArrayBuffer>;

package/dist/helpers/cache.js

@@ -0,0 +1 @@
+export const FONT_CACHE_MAP = new Map();

package/dist/helpers/emoji.js

@@ -1,5 +1,5 @@
 import { DEFAULT_EMOJI_PROVIDER } from '../helpers/defaults.js';
-// Code stolen from @vercel/og
+// Code stolen from @vercel/og and https://github.com/fineshopdesign/cf-wasm
 const U200D = String.fromCharCode(8205);
 const UFE0Fg = /\uFE0F/g;
 function getIconCode(char) {

package/dist/plugin.d.ts

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

package/dist/plugin.js

@@ -6,3 +6,17 @@ export function rollupWasm(options) {
         ...options
     });
 }
+export function sveltekitOG(options) {
+    return {
+        name: 'vite-plugin-sveltekit-og',
+        config() {
+            return {
+                build: {
+                    rollupOptions: {
+                        plugins: [rollupWasm(options)]
+                    }
+                }
+            };
+        }
+    };
+}

package/dist/types.d.ts

@@ -1,5 +1,10 @@
 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 FinalFontOptions = NonNullable<Fonts>;
 export type ImageOptions = {
     /**
      * Width of the image
@@ -20,7 +25,7 @@ export type ImageOptions = {
      * Fonts used for your text
      * @default `helpers/defaults.js`
      * */
-    fonts?: SatoriOptions['fonts'];
+    fonts?: Fonts;
     /**
      * Tailwind config
      * @default provided by satori
@@ -78,3 +83,9 @@ export interface VNode {
         [prop: string]: any;
     };
 }
+/** utils types */
+export type MayBePromise<T> = T | Promise<T>;
+export type OnlyProps<T, P> = {
+    [K in keyof T as K extends P ? K : never]: T[K];
+};
+export type StringWithSuggestions<S extends string> = (string & Record<never, never>) | S;

package/package.json

@@ -1,68 +1,75 @@
 {
-  "name": "@ethercorps/sveltekit-og",
-  "version": "4.0.0",
-  "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": [
-    "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
-  ],
-  "devDependencies": {
-    "@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.57.1",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-svelte": "^2.46.1",
-    "prettier": "^3.6.2",
-    "prettier-plugin-svelte": "^3.4.0",
-    "publint": "^0.1.16",
-    "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": {
-    "@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"
-  },
-  "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 .",
-    "publishBeta": "npm publish --tag beta"
-  }
+	"name": "@ethercorps/sveltekit-og",
+	"version": "4.2.0-next.1",
+	"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"
+		},
+        "./plugin": {
+          "types": "./dist/fonts.d.ts",
+          "import": "./dist/fonts.js"
+        },
+		"./plugin": {
+			"types": "./dist/plugin.d.ts",
+			"import": "./dist/plugin.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"devDependencies": {
+		"@sveltejs/adapter-vercel": "^5.10.2",
+		"@sveltejs/kit": "^2.48.5",
+		"@sveltejs/package": "^2.5.4",
+		"@sveltejs/vite-plugin-svelte": "^4.0.4",
+		"@types/node": "^24.7.1",
+		"@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-plugin-svelte": "^2.46.1",
+		"prettier": "^3.6.2",
+		"prettier-plugin-svelte": "^3.4.0",
+		"publint": "^0.1.16",
+		"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": {
+		"@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"
 }