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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/README.md +35 -193
  2. package/dist/fonts.d.ts +5 -13
  3. package/dist/fonts.js +28 -24
  4. package/dist/helpers/create.d.ts +7 -4
  5. package/dist/helpers/create.js +39 -28
  6. package/dist/helpers/defaults.d.ts +4 -4
  7. package/dist/helpers/defaults.js +28 -18
  8. package/dist/helpers/emoji.d.ts +1 -1
  9. package/dist/helpers/emoji.js +31 -21
  10. package/dist/helpers/error-handler.d.ts +37 -0
  11. package/dist/helpers/error-handler.js +75 -0
  12. package/dist/helpers/logger.d.ts +7 -0
  13. package/dist/helpers/logger.js +21 -0
  14. package/dist/helpers/response.d.ts +30 -0
  15. package/dist/helpers/response.js +52 -0
  16. package/dist/helpers/to-html.d.ts +10 -0
  17. package/dist/helpers/to-html.js +10 -0
  18. package/dist/helpers/toJSX.d.ts +3 -3
  19. package/dist/helpers/toJSX.js +9 -7
  20. package/dist/helpers/utils.d.ts +2 -0
  21. package/dist/helpers/utils.js +25 -0
  22. package/dist/image-response.d.ts +2 -2
  23. package/dist/image-response.js +13 -21
  24. package/dist/plugin.js +6 -6
  25. package/dist/providers/instances.d.ts +3 -3
  26. package/dist/providers/instances.js +43 -15
  27. package/dist/providers/resvg/edge.d.ts +1 -1
  28. package/dist/providers/resvg/edge.js +10 -6
  29. package/dist/providers/resvg/node.d.ts +1 -1
  30. package/dist/providers/resvg/node.js +18 -9
  31. package/dist/providers/satori/edge.d.ts +6 -0
  32. package/dist/providers/satori/edge.js +12 -0
  33. package/dist/providers/satori/node.d.ts +1 -1
  34. package/dist/providers/satori/node.js +4 -4
  35. package/dist/takumi/fonts.d.ts +16 -0
  36. package/dist/takumi/fonts.js +15 -0
  37. package/dist/takumi/image-response.d.ts +6 -0
  38. package/dist/takumi/image-response.js +27 -0
  39. package/dist/takumi/index.d.ts +5 -0
  40. package/dist/takumi/index.js +4 -0
  41. package/dist/takumi/render.d.ts +4 -0
  42. package/dist/takumi/render.js +23 -0
  43. package/dist/takumi/renderer.d.ts +7 -0
  44. package/dist/takumi/renderer.js +39 -0
  45. package/dist/takumi/types.d.ts +64 -0
  46. package/dist/takumi/types.js +1 -0
  47. package/dist/types.d.ts +10 -14
  48. package/package.json +67 -20
  49. package/dist/providers/resvg/resvg.wasm +0 -0
package/README.md CHANGED
@@ -4,225 +4,67 @@
4
4
 
5
5
  # SvelteKit Open Graph Image Generation
6
6
 
7
- 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.
7
+ Dynamically generate Open Graph images from an HTML+CSS template or Svelte component. No headless browser required.
8
8
 
