loopwind 0.23.0 → 0.24.0

package/test-cloudflare-worker/package.json

@@ -1,25 +0,0 @@
-{
-  "name": "test-cloudflare-worker",
-  "version": "1.0.0",
-  "type": "module",
-  "main": "src/index.ts",
-  "scripts": {
-    "dev": "wrangler dev",
-    "deploy": "wrangler deploy",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "description": "",
-  "devDependencies": {
-    "@cloudflare/workers-types": "^4.20251209.0",
-    "typescript": "^5.9.3",
-    "wrangler": "^4.53.0"
-  },
-  "dependencies": {
-    "@resvg/resvg-wasm": "^2.6.2",
-    "react": "^19.2.1",
-    "satori": "^0.18.3"
-  }
-}

package/test-cloudflare-worker/test-sdk.mjs

@@ -1,75 +0,0 @@
-/**
- * Simple test script to verify the workers SDK works
- * Run with: node test-sdk.mjs
- */
-import { defineTemplate, renderSVG, renderImage, initWasm } from 'loopwind/sdk/workers';
-import React from 'react';
-
-// Define a simple test template
-const testTemplate = defineTemplate({
-  name: 'test-og-image',
-  size: { width: 1200, height: 630 },
-  render: ({ tw, title, subtitle }) => {
-    return React.createElement(
-      'div',
-      {
-        style: tw('flex flex-col items-center justify-center w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 p-12'),
-      },
-      React.createElement(
-        'h1',
-        { style: tw('text-7xl font-bold text-white text-center') },
-        title
-      ),
-      subtitle && React.createElement(
-        'p',
-        { style: tw('text-3xl text-white mt-6') },
-        subtitle
-      )
-    );
-  },
-});
-
-async function main() {
-  console.log('Testing loopwind workers SDK...\n');
-
-  // Test 1: Template definition
-  console.log('1. Template defined successfully:', testTemplate.name);
-  console.log('   Size:', testTemplate.size);
-
-  // Test 2: SVG rendering (no WASM needed for satori in Node.js)
-  console.log('\n2. Testing SVG rendering...');
-  try {
-    const svg = await renderSVG(testTemplate, {
-      title: 'Hello World!',
-      subtitle: 'Testing the SDK'
-    });
-    console.log('   SVG rendered successfully!');
-    console.log('   SVG length:', svg.length, 'bytes');
-    console.log('   SVG starts with:', svg.substring(0, 100));
-  } catch (err) {
-    console.error('   SVG rendering failed:', err.message);
-  }
-
-  // Test 3: PNG rendering (requires WASM)
-  console.log('\n3. Testing PNG rendering...');
-  try {
-    await initWasm();
-    const png = await renderImage(testTemplate, {
-      title: 'Hello PNG!',
-      subtitle: 'WASM is working'
-    }, { format: 'png', scale: 1 });
-    console.log('   PNG rendered successfully!');
-    console.log('   PNG size:', png.length, 'bytes');
-
-    // Save PNG to file
-    const fs = await import('fs/promises');
-    await fs.writeFile('test-output.png', png);
-    console.log('   Saved to test-output.png');
-  } catch (err) {
-    console.error('   PNG rendering failed:', err.message);
-  }
-
-  console.log('\nTests complete!');
-}
-
-main().catch(console.error);

package/test-cloudflare-worker/wrangler.toml

@@ -1,14 +0,0 @@
-name = "loopwind-worker-test"
-main = "src/index.ts"
-compatibility_date = "2024-12-01"
-
-# Enable nodejs_compat for Node.js API support
-# This is required for satori and resvg-wasm dependencies
-compatibility_flags = ["nodejs_compat_v2"]
-
-[observability]
-enabled = true
-
-# NOTE: Local development (wrangler dev) may fail due to WASM restrictions.
-# This is a known limitation of the local workerd runtime.
-# Deploy to production (wrangler deploy) for full functionality.

package/test-font-files.mjs

@@ -1,72 +0,0 @@
-/**
- * Test for font files in SDK StyleConfig
- * Run with: node test-font-files.mjs
- */
-
-import { defineTemplate, renderImage } from './dist/sdk/index.js';
-import React from 'react';
-
-const { createElement: h } = React;
-
-console.log('📝 Testing font files in StyleConfig...\n');
-
-// Test with external URL (Google Fonts mirror)
-const config = {
-  colors: {
-    text: '#000000',
-  },
-  fonts: {
-    sans: {
-      family: ['Inter', 'sans-serif'],
-      files: [
-        {
-          path: 'https://unpkg.com/@fontsource/inter@5.0.18/files/inter-latin-400-normal.woff',
-          weight: 400,
-        },
-        {
-          path: 'https://unpkg.com/@fontsource/inter@5.0.18/files/inter-latin-700-normal.woff',
-          weight: 700,
-        },
-      ],
-    },
-  },
-};
-
-const template = defineTemplate({
-  name: 'test-font-files',
-  size: { width: 600, height: 400 },
-  config,
-  render: ({ tw }) =>
-    h('div', { style: tw('flex flex-col items-center justify-center w-full h-full bg-white p-8') },
-      h('h1', { style: tw('font-sans text-6xl font-bold text-text') }, 'Bold Text'),
-      h('p', { style: tw('font-sans text-3xl font-normal text-text') }, 'Normal Text')
-    ),
-});
-
-try {
-  console.log('⏳ Rendering with external font URLs...');
-  const svg = await renderImage(template, {}, { format: 'svg' });
-
-  console.log('✅ SUCCESS: Font files loaded from URLs');
-  console.log(`✅ Generated SVG: ${svg.length} bytes`);
-
-  // Also test PNG to ensure fonts render correctly
-  console.log('\n⏳ Testing PNG rendering with fonts...');
-  const png = await renderImage(template, {}, { format: 'png' });
-
-  if (png[0] === 0x89 && png[1] === 0x50 && png[2] === 0x4e && png[3] === 0x47) {
-    console.log('✅ SUCCESS: PNG generated with fonts');
-    console.log(`✅ PNG size: ${png.length} bytes`);
-  } else {
-    console.error('❌ FAIL: Invalid PNG signature');
-    process.exit(1);
-  }
-
-  console.log('\n🎉 All font file tests passed!');
-  console.log('\n✨ Font files with URLs work correctly in SDK StyleConfig');
-
-} catch (error) {
-  console.error('❌ ERROR:', error.message);
-  console.error(error.stack);
-  process.exit(1);
-}

package/test-jsx-support.mjs

@@ -1,146 +0,0 @@
-/**
- * Test JSX support with compileTemplate + defineTemplateFromSource
- *
- * This test demonstrates the recommended workflow:
- * 1. compileTemplate() - transforms JSX to JavaScript (admin/build time)
- * 2. defineTemplateFromSource() - loads pre-compiled JavaScript (production)
- */
-
-import { defineTemplateFromSource, renderImage } from './dist/sdk/index.js';
-import { compileTemplate } from './dist/sdk/compiler.js';
-
-console.log('Testing JSX Support with Pre-compilation\n');
-
-// Test 1: Simple JSX template
-const simpleJSX = `
-export const meta = {
-  name: 'jsx-test',
-  type: 'image',
-  size: { width: 400, height: 200 }
-};
-
-export default ({ tw, title }) => (
-  <div style={tw('flex items-center justify-center w-full h-full bg-blue-500')}>
-    <h1 style={tw('text-4xl font-bold text-white')}>{title}</h1>
-  </div>
-);
-`;
-
-try {
-  // Step 1: Compile JSX to JavaScript (admin/build time)
-  const compiledJS = compileTemplate(simpleJSX);
-
-  // Step 2: Load compiled template (production runtime)
-  const template1 = defineTemplateFromSource(compiledJS);
-  const png1 = await renderImage(template1, { title: 'JSX Works!' });
-  console.log('✓ Simple JSX template works');
-  console.log('  PNG size:', png1.length, 'bytes\n');
-} catch (error) {
-  console.error('✗ Simple JSX template failed:', error.message);
-}
-
-// Test 2: Nested JSX
-const nestedJSX = `
-export const meta = {
-  name: 'nested-jsx',
-  size: { width: 600, height: 300 }
-};
-
-export default ({ tw, title, subtitle, items }) => (
-  <div style={tw('flex flex-col w-full h-full bg-white p-8')}>
-    <h1 style={tw('text-5xl font-bold text-gray-900 mb-4')}>{title}</h1>
-    <p style={tw('text-2xl text-gray-600 mb-6')}>{subtitle}</p>
-    <div style={tw('flex gap-4')}>
-      {items.map((item, i) => (
-        <div style={tw('px-4 py-2 bg-blue-500 text-white rounded')}>
-          {item}
-        </div>
-      ))}
-    </div>
-  </div>
-);
-`;
-
-try {
-  // Step 1: Compile JSX to JavaScript
-  const compiledJS2 = compileTemplate(nestedJSX);
-
-  // Step 2: Load compiled template
-  const template2 = defineTemplateFromSource(compiledJS2);
-  const png2 = await renderImage(template2, {
-    title: 'Nested JSX',
-    subtitle: 'With multiple levels',
-    items: ['One', 'Two', 'Three']
-  });
-  console.log('✓ Nested JSX template works');
-  console.log('  PNG size:', png2.length, 'bytes\n');
-} catch (error) {
-  console.error('✗ Nested JSX template failed:', error.message);
-}
-
-// Test 3: Self-closing tags
-const selfClosing = `
-export const meta = {
-  name: 'self-closing',
-  size: { width: 400, height: 200 }
-};
-
-export default ({ tw }) => (
-  <div style={tw('flex flex-col items-center justify-center w-full h-full bg-gray-100 gap-4')}>
-    <div style={tw('w-32 h-32 bg-red-500 rounded-full')} />
-    <div style={tw('w-32 h-32 bg-blue-500 rounded-lg')} />
-    <div style={tw('w-32 h-32 bg-green-500')} />
-  </div>
-);
-`;
-
-try {
-  // Step 1: Compile JSX to JavaScript
-  const compiledJS3 = compileTemplate(selfClosing);
-
-  // Step 2: Load compiled template
-  const template3 = defineTemplateFromSource(compiledJS3);
-  const png3 = await renderImage(template3, {});
-  console.log('✓ Self-closing tags work');
-  console.log('  PNG size:', png3.length, 'bytes\n');
-} catch (error) {
-  console.error('✗ Self-closing tags failed:', error.message);
-}
-
-// Test 4: Complex attributes
-const complexAttrs = `
-export const meta = {
-  name: 'complex-attrs',
-  size: { width: 500, height: 250 }
-};
-
-export default ({ tw, title, count }) => (
-  <div style={tw('flex flex-col w-full h-full bg-gradient-to-br from-purple-600 to-pink-500 p-8')}>
-    <h1 style={tw('text-4xl font-bold text-white mb-4')}>{title}</h1>
-    <div style={tw('flex items-center gap-2')}>
-      <span style={tw('text-2xl text-white')}>Count:</span>
-      <span style={tw('text-3xl font-bold text-yellow-300')}>{count}</span>
-    </div>
-  </div>
-);
-`;
-
-try {
-  // Step 1: Compile JSX to JavaScript
-  const compiledJS4 = compileTemplate(complexAttrs);
-
-  // Step 2: Load compiled template
-  const template4 = defineTemplateFromSource(compiledJS4);
-  const png4 = await renderImage(template4, { title: 'Complex JSX', count: 42 });
-  console.log('✓ Complex attributes work');
-  console.log('  PNG size:', png4.length, 'bytes\n');
-} catch (error) {
-  console.error('✗ Complex attributes failed:', error.message);
-}
-
-console.log('✅ All JSX tests completed!');
-console.log('\nWorkflow Summary:');
-console.log('1. compileTemplate() - Transform JSX → JS (admin panel)');
-console.log('2. defineTemplateFromSource() - Load compiled JS (production)');
-console.log('3. renderImage() - Render with props');
-console.log('\nBenefit: No @babel/standalone in production! 🎉');