loopwind 0.25.7 → 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 -286
- package/dist/sdk/edge.js.map +1 -1
- package/package.json +4 -2
- package/platform/package-lock.json +154 -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,297 +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 wasmInitialized = false;
|
|
42
|
-
let wasmInitPromise = null;
|
|
43
|
-
/**
|
|
44
|
-
* Initialize resvg WASM module
|
|
45
|
-
*/
|
|
46
|
-
async function ensureWasm() {
|
|
47
|
-
if (wasmInitialized)
|
|
48
|
-
return;
|
|
49
|
-
if (wasmInitPromise) {
|
|
50
|
-
await wasmInitPromise;
|
|
51
|
-
return;
|
|
52
|
-
}
|
|
53
|
-
wasmInitPromise = (async () => {
|
|
54
|
-
try {
|
|
55
|
-
// Fetch WASM from CDN
|
|
56
|
-
const wasmResponse = await fetch('https://unpkg.com/@resvg/resvg-wasm@2.6.2/index_bg.wasm');
|
|
57
|
-
const wasmBuffer = await wasmResponse.arrayBuffer();
|
|
58
|
-
await initWasm(wasmBuffer);
|
|
59
|
-
wasmInitialized = true;
|
|
60
|
-
}
|
|
61
|
-
catch (error) {
|
|
62
|
-
wasmInitPromise = null;
|
|
63
|
-
throw new RenderError(`Failed to initialize WASM: ${error.message}`, 'rasterize', error);
|
|
64
|
-
}
|
|
65
|
-
})();
|
|
66
|
-
await wasmInitPromise;
|
|
67
|
-
}
|
|
68
|
-
// Default fonts cache
|
|
69
|
-
let defaultFonts = null;
|
|
70
|
-
/**
|
|
71
|
-
* Load default Inter fonts from CDN
|
|
72
|
-
*/
|
|
73
|
-
async function loadDefaultFonts() {
|
|
74
|
-
if (defaultFonts)
|
|
75
|
-
return defaultFonts;
|
|
76
|
-
try {
|
|
77
|
-
const [regular, bold] = await Promise.all([
|
|
78
|
-
fetch('https://cdn.jsdelivr.net/npm/@fontsource/inter@5.0.18/files/inter-latin-400-normal.woff2')
|
|
79
|
-
.then(r => r.arrayBuffer()),
|
|
80
|
-
fetch('https://cdn.jsdelivr.net/npm/@fontsource/inter@5.0.18/files/inter-latin-700-normal.woff2')
|
|
81
|
-
.then(r => r.arrayBuffer()),
|
|
82
|
-
]);
|
|
83
|
-
defaultFonts = [
|
|
84
|
-
{ name: 'Inter', data: regular, weight: 400, style: 'normal' },
|
|
85
|
-
{ name: 'Inter', data: bold, weight: 700, style: 'normal' },
|
|
86
|
-
];
|
|
87
|
-
return defaultFonts;
|
|
88
|
-
}
|
|
89
|
-
catch {
|
|
90
|
-
throw new Error('Failed to load default fonts. Please provide custom fonts.');
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
/**
|
|
94
|
-
* Convert FontConfig array to Satori font format
|
|
95
|
-
*/
|
|
96
|
-
function toSatoriFonts(fonts) {
|
|
97
|
-
return fonts.map(f => ({
|
|
98
|
-
name: f.name,
|
|
99
|
-
data: f.data,
|
|
100
|
-
weight: f.weight || 400,
|
|
101
|
-
style: f.style || 'normal',
|
|
102
|
-
}));
|
|
103
|
-
}
|
|
104
|
-
/**
|
|
105
|
-
* Validate render options for edge runtime
|
|
106
|
-
*/
|
|
107
|
-
function validateOptions(options) {
|
|
108
|
-
const { width, height, format, quality, scale } = options;
|
|
109
|
-
// Video not supported in edge
|
|
110
|
-
if (format === 'mp4' || format === 'gif') {
|
|
111
|
-
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);
|
|
112
|
-
}
|
|
113
|
-
if (width !== undefined && (width < 1 || width > 16384)) {
|
|
114
|
-
throw new ValidationError('Width must be between 1 and 16384', 'width', '1-16384', width);
|
|
115
|
-
}
|
|
116
|
-
if (height !== undefined && (height < 1 || height > 16384)) {
|
|
117
|
-
throw new ValidationError('Height must be between 1 and 16384', 'height', '1-16384', height);
|
|
118
|
-
}
|
|
119
|
-
if (format !== undefined) {
|
|
120
|
-
const validFormats = ['png', 'svg', 'jpg', 'jpeg', 'webp'];
|
|
121
|
-
if (!validFormats.includes(format)) {
|
|
122
|
-
throw new ValidationError(`Invalid format: ${format}`, 'format', validFormats.join(', '), format);
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
if (quality !== undefined && (quality < 1 || quality > 100)) {
|
|
126
|
-
throw new ValidationError('Quality must be between 1 and 100', 'quality', '1-100', quality);
|
|
127
|
-
}
|
|
128
|
-
if (scale !== undefined && (scale < 0.1 || scale > 10)) {
|
|
129
|
-
throw new ValidationError('Scale must be between 0.1 and 10', 'scale', '0.1-10', scale);
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
/**
|
|
133
|
-
* Simple QR code helper (edge-compatible)
|
|
134
|
-
* Returns a placeholder - full QR support requires qrcode library
|
|
135
|
-
*/
|
|
136
|
-
function qrHelper(_text) {
|
|
137
|
-
// In edge, we can't use the full qrcode library easily
|
|
138
|
-
// Return a placeholder or implement a lightweight QR generator
|
|
139
|
-
console.warn('QR code generation not fully supported in edge runtime');
|
|
140
|
-
return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
|
|
141
|
-
}
|
|
142
|
-
/**
|
|
143
|
-
* Image loader helper (edge-compatible)
|
|
144
|
-
* Fetches image and converts to data URI
|
|
145
|
-
*/
|
|
146
|
-
async function loadImage(url) {
|
|
147
|
-
if (!url.startsWith('http://') && !url.startsWith('https://')) {
|
|
148
|
-
// Local paths not supported in edge
|
|
149
|
-
console.warn('Local file paths not supported in edge runtime, returning URL as-is');
|
|
150
|
-
return url;
|
|
151
|
-
}
|
|
152
|
-
try {
|
|
153
|
-
const response = await fetch(url);
|
|
154
|
-
if (!response.ok) {
|
|
155
|
-
throw new Error(`HTTP ${response.status}`);
|
|
156
|
-
}
|
|
157
|
-
const arrayBuffer = await response.arrayBuffer();
|
|
158
|
-
const contentType = response.headers.get('content-type') || 'image/png';
|
|
159
|
-
const base64 = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
|
|
160
|
-
return `data:${contentType};base64,${base64}`;
|
|
161
|
-
}
|
|
162
|
-
catch (error) {
|
|
163
|
-
console.warn(`Failed to load image: ${url}`, error);
|
|
164
|
-
return url;
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
/**
|
|
168
|
-
* Render a single frame to SVG
|
|
169
|
-
*/
|
|
170
|
-
async function renderFrameToSVG(template, props, width, height, fonts, frameInfo, config, debug) {
|
|
171
|
-
// Create tw helper
|
|
172
|
-
const twFn = (classes) => twConverter(classes, null, config || {}, {
|
|
173
|
-
progress: frameInfo?.progress ?? 0,
|
|
174
|
-
frame: frameInfo?.index ?? 0,
|
|
175
|
-
totalFrames: frameInfo?.total,
|
|
176
|
-
durationMs: frameInfo?.duration ? frameInfo.duration * 1000 : undefined,
|
|
177
|
-
});
|
|
178
|
-
// Pre-load images from props
|
|
179
|
-
const imageCache = new Map();
|
|
180
|
-
const imagePromises = [];
|
|
181
|
-
for (const value of Object.values(props)) {
|
|
182
|
-
if (typeof value === 'string' && (value.startsWith('http://') ||
|
|
183
|
-
value.startsWith('https://'))) {
|
|
184
|
-
const promise = loadImage(value)
|
|
185
|
-
.then(dataUri => { imageCache.set(value, dataUri); })
|
|
186
|
-
.catch(() => { });
|
|
187
|
-
imagePromises.push(promise);
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
await Promise.all(imagePromises);
|
|
191
|
-
// Helper functions
|
|
192
|
-
const imageHelper = (pathOrUrl) => imageCache.get(pathOrUrl) || pathOrUrl;
|
|
193
|
-
// Build full props
|
|
194
|
-
const fullProps = {
|
|
195
|
-
...props,
|
|
196
|
-
tw: twFn,
|
|
197
|
-
qr: qrHelper,
|
|
198
|
-
image: imageHelper,
|
|
199
|
-
...(frameInfo && { frame: frameInfo }),
|
|
200
|
-
};
|
|
201
|
-
// Render template to JSX
|
|
202
|
-
let element;
|
|
203
|
-
try {
|
|
204
|
-
element = template(fullProps);
|
|
205
|
-
}
|
|
206
|
-
catch (error) {
|
|
207
|
-
throw new RenderError(`Template execution failed: ${error.message}`, 'jsx', error);
|
|
208
|
-
}
|
|
209
|
-
// Render to SVG using Satori
|
|
210
|
-
try {
|
|
211
|
-
const svg = await satori(element, {
|
|
212
|
-
width,
|
|
213
|
-
height,
|
|
214
|
-
fonts: toSatoriFonts(fonts),
|
|
215
|
-
debug: debug || false,
|
|
216
|
-
});
|
|
217
|
-
return svg;
|
|
218
|
-
}
|
|
219
|
-
catch (error) {
|
|
220
|
-
throw new RenderError(`SVG generation failed: ${error.message}`, 'svg', error);
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
|
-
/**
|
|
224
|
-
* Convert SVG to PNG using resvg WASM
|
|
225
|
-
*/
|
|
226
|
-
async function svgToPng(svg, width, scale) {
|
|
227
|
-
await ensureWasm();
|
|
228
|
-
try {
|
|
229
|
-
const resvg = new Resvg(svg, {
|
|
230
|
-
fitTo: {
|
|
231
|
-
mode: 'width',
|
|
232
|
-
value: Math.round(width * scale),
|
|
233
|
-
},
|
|
234
|
-
});
|
|
235
|
-
const pngData = resvg.render();
|
|
236
|
-
return pngData.asPng();
|
|
237
|
-
}
|
|
238
|
-
catch (error) {
|
|
239
|
-
throw new RenderError(`PNG rasterization failed: ${error.message}`, 'rasterize', error);
|
|
240
|
-
}
|
|
241
|
-
}
|
|
44
|
+
// Re-export workers-og for edge environments
|
|
45
|
+
export { ImageResponse } from 'workers-og';
|
|
46
|
+
import { ImageResponse } from 'workers-og';
|
|
242
47
|
/**
|
|
243
|
-
* Render
|
|
48
|
+
* Render HTML to PNG buffer
|
|
244
49
|
*
|
|
245
50
|
* @example
|
|
246
51
|
* ```typescript
|
|
247
|
-
*
|
|
248
|
-
*
|
|
249
|
-
* const OGImage = ({ title, tw }) => (
|
|
250
|
-
* <div style={tw("w-full h-full bg-blue-500 flex items-center justify-center")}>
|
|
251
|
-
* <h1 style={tw("text-white text-6xl")}>{title}</h1>
|
|
252
|
-
* </div>
|
|
253
|
-
* );
|
|
254
|
-
*
|
|
255
|
-
* const png = await render(OGImage, {
|
|
256
|
-
* props: { title: 'Hello World' },
|
|
52
|
+
* const png = await render({
|
|
53
|
+
* html: '<div style="display: flex; background: blue; color: white;">Hello</div>',
|
|
257
54
|
* width: 1200,
|
|
258
55
|
* height: 630,
|
|
259
|
-
* format: 'png',
|
|
260
56
|
* });
|
|
261
57
|
* ```
|
|
262
58
|
*/
|
|
263
|
-
export async function render(
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
const
|
|
267
|
-
|
|
268
|
-
const renderPromise = (async () => {
|
|
269
|
-
// Load fonts
|
|
270
|
-
const fonts = customFonts || await loadDefaultFonts();
|
|
271
|
-
// Render to SVG
|
|
272
|
-
const svg = await renderFrameToSVG(template, props, width, height, fonts, undefined, undefined, debug);
|
|
273
|
-
// Return SVG if requested
|
|
274
|
-
if (format === 'svg') {
|
|
275
|
-
return new TextEncoder().encode(svg);
|
|
276
|
-
}
|
|
277
|
-
// Convert to PNG
|
|
278
|
-
const png = await svgToPng(svg, width, scale);
|
|
279
|
-
// Return PNG if requested
|
|
280
|
-
if (format === 'png') {
|
|
281
|
-
return png;
|
|
282
|
-
}
|
|
283
|
-
// For jpg/jpeg/webp in edge, we'd need a WASM-based encoder
|
|
284
|
-
// For now, return PNG with a warning
|
|
285
|
-
console.warn(`Format '${format}' not fully supported in edge runtime, returning PNG`);
|
|
286
|
-
return png;
|
|
287
|
-
})();
|
|
288
|
-
if (timeout) {
|
|
289
|
-
const startTime = Date.now();
|
|
290
|
-
const timeoutPromise = new Promise((_, reject) => {
|
|
291
|
-
setTimeout(() => {
|
|
292
|
-
const elapsed = Date.now() - startTime;
|
|
293
|
-
reject(new TimeoutError(`Render timed out after ${timeout}ms`, timeout, elapsed));
|
|
294
|
-
}, timeout);
|
|
295
|
-
});
|
|
296
|
-
return Promise.race([renderPromise, timeoutPromise]);
|
|
297
|
-
}
|
|
298
|
-
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);
|
|
299
64
|
}
|
|
300
65
|
/**
|
|
301
|
-
* 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
|
+
* ```
|
|
302
76
|
*/
|
|
303
|
-
export function
|
|
304
|
-
const
|
|
305
|
-
return
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
height: options.height ?? config.defaults?.height,
|
|
322
|
-
format: options.format ?? config.defaults?.format,
|
|
323
|
-
fonts: options.fonts ?? fonts,
|
|
324
|
-
};
|
|
325
|
-
return render(template, mergedOptions);
|
|
326
|
-
};
|
|
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, ''');
|
|
327
95
|
}
|
|
328
96
|
export { LoopwindError, ValidationError, FontError, RenderError, TimeoutError, ImageFetchError, } from './errors.js';
|
|
329
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": {
|
|
@@ -68,12 +68,14 @@
|
|
|
68
68
|
"gifenc": "^1.0.3",
|
|
69
69
|
"gradient-string": "^3.0.0",
|
|
70
70
|
"h264-mp4-encoder": "^1.0.12",
|
|
71
|
+
"loopwind": "^0.25.7",
|
|
71
72
|
"open": "^10.0.0",
|
|
72
73
|
"ora": "^8.0.1",
|
|
73
74
|
"qrcode": "^1.5.4",
|
|
74
75
|
"react": "^18.2.0",
|
|
75
76
|
"satori": "^0.18.3",
|
|
76
|
-
"sharp": "^0.34.5"
|
|
77
|
+
"sharp": "^0.34.5",
|
|
78
|
+
"workers-og": "^0.0.27"
|
|
77
79
|
},
|
|
78
80
|
"devDependencies": {
|
|
79
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",
|
|
@@ -1252,6 +1252,21 @@
|
|
|
1252
1252
|
"dev": true,
|
|
1253
1253
|
"license": "MIT"
|
|
1254
1254
|
},
|
|
1255
|
+
"node_modules/bundle-name": {
|
|
1256
|
+
"version": "4.1.0",
|
|
1257
|
+
"resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
|
|
1258
|
+
"integrity": "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==",
|
|
1259
|
+
"license": "MIT",
|
|
1260
|
+
"dependencies": {
|
|
1261
|
+
"run-applescript": "^7.0.0"
|
|
1262
|
+
},
|
|
1263
|
+
"engines": {
|
|
1264
|
+
"node": ">=18"
|
|
1265
|
+
},
|
|
1266
|
+
"funding": {
|
|
1267
|
+
"url": "https://github.com/sponsors/sindresorhus"
|
|
1268
|
+
}
|
|
1269
|
+
},
|
|
1255
1270
|
"node_modules/camelcase": {
|
|
1256
1271
|
"version": "5.3.1",
|
|
1257
1272
|
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
|
|
@@ -1483,6 +1498,46 @@
|
|
|
1483
1498
|
"node": ">=0.10.0"
|
|
1484
1499
|
}
|
|
1485
1500
|
},
|
|
1501
|
+
"node_modules/default-browser": {
|
|
1502
|
+
"version": "5.4.0",
|
|
1503
|
+
"resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.4.0.tgz",
|
|
1504
|
+
"integrity": "sha512-XDuvSq38Hr1MdN47EDvYtx3U0MTqpCEn+F6ft8z2vYDzMrvQhVp0ui9oQdqW3MvK3vqUETglt1tVGgjLuJ5izg==",
|
|
1505
|
+
"license": "MIT",
|
|
1506
|
+
"dependencies": {
|
|
1507
|
+
"bundle-name": "^4.1.0",
|
|
1508
|
+
"default-browser-id": "^5.0.0"
|
|
1509
|
+
},
|
|
1510
|
+
"engines": {
|
|
1511
|
+
"node": ">=18"
|
|
1512
|
+
},
|
|
1513
|
+
"funding": {
|
|
1514
|
+
"url": "https://github.com/sponsors/sindresorhus"
|
|
1515
|
+
}
|
|
1516
|
+
},
|
|
1517
|
+
"node_modules/default-browser-id": {
|
|
1518
|
+
"version": "5.0.1",
|
|
1519
|
+
"resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.1.tgz",
|
|
1520
|
+
"integrity": "sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==",
|
|
1521
|
+
"license": "MIT",
|
|
1522
|
+
"engines": {
|
|
1523
|
+
"node": ">=18"
|
|
1524
|
+
},
|
|
1525
|
+
"funding": {
|
|
1526
|
+
"url": "https://github.com/sponsors/sindresorhus"
|
|
1527
|
+
}
|
|
1528
|
+
},
|
|
1529
|
+
"node_modules/define-lazy-prop": {
|
|
1530
|
+
"version": "3.0.0",
|
|
1531
|
+
"resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
|
|
1532
|
+
"integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
|
|
1533
|
+
"license": "MIT",
|
|
1534
|
+
"engines": {
|
|
1535
|
+
"node": ">=12"
|
|
1536
|
+
},
|
|
1537
|
+
"funding": {
|
|
1538
|
+
"url": "https://github.com/sponsors/sindresorhus"
|
|
1539
|
+
}
|
|
1540
|
+
},
|
|
1486
1541
|
"node_modules/detect-libc": {
|
|
1487
1542
|
"version": "2.1.2",
|
|
1488
1543
|
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
|
|
@@ -1698,6 +1753,21 @@
|
|
|
1698
1753
|
"dev": true,
|
|
1699
1754
|
"license": "MIT"
|
|
1700
1755
|
},
|
|
1756
|
+
"node_modules/is-docker": {
|
|
1757
|
+
"version": "3.0.0",
|
|
1758
|
+
"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
|
|
1759
|
+
"integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
|
|
1760
|
+
"license": "MIT",
|
|
1761
|
+
"bin": {
|
|
1762
|
+
"is-docker": "cli.js"
|
|
1763
|
+
},
|
|
1764
|
+
"engines": {
|
|
1765
|
+
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
|
|
1766
|
+
},
|
|
1767
|
+
"funding": {
|
|
1768
|
+
"url": "https://github.com/sponsors/sindresorhus"
|
|
1769
|
+
}
|
|
1770
|
+
},
|
|
1701
1771
|
"node_modules/is-fullwidth-code-point": {
|
|
1702
1772
|
"version": "3.0.0",
|
|
1703
1773
|
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
|
|
@@ -1707,6 +1777,24 @@
|
|
|
1707
1777
|
"node": ">=8"
|
|
1708
1778
|
}
|
|
1709
1779
|
},
|
|
1780
|
+
"node_modules/is-inside-container": {
|
|
1781
|
+
"version": "1.0.0",
|
|
1782
|
+
"resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
|
|
1783
|
+
"integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
|
|
1784
|
+
"license": "MIT",
|
|
1785
|
+
"dependencies": {
|
|
1786
|
+
"is-docker": "^3.0.0"
|
|
1787
|
+
},
|
|
1788
|
+
"bin": {
|
|
1789
|
+
"is-inside-container": "cli.js"
|
|
1790
|
+
},
|
|
1791
|
+
"engines": {
|
|
1792
|
+
"node": ">=14.16"
|
|
1793
|
+
},
|
|
1794
|
+
"funding": {
|
|
1795
|
+
"url": "https://github.com/sponsors/sindresorhus"
|
|
1796
|
+
}
|
|
1797
|
+
},
|
|
1710
1798
|
"node_modules/is-interactive": {
|
|
1711
1799
|
"version": "2.0.0",
|
|
1712
1800
|
"resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-2.0.0.tgz",
|
|
@@ -1731,6 +1819,21 @@
|
|
|
1731
1819
|
"url": "https://github.com/sponsors/sindresorhus"
|
|
1732
1820
|
}
|
|
1733
1821
|
},
|
|
1822
|
+
"node_modules/is-wsl": {
|
|
1823
|
+
"version": "3.1.0",
|
|
1824
|
+
"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.0.tgz",
|
|
1825
|
+
"integrity": "sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==",
|
|
1826
|
+
"license": "MIT",
|
|
1827
|
+
"dependencies": {
|
|
1828
|
+
"is-inside-container": "^1.0.0"
|
|
1829
|
+
},
|
|
1830
|
+
"engines": {
|
|
1831
|
+
"node": ">=16"
|
|
1832
|
+
},
|
|
1833
|
+
"funding": {
|
|
1834
|
+
"url": "https://github.com/sponsors/sindresorhus"
|
|
1835
|
+
}
|
|
1836
|
+
},
|
|
1734
1837
|
"node_modules/jose": {
|
|
1735
1838
|
"version": "5.10.0",
|
|
1736
1839
|
"resolved": "https://registry.npmjs.org/jose/-/jose-5.10.0.tgz",
|
|
@@ -1813,9 +1916,9 @@
|
|
|
1813
1916
|
}
|
|
1814
1917
|
},
|
|
1815
1918
|
"node_modules/loopwind": {
|
|
1816
|
-
"version": "0.25.
|
|
1817
|
-
"resolved": "https://registry.npmjs.org/loopwind/-/loopwind-0.25.
|
|
1818
|
-
"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==",
|
|
1819
1922
|
"license": "MIT",
|
|
1820
1923
|
"dependencies": {
|
|
1821
1924
|
"@resvg/resvg-wasm": "^2.6.2",
|
|
@@ -1825,6 +1928,8 @@
|
|
|
1825
1928
|
"gifenc": "^1.0.3",
|
|
1826
1929
|
"gradient-string": "^3.0.0",
|
|
1827
1930
|
"h264-mp4-encoder": "^1.0.12",
|
|
1931
|
+
"loopwind": "^0.25.7",
|
|
1932
|
+
"open": "^10.0.0",
|
|
1828
1933
|
"ora": "^8.0.1",
|
|
1829
1934
|
"qrcode": "^1.5.4",
|
|
1830
1935
|
"react": "^18.2.0",
|
|
@@ -2363,6 +2468,24 @@
|
|
|
2363
2468
|
"url": "https://github.com/sponsors/sindresorhus"
|
|
2364
2469
|
}
|
|
2365
2470
|
},
|
|
2471
|
+
"node_modules/open": {
|
|
2472
|
+
"version": "10.2.0",
|
|
2473
|
+
"resolved": "https://registry.npmjs.org/open/-/open-10.2.0.tgz",
|
|
2474
|
+
"integrity": "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==",
|
|
2475
|
+
"license": "MIT",
|
|
2476
|
+
"dependencies": {
|
|
2477
|
+
"default-browser": "^5.2.1",
|
|
2478
|
+
"define-lazy-prop": "^3.0.0",
|
|
2479
|
+
"is-inside-container": "^1.0.0",
|
|
2480
|
+
"wsl-utils": "^0.1.0"
|
|
2481
|
+
},
|
|
2482
|
+
"engines": {
|
|
2483
|
+
"node": ">=18"
|
|
2484
|
+
},
|
|
2485
|
+
"funding": {
|
|
2486
|
+
"url": "https://github.com/sponsors/sindresorhus"
|
|
2487
|
+
}
|
|
2488
|
+
},
|
|
2366
2489
|
"node_modules/ora": {
|
|
2367
2490
|
"version": "8.2.0",
|
|
2368
2491
|
"resolved": "https://registry.npmjs.org/ora/-/ora-8.2.0.tgz",
|
|
@@ -2533,6 +2656,18 @@
|
|
|
2533
2656
|
"url": "https://github.com/sponsors/sindresorhus"
|
|
2534
2657
|
}
|
|
2535
2658
|
},
|
|
2659
|
+
"node_modules/run-applescript": {
|
|
2660
|
+
"version": "7.1.0",
|
|
2661
|
+
"resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.1.0.tgz",
|
|
2662
|
+
"integrity": "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==",
|
|
2663
|
+
"license": "MIT",
|
|
2664
|
+
"engines": {
|
|
2665
|
+
"node": ">=18"
|
|
2666
|
+
},
|
|
2667
|
+
"funding": {
|
|
2668
|
+
"url": "https://github.com/sponsors/sindresorhus"
|
|
2669
|
+
}
|
|
2670
|
+
},
|
|
2536
2671
|
"node_modules/satori": {
|
|
2537
2672
|
"version": "0.18.3",
|
|
2538
2673
|
"resolved": "https://registry.npmjs.org/satori/-/satori-0.18.3.tgz",
|
|
@@ -2972,6 +3107,21 @@
|
|
|
2972
3107
|
}
|
|
2973
3108
|
}
|
|
2974
3109
|
},
|
|
3110
|
+
"node_modules/wsl-utils": {
|
|
3111
|
+
"version": "0.1.0",
|
|
3112
|
+
"resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz",
|
|
3113
|
+
"integrity": "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==",
|
|
3114
|
+
"license": "MIT",
|
|
3115
|
+
"dependencies": {
|
|
3116
|
+
"is-wsl": "^3.1.0"
|
|
3117
|
+
},
|
|
3118
|
+
"engines": {
|
|
3119
|
+
"node": ">=18"
|
|
3120
|
+
},
|
|
3121
|
+
"funding": {
|
|
3122
|
+
"url": "https://github.com/sponsors/sindresorhus"
|
|
3123
|
+
}
|
|
3124
|
+
},
|
|
2975
3125
|
"node_modules/y18n": {
|
|
2976
3126
|
"version": "4.0.3",
|
|
2977
3127
|
"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
|