9
- ## Docs
10
- - With `sveltekit-og@4`, we have [official documentation](https://sveltekit-og.dev).
9
+ Pick the rendering engine that fits your needs:
11
10
 
12
- ## Installation
11
+ - **Satori** (default) — HTML → SVG → PNG, based on [Satori](https://github.com/vercel/satori#documentation).
12
+ - **[Takumi](https://takumi.kane.tw)** — a Rust/WASM engine with more output formats (`webp`, `jpeg`, `ico`, `svg`, …) and a built-in font, available from `@ethercorps/sveltekit-og/takumi` (v4.3.0+).
13
13
 
14
- ```bash
15
- pnpm install @ethercorps/sveltekit-og
16
- ```
14
+ ## Table of Contents
17
15
 
18
- ## Usage
16
+ - [SvelteKit Open Graph Image Generation](#sveltekit-open-graph-image-generation)
17
+ - [Table of Contents](#table-of-contents)
18
+ - [Docs](#docs)
19
+ - [Installation](#installation)
20
+ - [Usage](#usage)
21
+ - [Examples](#examples)
22
+ - [Contributing](#contributing)
23
+ - [Changelog](#changelog)
24
+ - [License](#license)
25
+ - [Acknowledgements](#acknowledgements)
26
+ - [Authors](#authors)
27
+ - [Contributors](#contributors)
19
28
 
20
- ### Vite (Recommended)
21
-
22
- - Add vite plugin
23
-
24
- ```typescript title="vite.cofig.js"
25
- import { sveltekit } from '@sveltejs/kit/vite';
26
- import { sveltekitOG } from '@ethercorps/sveltekit-og/plugin';
27
- const config = {
28
- plugins: [sveltekit(), sveltekitOG()]
29
- };
30
-
31
- export default config;
32
- ```
29
+ ## Docs
33
30
 
34
- ### Rollup (will be deprecated in v5)
35
- - Add `rollupWasm` to `build.rollupOptions.plugins` in `vite.cofig.js` file.
36
- - For more information, check [docs](https://sveltekit-og.dev/docs/getting-started)
37
-
38
- ```ts title="vite.cofig.js"
39
- import { sveltekit } from '@sveltejs/kit/vite';
40
- import { defineConfig } from 'vitest/config';
41
- import { rollupWasm } from '@ethercorps/sveltekit-og/plugin';
42
-
43
- export default defineConfig({
44
- plugins: [sveltekit()],
45
- build: {
46
- rollupOptions: {
47
- plugins: [rollupWasm()],
48
- }
49
- }
50
- });
51
- ```
31
+ For more detailed information and advanced usage, please refer to the [official documentation](https://sveltekit-og.dev).
52
32
 
53
- - For node adapter update config with `rollupWasm`
54
- - Check node runtime [docs](https://sveltekit-og.dev/docs/runtime/node)
55
-
56
- ```ts title="vite.cofig.js"
57
- import { sveltekit } from '@sveltejs/kit/vite';
58
- import { defineConfig } from 'vitest/config';
59
- import { rollupWasm } from '@ethercorps/sveltekit-og/plugin';
60
-
61
- export default defineConfig({
62
- plugins: [sveltekit()],
63
- build: {
64
- rollupOptions: {
65
- plugins: [
66
- rollupWasm({ esmImport: false })
67
- ],
68
- }
69
- }
70
- });
71
- ```
33
+ ## Installation
72
34
 
73
- - Create a file at `/src/routes/og/+server.ts`. Alternatively, you can use JavaScript by removing the types from this example.
74
-
75
- ```typescript
76
- // src/routes/og/+server.ts
77
- import { ImageResponse } from '@ethercorps/sveltekit-og';
78
- import { RequestHandler } from './$types';
79
-
80
- const template = `
81
- <div tw="bg-gray-50 flex w-full h-full items-center justify-center">
82
- <div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
83
- <h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left">
84
- <span>Ready to dive in?</span>
85
- <span tw="text-indigo-600">Start your free trial today.</span>
86
- </h2>
87
- <div tw="mt-8 flex md:mt-0">
88
- <div tw="flex rounded-md shadow">
89
- <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>
90
- </div>
91
- <div tw="ml-3 flex rounded-md shadow">
92
- <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>
93
- </div>
94
- </div>
95
- </div>
96
- </div>
97
- `;
98
-
99
- const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
100
- const fontData: ArrayBuffer = await fontFile.arrayBuffer();
101
-
102
- export const GET: RequestHandler = async () => {
103
- return await new ImageResponse(template, {
104
- height: 630,
105
- width: 1200,
106
- fonts: [
107
- {
108
- name: 'Inter Latin',
109
- data: fontData,
110
- weight: 400
111
- }
112
- ]
113
- });
114
- };
35
+ ```bash
36
+ pnpm install @ethercorps/sveltekit-og
115
37
  ```
116
38
 
117
- 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.
118
-
119
- ## Example Output
120
-
121
- ![Rendered OG image](https://github.com/etherCorps/sveltekit-og/blob/main/static/og.png)
122
-
123
- ## Headers
124
-
125
- 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.
126
-
127
- ## Styling
128
-
129
- 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).
130
-
131
- 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.
132
-
133
- ## Fonts
39
+ ## Usage
134
40
 
135
- 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`.
41
+ For detailed usage instructions, please see the [Getting Started](https://sveltekit-og.dev/docs/getting-started) section of our documentation.
136
42
 
137
- 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.
43
+ Prefer the Takumi engine — more output formats and a built-in font? See the [Takumi Engine](https://sveltekit-og.dev/docs/usage/takumi) guide.
138
44
 
139
45
  ## Examples
140
46
 
141
- - `ImageResponse` · [_source_](/src/routes/+server.ts) · [_demo_](https://vercel.sveltekit-og.dev)
142
- - `Component Rendering` · [_source_](/src/routes/sc/+server.ts) · [_demo_](https://vercel.sveltekit-og.dev/sc)
143
-
144
- ## API Reference
145
-
146
- The package exposes an `ImageResponse` constructors, with the following options available:
147
-
148
- ```typescript
149
- import {ImageResponse} from '@ethercorps/sveltekit-og'
150
- import {SvelteComponent} from "svelte";
151
-
152
- ImageResponse(
153
- element : string | Component,
154
- options : {
155
- width ? : number = 1200
156
- height ? : number = 630,
157
- backgroundColor ? : string = "#fff"
158
- fonts ? : {
159
- name: string,
160
- data: ArrayBuffer,
161
- weight: number,
162
- style: 'normal' | 'italic'
163
- }[]
164
- debug ? : boolean = false
165
- // Options that will be passed to the HTTP response
166
- status ? : number = 200
167
- statusText ? : string
168
- headers ? : Record<string, string>
169
- },
170
- // Component props if components.
171
- ComponentProps<Component>
172
- )
173
- ```
174
-
175
- ## Changelog
176
-
177
- ### v4.0.0 (Breaking Changes)
178
-
179
- > Just install @ethercorps/sveltekit-og
180
-
181
- > Support for NodeJS, Deno, Cloudflare Pages, Cloudflare Workers, Vercel and Netlify.
182
-
183
- > No support for Bun tried and failed.
184
-
185
-
186
- ### v3.0.0 (Breaking Changes)
47
+ - **ImageResponse**: [_source_](/src/routes/+server.ts) · [_demo_](https://vercel.sveltekit-og.dev)
48
+ - **Component Rendering**: [_source_](/src/routes/sc/+server.ts) · [_demo_](https://vercel.sveltekit-og.dev/sc)
187
49
 
188
- > Just install @ethercorps/sveltekit-og
189
- > No wasm as of now, only support for nodejs based runtime.
50
+ ## Contributing
190
51
 
191
- ### v1.2.3 Update (Breaking Changes)
52
+ Contributions are welcome! Please read our [contributing guidelines](CONTRIBUTING.md) to get started.
192
53
 
193
- > Now you have to install dependency by yourself which will make it easier to build for all plateforms.
194
-
195
- ```
196
- npm i @resvg/resvg-js
197
- ```
198
-
199
- ```
200
- npm i satori
201
- ```
202
-
203
- > From now on their will be no issues related to build, and soon this library going to have its own documentation.
204
-
205
- ### v1.2.2 Update (Breaking Change)
206
-
207
- - We don't provide access to satori from `@ethercorps/sveltekit-og`.
208
-
209
- ### v1.0.0 Update (Breaking Changes)
54
+ ## Changelog
210
55
 
211
- Finally, We have added html to react like element like object converter out of the box and with svelte compiler.
212
- Now you can use `{ toReactElement }` with `"@ethercorps/sveltekit-og"` like:
56
+ All notable changes to this project are documented in the [changelog](CHANGELOG.md).
213
57
 
214
- - We have changed to function based instead of class based ImageResponse and componentToImageResponse.
215
- - Removed `@resvg/resvg-wasm` with `@resvg/resvg-js` because of internal errors.
216
- - Removed `satori-html` because now we have `toReactElement` out of the box with svelte compiler.
217
- > If you find a problem related to undefined a please check [_vite.config.js_](/vite.config.ts) and add ` define: { _a: 'undefined' } in config.`
58
+ ## License
218
59
 
219
- > 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.
60
+ This project is licensed under the [MIT License](LICENSE).
220
61
 
221
62
  ## Acknowledgements
222
63
 
223
- This project will not be possible without the following projects:
64
+ This project would not be possible without the following projects:
224
65
 
225
66
  - [Satori & @vercel/og](https://github.com/vercel/satori)
67
+ - [Takumi](https://takumi.kane.tw)
226
68
  - [Noto by Google Fonts](https://fonts.google.com/noto)
227
69
  - [fineshopdesign](https://github.com/fineshopdesign/cf-wasm)
228
70
 
package/dist/fonts.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { FinalFontOptions, FontStyle, FontWeight, MayBePromise } from './types.js';
1
+ import type { FinalFontOptions, FontStyle, FontWeight, MayBePromise } from "./types.js";
2
2
  interface BaseFontOptions {
3
3
  weight?: FontWeight;
4
4
  style?: FontStyle;
@@ -7,32 +7,24 @@ interface BaseFontOptions {
7
7
  * All font types inherit from this class.
8
8
  */
9
9
  export declare class BaseFont {
10
- protected input: any;
11
10
  name: string;
12
11
  style: FontStyle;
13
12
  weight: FontWeight;
14
- constructor(name: string, input: any, { weight, style }?: BaseFontOptions);
13
+ constructor(name: string, { weight, style }?: BaseFontOptions);
15
14
  /** * Abstract getter that returns the promised ArrayBuffer.
16
15
  * Overridden by CustomFont and GoogleFont for lazy loading.
17
16
  */
18
17
  get data(): MayBePromise<Buffer | ArrayBuffer>;
19
18
  }
20
- /** * A helper class to load Custom fonts, typically from local files.
21
- * The input must be a function provided by the user (e.g., using $app/server/read).
22
- */
23
19
  export declare class CustomFont extends BaseFont {
20
+ protected input: MayBePromise<Buffer | ArrayBuffer> | (() => MayBePromise<Buffer | ArrayBuffer>);
24
21
  private promise?;
25
- /**
26
- * Creates an instance of CustomFont.
27
- * @param name The name of the font (for CSS font-family).
28
- * @param input Font data as ArrayBuffer or a function that resolves to ArrayBuffer (user must provide the loading logic).
29
- */
30
22
  constructor(name: string, input: MayBePromise<Buffer | ArrayBuffer> | (() => MayBePromise<Buffer | ArrayBuffer>), options?: BaseFontOptions);
31
- /** A promise which resolves to font data as `ArrayBuffer` (Lazy load) */
23
+ /** A promise which resolves to font data as `ArrayBuffer` (Lazy load and CACHED) */
32
24
  get data(): Promise<Buffer | ArrayBuffer>;
33
25
  }
34
26
  /** Loads Google font ArrayBuffer with caching. */
35
- export declare const loadGoogleFont: (family: string, { text, weight, style, display }?: {
27
+ export declare const loadGoogleFont: (family: string, { text, weight, style, display, }?: {
36
28
  text?: string;
37
29
  weight?: string | number;
38
30
  style?: FontStyle;
package/dist/fonts.js CHANGED
@@ -1,14 +1,12 @@
1
- import { FONT_CACHE_MAP } from './helpers/cache.js';
1
+ import { FONT_CACHE_MAP } from "./helpers/cache.js";
2
2
  /** * Base font class defining the structure required by Satori.
3
3
  * All font types inherit from this class.
4
4
  */
5
5
  export class BaseFont {
6
- input;
7
6
  name;
8
7
  style;
9
8
  weight;
10
- constructor(name, input, { weight = 400, style = 'normal' } = {}) {
11
- this.input = input;
9
+ constructor(name, { weight = 400, style = "normal" } = {}) {
12
10
  this.name = name;
13
11
  this.style = style;
14
12
  this.weight = weight;
@@ -17,43 +15,49 @@ export class BaseFont {
17
15
  * Overridden by CustomFont and GoogleFont for lazy loading.
18
16
  */
19
17
  get data() {
20
- return this.input;
18
+ throw new Error("The 'data' getter must be implemented by subclasses of BaseFont.");
21
19
  }
22
20
  }
23
- /** * A helper class to load Custom fonts, typically from local files.
24
- * The input must be a function provided by the user (e.g., using $app/server/read).
25
- */
26
21
  export class CustomFont extends BaseFont {
22
+ input;
27
23
  promise;
28
- /**
29
- * Creates an instance of CustomFont.
30
- * @param name The name of the font (for CSS font-family).
31
- * @param input Font data as ArrayBuffer or a function that resolves to ArrayBuffer (user must provide the loading logic).
32
- */
33
24
  constructor(name, input, options) {
34
- super(name, input, options);
25
+ super(name, options);
26
+ this.input = input;
35
27
  }
36
- /** A promise which resolves to font data as `ArrayBuffer` (Lazy load) */
28
+ /** A promise which resolves to font data as `ArrayBuffer` (Lazy load and CACHED) */
37
29
  get data() {
38
- // Defines the loading mechanism: execute the input function or resolve the promise/buffer.
39
- const fallback = async () => (typeof this.input === 'function' ? this.input() : this.input);
40
- // Memoization: ensures the input function is executed only once.
30
+ const cacheKey = `${this.name}-${this.weight}-${this.style}`;
31
+ const cachedData = FONT_CACHE_MAP.get(cacheKey);
32
+ if (cachedData) {
33
+ return Promise.resolve(cachedData);
34
+ }
35
+ const fallback = async () => {
36
+ const buffer = typeof this.input === "function" ? this.input() : this.input;
37
+ const resolvedBuffer = await buffer;
38
+ FONT_CACHE_MAP.set(cacheKey, resolvedBuffer);
39
+ return resolvedBuffer;
40
+ };
41
41
  this.promise = this.promise?.then(null, fallback) ?? fallback();
42
42
  return this.promise;
43
43
  }
44
44
  }
45
45
  /** Constructs Google font css url */
46
- const constructGoogleFontCssUrl = (family, { text, weight = 400, style = 'normal', display } = {}) => {
46
+ const constructGoogleFontCssUrl = (family, { text, weight = 400, style = "normal", display, } = {}) => {
47
47
  // Logic to build the URL (e.g., https://fonts.googleapis.com/css2?family=...wght@...)
48
48
  const params = {
49
- family: `${family.replaceAll(' ', '+')}:${style === 'italic' ? 'ital,' : ''}wght@${style === 'italic' ? '1,' : ''}${weight}`,
49
+ family: `${family.replaceAll(" ", "+")}:${style === "italic" ? "ital," : ""}wght@${style === "italic" ? "1," : ""}${weight}`,
50
50
  };
51
51
  if (text)
52
52
  params.text = encodeURIComponent(text);
53
- return `https://fonts.googleapis.com/css2?${Object.keys(params).map((key) => `${key}=${params[key]}`).join('&')}`;
53
+ if (display)
54
+ params.display = display;
55
+ return `https://fonts.googleapis.com/css2?${Object.entries(params)
56
+ .map(([key, value]) => `${key}=${value}`)
57
+ .join("&")}`;
54
58
  };
55
59
  /** Loads Google font ArrayBuffer with caching. */
56
- export const loadGoogleFont = async (family, { text, weight = 400, style = 'normal', display } = {}) => {
60
+ export const loadGoogleFont = async (family, { text, weight = 400, style = "normal", display, } = {}) => {
57
61
  const cssUrl = constructGoogleFontCssUrl(family, { text, weight, display, style });
58
62
  const fromMap = FONT_CACHE_MAP.get(cssUrl);
59
63
  if (fromMap) {
@@ -84,7 +88,7 @@ export class GoogleFont extends BaseFont {
84
88
  text;
85
89
  promise;
86
90
  constructor(family, options = {}) {
87
- super(options.name || family, undefined, options);
91
+ super(options.name || family, options);
88
92
  this.family = family;
89
93
  this.text = options.text;
90
94
  }
@@ -108,5 +112,5 @@ export async function resolveFonts(fontClasses) {
108
112
  style: fontClass.style,
109
113
  };
110
114
  }));
111
- return resolvedFonts.filter(font => font !== null);
115
+ return resolvedFonts.filter((font) => font !== null);
112
116
  }
@@ -1,4 +1,7 @@
1
- import type { Component } from 'svelte';
2
- import type { ComponentOptions, ImageOptions } from '../types.js';
3
- export declare function createSvg(element: string | Component, imageOptions: ImageOptions, componentOptions?: ComponentOptions): Promise<string>;
4
- export declare function createPng(element: string | Component, imageOptions: ImageOptions, componentOptions?: ComponentOptions): Promise<Uint8Array<ArrayBufferLike>>;
1
+ import type { Component } from "svelte";
2
+ import type { ComponentOptions, ImageOptions } from "../types.js";
3
+ /** Single entry for the Satori and ReSVG engine */
4
+ export declare function createImage(element: string | Component<any>, imageOptions: ImageOptions, componentOptions?: ComponentOptions): Promise<Uint8Array | string>;
5
+ /** Create an SVG string from a Svelte component or HTML string using Satori */
6
+ export declare function createSvg(element: string | Component<any>, imageOptions: ImageOptions, componentOptions?: ComponentOptions): Promise<string>;
7
+ export declare function createPng(element: string | Component<any>, imageOptions: ImageOptions, componentOptions?: ComponentOptions): Promise<Uint8Array<ArrayBufferLike>>;
@@ -1,38 +1,49 @@
1
- import { loadDynamicAsset } from './emoji.js';
2
- import { default_fonts, DEFAULT_WIDTH } from '../helpers/defaults.js';
3
- import { useResvg, useSatori } from '../providers/instances.js';
4
- import { createVNode } from './toJSX.js';
1
+ import { loadDynamicAsset } from "./emoji.js";
2
+ import { default_fonts, DEFAULT_WIDTH } from "../helpers/defaults.js";
3
+ import { useResvg, useSatori } from "../providers/instances.js";
4
+ import { createVNode } from "./toJSX.js";
5
+ import { createLogger } from "./logger.js";
6
+ import { handleAsync, ErrorCodes } from "./error-handler.js";
7
+ /** Single entry for the Satori and ReSVG engine */
8
+ export function createImage(element, imageOptions, componentOptions) {
9
+ return imageOptions.format === "svg"
10
+ ? createSvg(element, imageOptions, componentOptions)
11
+ : createPng(element, imageOptions, componentOptions);
12
+ }
13
+ /** Create an SVG string from a Svelte component or HTML string using Satori */
5
14
  export async function createSvg(element, imageOptions, componentOptions) {
6
- const [satori, vnodes] = await Promise.all([useSatori(), createVNode(element, componentOptions)]);
7
- const satoriOptions = structuredClone(imageOptions);
8
- if (!Object.hasOwn(satoriOptions, 'fonts')) {
9
- satoriOptions['fonts'] = await default_fonts();
15
+ const log = createLogger(imageOptions.debug ?? false);
16
+ const vnodes = createVNode(element, componentOptions);
17
+ const satori = await useSatori(imageOptions.debug);
18
+ const satoriOptions = { ...imageOptions };
19
+ if (!satoriOptions.fonts) {
20
+ satoriOptions.fonts = await handleAsync(() => default_fonts(), ErrorCodes.FONT_LOAD_FAILED, "Failed to load default fonts for Satori");
10
21
  }
11
- satoriOptions['loadAdditionalAsset'] = loadDynamicAsset({
12
- emoji: imageOptions.emoji
22
+ satoriOptions.loadAdditionalAsset = loadDynamicAsset({
23
+ emoji: imageOptions.emoji,
13
24
  });
14
- if (satoriOptions.debug) {
15
- console.info('VNode proivided to satori:', vnodes, '\n');
16
- console.info('Options proivided to satori:', imageOptions, '\n');
17
- }
18
- return satori(vnodes, satoriOptions);
25
+ log.debug("Generating SVG with Satori");
26
+ log.info("VNode provided to satori:", JSON.stringify(vnodes, null, 2), "\n");
27
+ log.info("Options provided to satori:", imageOptions);
28
+ return handleAsync(() => satori(vnodes, satoriOptions), ErrorCodes.SATORI_RENDER_FAILED, "Failed to render SVG with Satori");
19
29
  }
30
+ /* Create a PNG image from a Svelte component or HTML string using Satori and ReSVG */
20
31
  export async function createPng(element, imageOptions, componentOptions) {
21
- const svg = await createSvg(element, imageOptions, componentOptions);
22
- if (imageOptions.debug) {
23
- console.info('SVG generated by satori:', svg, '\n');
24
- }
25
- const resvg_instance = await useResvg();
32
+ const log = createLogger(imageOptions.debug ?? false);
33
+ const svg = await handleAsync(() => createSvg(element, imageOptions, componentOptions), ErrorCodes.SATORI_RENDER_FAILED, "Failed to create SVG for PNG rendering");
34
+ log.debug("SVG generated by satori for ReSVG: \n", svg, "\n");
35
+ const resvg_instance = await handleAsync(() => useResvg(imageOptions.debug), ErrorCodes.RESVG_INIT_FAILED, "Failed to initialize ReSVG");
26
36
  const resvg_options = {
27
37
  fitTo: {
28
- mode: 'width',
38
+ mode: "width",
29
39
  value: imageOptions.width || DEFAULT_WIDTH,
30
- }
40
+ },
31
41
  };
32
- if (imageOptions.debug) {
33
- console.info('Options provided to ReSVG:', resvg_options, '\n');
34
- }
35
- const resvg = new resvg_instance(svg, resvg_options);
36
- const png_data = resvg.render();
37
- return png_data.asPng();
42
+ log.debug("Rendering PNG with ReSVG");
43
+ log.info("Options provided to ReSVG:", resvg_options, "\n");
44
+ return handleAsync(async () => {
45
+ const resvg = new resvg_instance(svg, resvg_options);
46
+ const png_data = resvg.render();
47
+ return png_data.asPng();
48
+ }, ErrorCodes.RESVG_RENDER_FAILED, "Failed to render PNG with ReSVG");
38
49
  }
@@ -1,7 +1,7 @@
1
- import type { SatoriOptions } from 'satori';
2
- import type { ImageOptions } from '../types.js';
3
- import type { EmojiType } from './emoji.js';
4
- export declare function default_fonts(): Promise<SatoriOptions['fonts']>;
1
+ import type { SatoriOptions } from "satori";
2
+ import type { ImageOptions } from "../types.js";
3
+ import type { EmojiType } from "./emoji.js";
4
+ export declare function default_fonts(): Promise<SatoriOptions["fonts"]>;
5
5
  export declare const DEFAULT_FORMAT = "png";
6
6
  export declare const DEFAULT_WIDTH = 1200;
7
7
  export declare const DEFAULT_HEIGHT = 630;
@@ -1,37 +1,47 @@
1
- export async function default_fonts() {
2
- const [noto_sans_regular_font_resp, noto_sans_bold_font_reps] = await Promise.all([
3
- fetch('https://cdn-sveltekit-og.ethercorps.io/NotoSans-Regular.ttf'), fetch('https://cdn-sveltekit-og.ethercorps.io/NotoSans-Bold.ttf')
4
- ]);
5
- if (!(noto_sans_bold_font_reps.ok || noto_sans_bold_font_reps.ok)) {
6
- console.error('Not able to load default fonts');
7
- throw new Error('Not able to load default fonts');
8
- }
9
- const [noto_sans_regular_font, noto_sans_bold_font] = await Promise.all([noto_sans_regular_font_resp.arrayBuffer(), noto_sans_bold_font_reps.arrayBuffer()]);
1
+ import { handleAsyncAll, validateResponse, ErrorCodes } from "./error-handler.js";
2
+ // fetched once per process; a rejected fetch clears the cache so the next request retries
3
+ let defaultFontsPromise;
4
+ export function default_fonts() {
5
+ defaultFontsPromise ??= loadDefaultFonts().catch((error) => {
6
+ defaultFontsPromise = undefined;
7
+ throw error;
8
+ });
9
+ return defaultFontsPromise;
10
+ }
11
+ async function loadDefaultFonts() {
12
+ const [noto_sans_regular_font_resp, noto_sans_bold_font_reps] = await handleAsyncAll([
13
+ () => fetch("https://cdn-sveltekit-og.ethercorps.io/NotoSans-Regular.ttf"),
14
+ () => fetch("https://cdn-sveltekit-og.ethercorps.io/NotoSans-Bold.ttf"),
15
+ ], ErrorCodes.FONT_LOAD_FAILED, "Failed to fetch default fonts");
16
+ const [noto_sans_regular_font, noto_sans_bold_font] = await handleAsyncAll([
17
+ () => validateResponse(noto_sans_regular_font_resp, ErrorCodes.FONT_LOAD_FAILED, "Failed to validate regular font response"),
18
+ () => validateResponse(noto_sans_bold_font_reps, ErrorCodes.FONT_LOAD_FAILED, "Failed to validate bold font response"),
19
+ ], ErrorCodes.FONT_LOAD_FAILED, "Failed to process font responses");
10
20
  return [
11
21
  {
12
22
  data: noto_sans_regular_font,
13
- name: 'Inter',
23
+ name: "Inter",
14
24
  weight: 400,
15
- style: 'normal'
25
+ style: "normal",
16
26
  },
17
27
  {
18
28
  data: noto_sans_bold_font,
19
- name: 'Inter',
29
+ name: "Inter",
20
30
  weight: 700,
21
- style: 'normal'
22
- }
31
+ style: "normal",
32
+ },
23
33
  ];
24
34
  }
25
- export const DEFAULT_FORMAT = 'png';
35
+ export const DEFAULT_FORMAT = "png";
26
36
  export const DEFAULT_WIDTH = 1200;
27
37
  export const DEFAULT_HEIGHT = 630;
28
- export const DEFAULT_EMOJI_PROVIDER = 'twemoji';
38
+ export const DEFAULT_EMOJI_PROVIDER = "twemoji";
29
39
  export const DEFAULT_STATUS_CODE = 200;
30
- export const DEFAULT_STATUS_TEXT = 'Success';
40
+ export const DEFAULT_STATUS_TEXT = "Success";
31
41
  export const DEFAULT_OPTIONS = {
32
42
  height: DEFAULT_HEIGHT,
33
43
  width: DEFAULT_WIDTH,
34
44
  debug: false,
35
45
  format: DEFAULT_FORMAT,
36
- emoji: 'twemoji'
46
+ emoji: "twemoji",
37
47
  };
@@ -8,6 +8,6 @@ declare const emoji_apis: {
8
8
  };
9
9
  export declare const loadDynamicAsset: ({ emoji }: {
10
10
  emoji: EmojiType;
11
- }) => (...args: any[]) => Promise<string | undefined>;
11
+ }) => (code: string, text: string) => Promise<string | undefined>;
12
12
  export type EmojiType = keyof typeof emoji_apis;
13
13
  export {};