loopwind 0.25.8 → 0.25.9
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.
- package/dist/sdk/edge.d.ts +46 -24
- package/dist/sdk/edge.d.ts.map +1 -1
- package/dist/sdk/edge.js +54 -316
- package/dist/sdk/edge.js.map +1 -1
- package/package.json +3 -2
- package/platform/package-lock.json +5 -4
- package/platform/package.json +1 -1
package/dist/sdk/edge.d.ts
CHANGED
|
@@ -2,28 +2,36 @@
|
|
|
2
2
|
* Loopwind SDK - Edge Runtime Build
|
|
3
3
|
*
|
|
4
4
|
* Compatible with Cloudflare Workers, Vercel Edge Functions, and other edge runtimes.
|
|
5
|
+
* Uses workers-og under the hood for WASM-compatible rendering.
|
|
5
6
|
*
|
|
6
7
|
* Limitations:
|
|
7
|
-
* - PNG
|
|
8
|
+
* - PNG works (via workers-og)
|
|
8
9
|
* - Video (mp4/gif) NOT supported (requires Node.js)
|
|
9
|
-
* -
|
|
10
|
+
* - Template system simplified for edge (HTML-based)
|
|
10
11
|
*
|
|
11
12
|
* @example
|
|
12
13
|
* ```typescript
|
|
13
|
-
* import { render } from 'loopwind/edge';
|
|
14
|
+
* import { render, ImageResponse } from 'loopwind/edge';
|
|
14
15
|
*
|
|
15
16
|
* export default {
|
|
16
17
|
* async fetch(request: Request) {
|
|
17
18
|
* const url = new URL(request.url);
|
|
18
19
|
* const title = url.searchParams.get('title') || 'Hello';
|
|
19
20
|
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
21
|
+
* // Option 1: Use ImageResponse directly (recommended)
|
|
22
|
+
* return new ImageResponse(
|
|
23
|
+
* `<div style="display: flex; width: 100%; height: 100%; background: blue; color: white; align-items: center; justify-content: center;">
|
|
24
|
+
* <h1 style="font-size: 60px;">${title}</h1>
|
|
25
|
+
* </div>`,
|
|
26
|
+
* { width: 1200, height: 630 }
|
|
27
|
+
* );
|
|
28
|
+
*
|
|
29
|
+
* // Option 2: Use render for buffer output
|
|
30
|
+
* const png = await render({
|
|
31
|
+
* html: `<div>...</div>`,
|
|
22
32
|
* width: 1200,
|
|
23
33
|
* height: 630,
|
|
24
|
-
* format: 'png',
|
|
25
34
|
* });
|
|
26
|
-
*
|
|
27
35
|
* return new Response(png, {
|
|
28
36
|
* headers: { 'Content-Type': 'image/png' },
|
|
29
37
|
* });
|
|
@@ -33,33 +41,47 @@
|
|
|
33
41
|
*
|
|
34
42
|
* @packageDocumentation
|
|
35
43
|
*/
|
|
36
|
-
|
|
44
|
+
export { ImageResponse } from 'workers-og';
|
|
45
|
+
export interface EdgeRenderOptions {
|
|
46
|
+
/** HTML string to render */
|
|
47
|
+
html: string;
|
|
48
|
+
/** Output width in pixels */
|
|
49
|
+
width?: number;
|
|
50
|
+
/** Output height in pixels */
|
|
51
|
+
height?: number;
|
|
52
|
+
}
|
|
37
53
|
/**
|
|
38
|
-
* Render
|
|
54
|
+
* Render HTML to PNG buffer
|
|
39
55
|
*
|
|
40
56
|
* @example
|
|
41
57
|
* ```typescript
|
|
42
|
-
*
|
|
43
|
-
*
|
|
44
|
-
* const OGImage = ({ title, tw }) => (
|
|
45
|
-
* <div style={tw("w-full h-full bg-blue-500 flex items-center justify-center")}>
|
|
46
|
-
* <h1 style={tw("text-white text-6xl")}>{title}</h1>
|
|
47
|
-
* </div>
|
|
48
|
-
* );
|
|
49
|
-
*
|
|
50
|
-
* const png = await render(OGImage, {
|
|
51
|
-
* props: { title: 'Hello World' },
|
|
58
|
+
* const png = await render({
|
|
59
|
+
* html: '<div style="display: flex; background: blue; color: white;">Hello</div>',
|
|
52
60
|
* width: 1200,
|
|
53
61
|
* height: 630,
|
|
54
|
-
* format: 'png',
|
|
55
62
|
* });
|
|
56
63
|
* ```
|
|
57
64
|
*/
|
|
58
|
-
export declare function render
|
|
65
|
+
export declare function render(options: EdgeRenderOptions): Promise<Uint8Array>;
|
|
59
66
|
/**
|
|
60
|
-
* Create
|
|
67
|
+
* Create an HTML string from props using a simple template
|
|
68
|
+
*
|
|
69
|
+
* @example
|
|
70
|
+
* ```typescript
|
|
71
|
+
* const html = createHtml({
|
|
72
|
+
* title: 'Hello World',
|
|
73
|
+
* subtitle: 'Welcome to Loopwind',
|
|
74
|
+
* background: 'linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)',
|
|
75
|
+
* });
|
|
76
|
+
* ```
|
|
61
77
|
*/
|
|
62
|
-
export declare function
|
|
63
|
-
|
|
78
|
+
export declare function createHtml(props: {
|
|
79
|
+
title?: string;
|
|
80
|
+
subtitle?: string;
|
|
81
|
+
background?: string;
|
|
82
|
+
textColor?: string;
|
|
83
|
+
fontSize?: number;
|
|
84
|
+
}): string;
|
|
85
|
+
export type { TemplateProps, RenderResult, FontConfig, OutputFormat, } from './types.js';
|
|
64
86
|
export { LoopwindError, ValidationError, FontError, RenderError, TimeoutError, ImageFetchError, } from './errors.js';
|
|
65
87
|
//# sourceMappingURL=edge.d.ts.map
|
package/dist/sdk/edge.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"edge.d.ts","sourceRoot":"","sources":["../../src/sdk/edge.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"edge.d.ts","sourceRoot":"","sources":["../../src/sdk/edge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAGH,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAI3C,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;GAWG;AACH,wBAAsB,MAAM,CAAC,OAAO,EAAE,iBAAiB,GAAG,OAAO,CAAC,UAAU,CAAC,CAO5E;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,MAAM,CAiBT;AAYD,YAAY,EACV,aAAa,EACb,YAAY,EACZ,UAAU,EACV,YAAY,GACb,MAAM,YAAY,CAAC;AAEpB,OAAO,EACL,aAAa,EACb,eAAe,EACf,SAAS,EACT,WAAW,EACX,YAAY,EACZ,eAAe,GAChB,MAAM,aAAa,CAAC"}
|
package/dist/sdk/edge.js
CHANGED
|
@@ -2,28 +2,36 @@
|
|
|
2
2
|
* Loopwind SDK - Edge Runtime Build
|
|
3
3
|
*
|
|
4
4
|
* Compatible with Cloudflare Workers, Vercel Edge Functions, and other edge runtimes.
|
|
5
|
+
* Uses workers-og under the hood for WASM-compatible rendering.
|
|
5
6
|
*
|
|
6
7
|
* Limitations:
|
|
7
|
-
* - PNG
|
|
8
|
+
* - PNG works (via workers-og)
|
|
8
9
|
* - Video (mp4/gif) NOT supported (requires Node.js)
|
|
9
|
-
* -
|
|
10
|
+
* - Template system simplified for edge (HTML-based)
|
|
10
11
|
*
|
|
11
12
|
* @example
|
|
12
13
|
* ```typescript
|
|
13
|
-
* import { render } from 'loopwind/edge';
|
|
14
|
+
* import { render, ImageResponse } from 'loopwind/edge';
|
|
14
15
|
*
|
|
15
16
|
* export default {
|
|
16
17
|
* async fetch(request: Request) {
|
|
17
18
|
* const url = new URL(request.url);
|
|
18
19
|
* const title = url.searchParams.get('title') || 'Hello';
|
|
19
20
|
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
21
|
+
* // Option 1: Use ImageResponse directly (recommended)
|
|
22
|
+
* return new ImageResponse(
|
|
23
|
+
* `<div style="display: flex; width: 100%; height: 100%; background: blue; color: white; align-items: center; justify-content: center;">
|
|
24
|
+
* <h1 style="font-size: 60px;">${title}</h1>
|
|
25
|
+
* </div>`,
|
|
26
|
+
* { width: 1200, height: 630 }
|
|
27
|
+
* );
|
|
28
|
+
*
|
|
29
|
+
* // Option 2: Use render for buffer output
|
|
30
|
+
* const png = await render({
|
|
31
|
+
* html: `<div>...</div>`,
|
|
22
32
|
* width: 1200,
|
|
23
33
|
* height: 630,
|
|
24
|
-
* format: 'png',
|
|
25
34
|
* });
|
|
26
|
-
*
|
|
27
35
|
* return new Response(png, {
|
|
28
36
|
* headers: { 'Content-Type': 'image/png' },
|
|
29
37
|
* });
|
|
@@ -33,327 +41,57 @@
|
|
|
33
41
|
*
|
|
34
42
|
* @packageDocumentation
|
|
35
43
|
*/
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
import {
|
|
39
|
-
import { RenderError, ValidationError, TimeoutError, } from './errors.js';
|
|
40
|
-
// WASM initialization state
|
|
41
|
-
let satoriInitialized = false;
|
|
42
|
-
let satoriInitPromise = null;
|
|
43
|
-
let resvgInitialized = false;
|
|
44
|
-
let resvgInitPromise = null;
|
|
45
|
-
/**
|
|
46
|
-
* Initialize Satori's yoga WASM module
|
|
47
|
-
* Uses standalone build to control WASM loading
|
|
48
|
-
*/
|
|
49
|
-
async function ensureSatoriWasm() {
|
|
50
|
-
if (satoriInitialized)
|
|
51
|
-
return;
|
|
52
|
-
if (satoriInitPromise) {
|
|
53
|
-
await satoriInitPromise;
|
|
54
|
-
return;
|
|
55
|
-
}
|
|
56
|
-
satoriInitPromise = (async () => {
|
|
57
|
-
try {
|
|
58
|
-
// Fetch yoga WASM from satori's CDN
|
|
59
|
-
const wasmResponse = await fetch('https://unpkg.com/satori@0.18.3/dist/yoga.wasm');
|
|
60
|
-
const wasmBuffer = await wasmResponse.arrayBuffer();
|
|
61
|
-
await initSatori(wasmBuffer);
|
|
62
|
-
satoriInitialized = true;
|
|
63
|
-
}
|
|
64
|
-
catch (error) {
|
|
65
|
-
satoriInitPromise = null;
|
|
66
|
-
throw new RenderError(`Failed to initialize Satori WASM: ${error.message}`, 'svg', error);
|
|
67
|
-
}
|
|
68
|
-
})();
|
|
69
|
-
await satoriInitPromise;
|
|
70
|
-
}
|
|
71
|
-
/**
|
|
72
|
-
* Initialize resvg WASM module
|
|
73
|
-
*/
|
|
74
|
-
async function ensureResvgWasm() {
|
|
75
|
-
if (resvgInitialized)
|
|
76
|
-
return;
|
|
77
|
-
if (resvgInitPromise) {
|
|
78
|
-
await resvgInitPromise;
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
resvgInitPromise = (async () => {
|
|
82
|
-
try {
|
|
83
|
-
// Fetch WASM from CDN
|
|
84
|
-
const wasmResponse = await fetch('https://unpkg.com/@resvg/resvg-wasm@2.6.2/index_bg.wasm');
|
|
85
|
-
const wasmBuffer = await wasmResponse.arrayBuffer();
|
|
86
|
-
await initResvg(wasmBuffer);
|
|
87
|
-
resvgInitialized = true;
|
|
88
|
-
}
|
|
89
|
-
catch (error) {
|
|
90
|
-
resvgInitPromise = null;
|
|
91
|
-
throw new RenderError(`Failed to initialize Resvg WASM: ${error.message}`, 'rasterize', error);
|
|
92
|
-
}
|
|
93
|
-
})();
|
|
94
|
-
await resvgInitPromise;
|
|
95
|
-
}
|
|
96
|
-
// Default fonts cache
|
|
97
|
-
let defaultFonts = null;
|
|
44
|
+
// Re-export workers-og for edge environments
|
|
45
|
+
export { ImageResponse } from 'workers-og';
|
|
46
|
+
import { ImageResponse } from 'workers-og';
|
|
98
47
|
/**
|
|
99
|
-
*
|
|
100
|
-
*/
|
|
101
|
-
async function loadDefaultFonts() {
|
|
102
|
-
if (defaultFonts)
|
|
103
|
-
return defaultFonts;
|
|
104
|
-
try {
|
|
105
|
-
const [regular, bold] = await Promise.all([
|
|
106
|
-
fetch('https://cdn.jsdelivr.net/npm/@fontsource/inter@5.0.18/files/inter-latin-400-normal.woff2')
|
|
107
|
-
.then(r => r.arrayBuffer()),
|
|
108
|
-
fetch('https://cdn.jsdelivr.net/npm/@fontsource/inter@5.0.18/files/inter-latin-700-normal.woff2')
|
|
109
|
-
.then(r => r.arrayBuffer()),
|
|
110
|
-
]);
|
|
111
|
-
defaultFonts = [
|
|
112
|
-
{ name: 'Inter', data: regular, weight: 400, style: 'normal' },
|
|
113
|
-
{ name: 'Inter', data: bold, weight: 700, style: 'normal' },
|
|
114
|
-
];
|
|
115
|
-
return defaultFonts;
|
|
116
|
-
}
|
|
117
|
-
catch {
|
|
118
|
-
throw new Error('Failed to load default fonts. Please provide custom fonts.');
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
/**
|
|
122
|
-
* Convert FontConfig array to Satori font format
|
|
123
|
-
*/
|
|
124
|
-
function toSatoriFonts(fonts) {
|
|
125
|
-
return fonts.map(f => ({
|
|
126
|
-
name: f.name,
|
|
127
|
-
data: f.data,
|
|
128
|
-
weight: f.weight || 400,
|
|
129
|
-
style: f.style || 'normal',
|
|
130
|
-
}));
|
|
131
|
-
}
|
|
132
|
-
/**
|
|
133
|
-
* Validate render options for edge runtime
|
|
134
|
-
*/
|
|
135
|
-
function validateOptions(options) {
|
|
136
|
-
const { width, height, format, quality, scale } = options;
|
|
137
|
-
// Video not supported in edge
|
|
138
|
-
if (format === 'mp4' || format === 'gif') {
|
|
139
|
-
throw new ValidationError('Video formats (mp4, gif) are not supported in edge runtime. Use Node.js runtime instead.', 'format', 'png, svg, jpg, jpeg, webp', format);
|
|
140
|
-
}
|
|
141
|
-
if (width !== undefined && (width < 1 || width > 16384)) {
|
|
142
|
-
throw new ValidationError('Width must be between 1 and 16384', 'width', '1-16384', width);
|
|
143
|
-
}
|
|
144
|
-
if (height !== undefined && (height < 1 || height > 16384)) {
|
|
145
|
-
throw new ValidationError('Height must be between 1 and 16384', 'height', '1-16384', height);
|
|
146
|
-
}
|
|
147
|
-
if (format !== undefined) {
|
|
148
|
-
const validFormats = ['png', 'svg', 'jpg', 'jpeg', 'webp'];
|
|
149
|
-
if (!validFormats.includes(format)) {
|
|
150
|
-
throw new ValidationError(`Invalid format: ${format}`, 'format', validFormats.join(', '), format);
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
if (quality !== undefined && (quality < 1 || quality > 100)) {
|
|
154
|
-
throw new ValidationError('Quality must be between 1 and 100', 'quality', '1-100', quality);
|
|
155
|
-
}
|
|
156
|
-
if (scale !== undefined && (scale < 0.1 || scale > 10)) {
|
|
157
|
-
throw new ValidationError('Scale must be between 0.1 and 10', 'scale', '0.1-10', scale);
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
/**
|
|
161
|
-
* Simple QR code helper (edge-compatible)
|
|
162
|
-
* Returns a placeholder - full QR support requires qrcode library
|
|
163
|
-
*/
|
|
164
|
-
function qrHelper(_text) {
|
|
165
|
-
// In edge, we can't use the full qrcode library easily
|
|
166
|
-
// Return a placeholder or implement a lightweight QR generator
|
|
167
|
-
console.warn('QR code generation not fully supported in edge runtime');
|
|
168
|
-
return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
|
|
169
|
-
}
|
|
170
|
-
/**
|
|
171
|
-
* Image loader helper (edge-compatible)
|
|
172
|
-
* Fetches image and converts to data URI
|
|
173
|
-
*/
|
|
174
|
-
async function loadImage(url) {
|
|
175
|
-
if (!url.startsWith('http://') && !url.startsWith('https://')) {
|
|
176
|
-
// Local paths not supported in edge
|
|
177
|
-
console.warn('Local file paths not supported in edge runtime, returning URL as-is');
|
|
178
|
-
return url;
|
|
179
|
-
}
|
|
180
|
-
try {
|
|
181
|
-
const response = await fetch(url);
|
|
182
|
-
if (!response.ok) {
|
|
183
|
-
throw new Error(`HTTP ${response.status}`);
|
|
184
|
-
}
|
|
185
|
-
const arrayBuffer = await response.arrayBuffer();
|
|
186
|
-
const contentType = response.headers.get('content-type') || 'image/png';
|
|
187
|
-
const base64 = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
|
|
188
|
-
return `data:${contentType};base64,${base64}`;
|
|
189
|
-
}
|
|
190
|
-
catch (error) {
|
|
191
|
-
console.warn(`Failed to load image: ${url}`, error);
|
|
192
|
-
return url;
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
/**
|
|
196
|
-
* Render a single frame to SVG
|
|
197
|
-
*/
|
|
198
|
-
async function renderFrameToSVG(template, props, width, height, fonts, frameInfo, config, debug) {
|
|
199
|
-
// Ensure Satori WASM is initialized
|
|
200
|
-
await ensureSatoriWasm();
|
|
201
|
-
// Create tw helper
|
|
202
|
-
const twFn = (classes) => twConverter(classes, null, config || {}, {
|
|
203
|
-
progress: frameInfo?.progress ?? 0,
|
|
204
|
-
frame: frameInfo?.index ?? 0,
|
|
205
|
-
totalFrames: frameInfo?.total,
|
|
206
|
-
durationMs: frameInfo?.duration ? frameInfo.duration * 1000 : undefined,
|
|
207
|
-
});
|
|
208
|
-
// Pre-load images from props
|
|
209
|
-
const imageCache = new Map();
|
|
210
|
-
const imagePromises = [];
|
|
211
|
-
for (const value of Object.values(props)) {
|
|
212
|
-
if (typeof value === 'string' && (value.startsWith('http://') ||
|
|
213
|
-
value.startsWith('https://'))) {
|
|
214
|
-
const promise = loadImage(value)
|
|
215
|
-
.then(dataUri => { imageCache.set(value, dataUri); })
|
|
216
|
-
.catch(() => { });
|
|
217
|
-
imagePromises.push(promise);
|
|
218
|
-
}
|
|
219
|
-
}
|
|
220
|
-
await Promise.all(imagePromises);
|
|
221
|
-
// Helper functions
|
|
222
|
-
const imageHelper = (pathOrUrl) => imageCache.get(pathOrUrl) || pathOrUrl;
|
|
223
|
-
// Build full props
|
|
224
|
-
const fullProps = {
|
|
225
|
-
...props,
|
|
226
|
-
tw: twFn,
|
|
227
|
-
qr: qrHelper,
|
|
228
|
-
image: imageHelper,
|
|
229
|
-
...(frameInfo && { frame: frameInfo }),
|
|
230
|
-
};
|
|
231
|
-
// Render template to JSX
|
|
232
|
-
let element;
|
|
233
|
-
try {
|
|
234
|
-
element = template(fullProps);
|
|
235
|
-
}
|
|
236
|
-
catch (error) {
|
|
237
|
-
throw new RenderError(`Template execution failed: ${error.message}`, 'jsx', error);
|
|
238
|
-
}
|
|
239
|
-
// Render to SVG using Satori
|
|
240
|
-
try {
|
|
241
|
-
const svg = await satori(element, {
|
|
242
|
-
width,
|
|
243
|
-
height,
|
|
244
|
-
fonts: toSatoriFonts(fonts),
|
|
245
|
-
debug: debug || false,
|
|
246
|
-
});
|
|
247
|
-
return svg;
|
|
248
|
-
}
|
|
249
|
-
catch (error) {
|
|
250
|
-
throw new RenderError(`SVG generation failed: ${error.message}`, 'svg', error);
|
|
251
|
-
}
|
|
252
|
-
}
|
|
253
|
-
/**
|
|
254
|
-
* Convert SVG to PNG using resvg WASM
|
|
255
|
-
*/
|
|
256
|
-
async function svgToPng(svg, width, scale) {
|
|
257
|
-
await ensureResvgWasm();
|
|
258
|
-
try {
|
|
259
|
-
const resvg = new Resvg(svg, {
|
|
260
|
-
fitTo: {
|
|
261
|
-
mode: 'width',
|
|
262
|
-
value: Math.round(width * scale),
|
|
263
|
-
},
|
|
264
|
-
});
|
|
265
|
-
const pngData = resvg.render();
|
|
266
|
-
return pngData.asPng();
|
|
267
|
-
}
|
|
268
|
-
catch (error) {
|
|
269
|
-
throw new RenderError(`PNG rasterization failed: ${error.message}`, 'rasterize', error);
|
|
270
|
-
}
|
|
271
|
-
}
|
|
272
|
-
/**
|
|
273
|
-
* Render a template to image (edge runtime)
|
|
48
|
+
* Render HTML to PNG buffer
|
|
274
49
|
*
|
|
275
50
|
* @example
|
|
276
51
|
* ```typescript
|
|
277
|
-
*
|
|
278
|
-
*
|
|
279
|
-
* const OGImage = ({ title, tw }) => (
|
|
280
|
-
* <div style={tw("w-full h-full bg-blue-500 flex items-center justify-center")}>
|
|
281
|
-
* <h1 style={tw("text-white text-6xl")}>{title}</h1>
|
|
282
|
-
* </div>
|
|
283
|
-
* );
|
|
284
|
-
*
|
|
285
|
-
* const png = await render(OGImage, {
|
|
286
|
-
* props: { title: 'Hello World' },
|
|
52
|
+
* const png = await render({
|
|
53
|
+
* html: '<div style="display: flex; background: blue; color: white;">Hello</div>',
|
|
287
54
|
* width: 1200,
|
|
288
55
|
* height: 630,
|
|
289
|
-
* format: 'png',
|
|
290
56
|
* });
|
|
291
57
|
* ```
|
|
292
58
|
*/
|
|
293
|
-
export async function render(
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
const
|
|
297
|
-
|
|
298
|
-
const renderPromise = (async () => {
|
|
299
|
-
// Load fonts
|
|
300
|
-
const fonts = customFonts || await loadDefaultFonts();
|
|
301
|
-
// Render to SVG
|
|
302
|
-
const svg = await renderFrameToSVG(template, props, width, height, fonts, undefined, undefined, debug);
|
|
303
|
-
// Return SVG if requested
|
|
304
|
-
if (format === 'svg') {
|
|
305
|
-
return new TextEncoder().encode(svg);
|
|
306
|
-
}
|
|
307
|
-
// Convert to PNG
|
|
308
|
-
const png = await svgToPng(svg, width, scale);
|
|
309
|
-
// Return PNG if requested
|
|
310
|
-
if (format === 'png') {
|
|
311
|
-
return png;
|
|
312
|
-
}
|
|
313
|
-
// For jpg/jpeg/webp in edge, we'd need a WASM-based encoder
|
|
314
|
-
// For now, return PNG with a warning
|
|
315
|
-
console.warn(`Format '${format}' not fully supported in edge runtime, returning PNG`);
|
|
316
|
-
return png;
|
|
317
|
-
})();
|
|
318
|
-
if (timeout) {
|
|
319
|
-
const startTime = Date.now();
|
|
320
|
-
const timeoutPromise = new Promise((_, reject) => {
|
|
321
|
-
setTimeout(() => {
|
|
322
|
-
const elapsed = Date.now() - startTime;
|
|
323
|
-
reject(new TimeoutError(`Render timed out after ${timeout}ms`, timeout, elapsed));
|
|
324
|
-
}, timeout);
|
|
325
|
-
});
|
|
326
|
-
return Promise.race([renderPromise, timeoutPromise]);
|
|
327
|
-
}
|
|
328
|
-
return renderPromise;
|
|
59
|
+
export async function render(options) {
|
|
60
|
+
const { html, width = 1200, height = 630 } = options;
|
|
61
|
+
const response = new ImageResponse(html, { width, height });
|
|
62
|
+
const buffer = await response.arrayBuffer();
|
|
63
|
+
return new Uint8Array(buffer);
|
|
329
64
|
}
|
|
330
65
|
/**
|
|
331
|
-
* Create
|
|
66
|
+
* Create an HTML string from props using a simple template
|
|
67
|
+
*
|
|
68
|
+
* @example
|
|
69
|
+
* ```typescript
|
|
70
|
+
* const html = createHtml({
|
|
71
|
+
* title: 'Hello World',
|
|
72
|
+
* subtitle: 'Welcome to Loopwind',
|
|
73
|
+
* background: 'linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)',
|
|
74
|
+
* });
|
|
75
|
+
* ```
|
|
332
76
|
*/
|
|
333
|
-
export function
|
|
334
|
-
const
|
|
335
|
-
return
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
height: options.height ?? config.defaults?.height,
|
|
352
|
-
format: options.format ?? config.defaults?.format,
|
|
353
|
-
fonts: options.fonts ?? fonts,
|
|
354
|
-
};
|
|
355
|
-
return render(template, mergedOptions);
|
|
356
|
-
};
|
|
77
|
+
export function createHtml(props) {
|
|
78
|
+
const { title = 'Loopwind', subtitle, background = 'linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)', textColor = 'white', fontSize = 60, } = props;
|
|
79
|
+
return `
|
|
80
|
+
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; background: ${background}; color: ${textColor}; font-family: Inter, system-ui, sans-serif; padding: 48px;">
|
|
81
|
+
<div style="display: flex; font-size: ${fontSize}px; font-weight: 700; text-align: center;">
|
|
82
|
+
${escapeHtml(title)}
|
|
83
|
+
</div>
|
|
84
|
+
${subtitle ? `<div style="display: flex; font-size: 28px; margin-top: 24px; opacity: 0.9; text-align: center;">${escapeHtml(subtitle)}</div>` : ''}
|
|
85
|
+
</div>
|
|
86
|
+
`;
|
|
87
|
+
}
|
|
88
|
+
function escapeHtml(str) {
|
|
89
|
+
return str
|
|
90
|
+
.replace(/&/g, '&')
|
|
91
|
+
.replace(/</g, '<')
|
|
92
|
+
.replace(/>/g, '>')
|
|
93
|
+
.replace(/"/g, '"')
|
|
94
|
+
.replace(/'/g, ''');
|
|
357
95
|
}
|
|
358
96
|
export { LoopwindError, ValidationError, FontError, RenderError, TimeoutError, ImageFetchError, } from './errors.js';
|
|
359
97
|
//# sourceMappingURL=edge.js.map
|
package/dist/sdk/edge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"edge.js","sourceRoot":"","sources":["../../src/sdk/edge.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"edge.js","sourceRoot":"","sources":["../../src/sdk/edge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAEH,6CAA6C;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAW3C;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,KAAK,UAAU,MAAM,CAAC,OAA0B;IACrD,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,IAAI,EAAE,MAAM,GAAG,GAAG,EAAE,GAAG,OAAO,CAAC;IAErD,MAAM,QAAQ,GAAG,IAAI,aAAa,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;IAC5D,MAAM,MAAM,GAAG,MAAM,QAAQ,CAAC,WAAW,EAAE,CAAC;IAE5C,OAAO,IAAI,UAAU,CAAC,MAAM,CAAC,CAAC;AAChC,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU,CAAC,KAM1B;IACC,MAAM,EACJ,KAAK,GAAG,UAAU,EAClB,QAAQ,EACR,UAAU,GAAG,mDAAmD,EAChE,SAAS,GAAG,OAAO,EACnB,QAAQ,GAAG,EAAE,GACd,GAAG,KAAK,CAAC;IAEV,OAAO;8IACqI,UAAU,YAAY,SAAS;8CAC/H,QAAQ;UAC5C,UAAU,CAAC,KAAK,CAAC;;QAEnB,QAAQ,CAAC,CAAC,CAAC,oGAAoG,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;GAErJ,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,GAAW;IAC7B,OAAO,GAAG;SACP,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;SACtB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC;SACvB,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;AAC5B,CAAC;AAUD,OAAO,EACL,aAAa,EACb,eAAe,EACf,SAAS,EACT,WAAW,EACX,YAAY,EACZ,eAAe,GAChB,MAAM,aAAa,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "loopwind",
|
|
3
|
-
"version": "0.25.
|
|
3
|
+
"version": "0.25.9",
|
|
4
4
|
"description": "A CLI and SDK for generating images and videos from JSX templates using Tailwind CSS.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -74,7 +74,8 @@
|
|
|
74
74
|
"qrcode": "^1.5.4",
|
|
75
75
|
"react": "^18.2.0",
|
|
76
76
|
"satori": "^0.18.3",
|
|
77
|
-
"sharp": "^0.34.5"
|
|
77
|
+
"sharp": "^0.34.5",
|
|
78
|
+
"workers-og": "^0.0.27"
|
|
78
79
|
},
|
|
79
80
|
"devDependencies": {
|
|
80
81
|
"@types/gradient-string": "^1.1.6",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"h264-mp4-encoder": "^1.0.12",
|
|
14
14
|
"hono": "^4.6.0",
|
|
15
15
|
"jose": "^5.9.0",
|
|
16
|
-
"loopwind": "^0.25.
|
|
16
|
+
"loopwind": "^0.25.8",
|
|
17
17
|
"nanoid": "^5.0.0",
|
|
18
18
|
"react": "^19.2.3",
|
|
19
19
|
"workers-og": "^0.0.27",
|
|
@@ -1916,9 +1916,9 @@
|
|
|
1916
1916
|
}
|
|
1917
1917
|
},
|
|
1918
1918
|
"node_modules/loopwind": {
|
|
1919
|
-
"version": "0.25.
|
|
1920
|
-
"resolved": "https://registry.npmjs.org/loopwind/-/loopwind-0.25.
|
|
1921
|
-
"integrity": "sha512-
|
|
1919
|
+
"version": "0.25.8",
|
|
1920
|
+
"resolved": "https://registry.npmjs.org/loopwind/-/loopwind-0.25.8.tgz",
|
|
1921
|
+
"integrity": "sha512-EJ/xey+6XJ0rn7KVd1X+HVguHMLyp+7SXHlxTc3Z3wFT+ot/as7J6u727fhjxx030c0Rdr76Q+JWQ0vpYGwkug==",
|
|
1922
1922
|
"license": "MIT",
|
|
1923
1923
|
"dependencies": {
|
|
1924
1924
|
"@resvg/resvg-wasm": "^2.6.2",
|
|
@@ -1928,6 +1928,7 @@
|
|
|
1928
1928
|
"gifenc": "^1.0.3",
|
|
1929
1929
|
"gradient-string": "^3.0.0",
|
|
1930
1930
|
"h264-mp4-encoder": "^1.0.12",
|
|
1931
|
+
"loopwind": "^0.25.7",
|
|
1931
1932
|
"open": "^10.0.0",
|
|
1932
1933
|
"ora": "^8.0.1",
|
|
1933
1934
|
"qrcode": "^1.5.4",
|