loopwind 0.23.0 → 0.24.0

package/test-sdk-user-templates.mjs

@@ -1,469 +0,0 @@
-/**
- * Test suite for user-generated templates
- * - defineTemplateFromSource (code editor)
- * - defineTemplateFromSchema (visual builder)
- */
-
-import { defineTemplateFromSource, defineTemplateFromSchema, renderImage, renderVideo } from './dist/sdk/index.js';
-import React from 'react';
-import fs from 'fs/promises';
-
-const h = React.createElement;
-let passed = 0;
-let failed = 0;
-
-function test(name, fn) {
-  try {
-    fn();
-    console.log(`✓ ${name}`);
-    passed++;
-  } catch (error) {
-    console.error(`✗ ${name}`);
-    console.error(`  ${error.message}`);
-    failed++;
-  }
-}
-
-async function asyncTest(name, fn) {
-  try {
-    await fn();
-    console.log(`✓ ${name}`);
-    passed++;
-  } catch (error) {
-    console.error(`✗ ${name}`);
-    console.error(`  ${error.message}`);
-    failed++;
-  }
-}
-
-console.log('Testing defineTemplateFromSource\n');
-
-// Test 1: Basic source template
-await asyncTest('Source: Basic image template', async () => {
-  const source = `
-export const meta = {
-  name: 'test',
-  type: 'image',
-  size: { width: 100, height: 100 }
-};
-
-export default ({ tw }) => {
-  const h = React.createElement;
-  return h('div', { style: tw('bg-blue-500 w-full h-full') });
-};
-  `;
-
-  const template = defineTemplateFromSource(source);
-  if (template.name !== 'test') throw new Error('Template name incorrect');
-  if (template.type !== 'image') throw new Error('Template type incorrect');
-
-  const png = await renderImage(template, {});
-  if (!Buffer.isBuffer(png)) throw new Error('Should return buffer');
-});
-
-// Test 2: Source template with props
-await asyncTest('Source: Template with props', async () => {
-  const source = `
-export const meta = {
-  name: 'with-props',
-  type: 'image',
-  size: { width: 200, height: 100 }
-};
-
-export default ({ tw, title }) => {
-  const h = React.createElement;
-  return h('div', { style: tw('flex flex-col bg-white p-4') },
-    h('h1', { style: tw('text-black') }, title)
-  );
-};
-  `;
-
-  const template = defineTemplateFromSource(source);
-  const png = await renderImage(template, { title: 'Hello' });
-  if (!Buffer.isBuffer(png)) throw new Error('Should return buffer');
-});
-
-// Test 3: Source template with config
-await asyncTest('Source: Template with config', async () => {
-  const source = `
-export const meta = {
-  name: 'with-config',
-  type: 'image',
-  size: { width: 200, height: 100 }
-};
-
-export default ({ tw }) => {
-  const h = React.createElement;
-  return h('div', { style: tw('bg-primary p-4') });
-};
-  `;
-
-  const template = defineTemplateFromSource(source, {
-    config: {
-      colors: { primary: '#ff0000' },
-    },
-  });
-
-  const svg = await renderImage(template, {}, { format: 'svg' });
-  const svgStr = svg.toString();
-  if (!svgStr.includes('#ff0000')) throw new Error('Config colors not applied');
-});
-
-// Test 4: Source video template
-await asyncTest('Source: Video template', async () => {
-  const source = `
-export const meta = {
-  name: 'video-test',
-  type: 'video',
-  size: { width: 100, height: 100 },
-  video: { fps: 2, duration: 0.5 }
-};
-
-export default ({ tw }) => {
-  const h = React.createElement;
-  return h('div', {
-    style: tw('bg-blue-500 w-full h-full enter-fade-in/0/500')
-  });
-};
-  `;
-
-  const template = defineTemplateFromSource(source);
-  if (template.type !== 'video') throw new Error('Should be video type');
-
-  const mp4 = await renderVideo(template, {});
-  if (!Buffer.isBuffer(mp4)) throw new Error('Should return buffer');
-  if (mp4.length === 0) throw new Error('Video should have content');
-});
-
-// Test 5: Invalid source - no meta
-test('Source: Error on missing meta', () => {
-  const source = `
-export default () => {
-  return React.createElement('div', {}, 'test');
-};
-  `;
-
-  try {
-    defineTemplateFromSource(source);
-    throw new Error('Should have thrown error');
-  } catch (error) {
-    if (!error.message.includes('meta')) throw new Error('Should mention meta');
-  }
-});
-
-// Test 6: Invalid source - no default export
-test('Source: Error on missing default export', () => {
-  const source = `
-export const meta = {
-  name: 'test',
-  size: { width: 100, height: 100 }
-};
-  `;
-
-  try {
-    defineTemplateFromSource(source);
-    throw new Error('Should have thrown error');
-  } catch (error) {
-    if (!error.message.includes('default')) throw new Error('Should mention default export');
-  }
-});
-
-console.log('\nTesting defineTemplateFromSchema\n');
-
-// Test 7: Basic schema template
-await asyncTest('Schema: Basic template', async () => {
-  const schema = {
-    name: 'basic-schema',
-    size: { width: 200, height: 100 },
-    elements: [
-      {
-        type: 'div',
-        className: 'bg-blue-500 w-full h-full',
-      },
-    ],
-  };
-
-  const template = defineTemplateFromSchema(schema);
-  if (template.name !== 'basic-schema') throw new Error('Name incorrect');
-
-  const png = await renderImage(template, {});
-  if (!Buffer.isBuffer(png)) throw new Error('Should return buffer');
-});
-
-// Test 8: Schema with text interpolation
-await asyncTest('Schema: Text interpolation', async () => {
-  const schema = {
-    name: 'with-text',
-    size: { width: 300, height: 150 },
-    elements: [
-      {
-        type: 'div',
-        className: 'flex flex-col bg-white p-4 w-full h-full',
-        children: [
-          {
-            type: 'h1',
-            className: 'text-black',
-            content: '{{title}}',
-          },
-        ],
-      },
-    ],
-  };
-
-  const template = defineTemplateFromSchema(schema);
-  const svg = await renderImage(template, { title: 'Test Title' }, { format: 'svg' });
-  // SVG renders text as paths, so we can't check for literal strings
-  // Just verify it renders without error and has content
-  if (!Buffer.isBuffer(svg)) throw new Error('Should return buffer');
-  if (svg.length === 0) throw new Error('Should have content');
-});
-
-// Test 9: Schema with nested children
-await asyncTest('Schema: Nested elements', async () => {
-  const schema = {
-    name: 'nested',
-    size: { width: 400, height: 200 },
-    elements: [
-      {
-        type: 'div',
-        className: 'flex flex-col w-full h-full bg-white p-4',
-        children: [
-          {
-            type: 'h1',
-            className: 'text-2xl font-bold',
-            content: '{{title}}',
-          },
-          {
-            type: 'p',
-            className: 'text-base',
-            content: '{{description}}',
-          },
-        ],
-      },
-    ],
-  };
-
-  const template = defineTemplateFromSchema(schema);
-  const svg = await renderImage(
-    template,
-    { title: 'Nested', description: 'Works!' },
-    { format: 'svg' }
-  );
-  // SVG renders text as paths, just verify it has content
-  if (!Buffer.isBuffer(svg)) throw new Error('Should return buffer');
-  if (svg.length === 0) throw new Error('Should have content');
-});
-
-// Test 10: Schema with config
-await asyncTest('Schema: With config', async () => {
-  const schema = {
-    name: 'with-config',
-    size: { width: 200, height: 100 },
-    config: {
-      colors: {
-        primary: '#00ff00',
-        background: '#ffffff',
-      },
-    },
-    elements: [
-      {
-        type: 'div',
-        className: 'bg-primary w-full h-full',
-      },
-    ],
-  };
-
-  const template = defineTemplateFromSchema(schema);
-  const svg = await renderImage(template, {}, { format: 'svg' });
-  const svgStr = svg.toString();
-  if (!svgStr.includes('#00ff00')) throw new Error('Primary color not applied');
-});
-
-// Test 11: Schema with multiple root elements
-await asyncTest('Schema: Multiple root elements', async () => {
-  const schema = {
-    name: 'multi-root',
-    size: { width: 400, height: 200 },
-    elements: [
-      {
-        type: 'div',
-        className: 'flex w-full h-full bg-white',
-        children: [
-          {
-            type: 'div',
-            className: 'flex-1 bg-red-500',
-            content: 'First',
-          },
-          {
-            type: 'div',
-            className: 'flex-1 bg-blue-500',
-            content: 'Second',
-          },
-        ],
-      },
-    ],
-  };
-
-  const template = defineTemplateFromSchema(schema);
-  const svg = await renderImage(template, {}, { format: 'svg' });
-  // SVG renders text as paths, just verify it has content
-  if (!Buffer.isBuffer(svg)) throw new Error('Should return buffer');
-  if (svg.length === 0) throw new Error('Should have content');
-});
-
-// Test 12: Schema video template
-await asyncTest('Schema: Video template', async () => {
-  const schema = {
-    name: 'video-schema',
-    type: 'video',
-    size: { width: 100, height: 100 },
-    video: { fps: 2, duration: 0.5 },
-    elements: [
-      {
-        type: 'div',
-        className: 'bg-purple-500 w-full h-full',
-      },
-    ],
-  };
-
-  const template = defineTemplateFromSchema(schema);
-  if (template.type !== 'video') throw new Error('Should be video type');
-
-  const mp4 = await renderVideo(template, {});
-  if (!Buffer.isBuffer(mp4)) throw new Error('Should return buffer');
-  if (mp4.length === 0) throw new Error('Video should have content');
-});
-
-// Test 13: Schema with img element
-await asyncTest('Schema: Image element with interpolation', async () => {
-  const schema = {
-    name: 'with-image',
-    size: { width: 400, height: 200 },
-    elements: [
-      {
-        type: 'div',
-        className: 'bg-white w-full h-full flex items-center justify-center',
-        children: [
-          {
-            type: 'img',
-            src: '{{imageUrl}}',
-            style: { width: '128px', height: '128px' },
-          },
-        ],
-      },
-    ],
-  };
-
-  const template = defineTemplateFromSchema(schema);
-  // Use a minimal valid 1x1 red PNG
-  const redPixel = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==';
-  const svg = await renderImage(
-    template,
-    { imageUrl: redPixel },
-    { format: 'svg' }
-  );
-  const svgStr = svg.toString();
-  if (!svgStr.includes('data:image/png')) throw new Error('Image src not interpolated');
-});
-
-// Test 14: Schema error - empty elements
-test('Schema: Error on empty elements', () => {
-  const schema = {
-    name: 'empty',
-    size: { width: 100, height: 100 },
-    elements: [],
-  };
-
-  try {
-    const template = defineTemplateFromSchema(schema);
-    // Try to render - should fail
-    renderImage(template, {});
-    throw new Error('Should have thrown error');
-  } catch (error) {
-    if (!error.message.includes('element')) throw new Error('Should mention elements');
-  }
-});
-
-// Test 15: Complex real-world schema
-await asyncTest('Schema: Complex real-world example', async () => {
-  const schema = {
-    name: 'og-card',
-    size: { width: 1200, height: 630 },
-    config: {
-      colors: {
-        primary: '#3b82f6',
-        secondary: '#8b5cf6',
-        background: '#ffffff',
-        text: '#1f2937',
-      },
-    },
-    elements: [
-      {
-        type: 'div',
-        className: 'flex w-full h-full bg-background',
-        children: [
-          {
-            type: 'div',
-            className: 'flex flex-col w-1/3 bg-primary p-8 justify-between',
-            children: [
-              {
-                type: 'h2',
-                className: 'text-2xl font-bold text-white',
-                content: '{{category}}',
-              },
-              {
-                type: 'p',
-                className: 'text-white/80',
-                content: '{{date}}',
-              },
-            ],
-          },
-          {
-            type: 'div',
-            className: 'flex flex-col flex-1 p-12 justify-center',
-            children: [
-              {
-                type: 'h1',
-                className: 'text-6xl font-bold text-text mb-4',
-                content: '{{title}}',
-              },
-              {
-                type: 'div',
-                className: 'w-24 h-2 bg-secondary mb-4',
-              },
-              {
-                type: 'p',
-                className: 'text-2xl text-text/70',
-                content: '{{description}}',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  };
-
-  const template = defineTemplateFromSchema(schema);
-  const png = await renderImage(template, {
-    category: 'TECHNOLOGY',
-    date: 'March 2024',
-    title: 'The Future of AI',
-    description: 'Exploring next-generation artificial intelligence',
-  });
-
-  if (!Buffer.isBuffer(png)) throw new Error('Should return buffer');
-  if (png.length === 0) throw new Error('Image should have content');
-
-  // Save for visual inspection
-  await fs.writeFile('test-complex-schema.png', png);
-});
-
-// Summary
-console.log('\n' + '='.repeat(50));
-console.log(`Tests passed: ${passed}`);
-console.log(`Tests failed: ${failed}`);
-console.log('='.repeat(50));
-
-if (failed > 0) {
-  process.exit(1);
-}

package/test-static-debug.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-export const meta = {
-  name: 'test-static-debug',
-  description: 'Simple static image for debug testing',
-  type: 'image' as const,
-  size: { width: 600, height: 400 },
-};
-
-export default function TestStatic({ tw }: { tw: any }) {
-  return (
-    <div style={tw('flex items-center justify-center w-full h-full bg-gradient-to-br from-blue-500 to-purple-600')}>
-      <div style={tw('flex flex-col items-center gap-4 p-8 bg-white rounded-lg')}>
-        <h1 style={tw('text-4xl font-bold text-gray-900')}>Debug Test</h1>
-        <p style={tw('text-lg text-gray-600')}>Testing Satori debug mode</p>
-      </div>
-    </div>
-  );
-}

package/test-templates/TESTS.md

@@ -1,63 +0,0 @@
-# Test Templates
-
-This folder contains test templates and scripts to verify loopwind functionality.
-
-## CLI Tests
-
-Test all template types using the CLI:
-
-```bash
-# Create output directory
-mkdir -p output
-
-# Static image
-node ../dist/cli.js render static-image --format png --out output/static-image.png '{"title":"Hello","subtitle":"World"}'
-
-# QR code
-node ../dist/cli.js render qr-code --format png --out output/qr-code.png '{"url":"https://example.com","title":"Test QR"}'
-
-# Animated intro (transitions)
-node ../dist/cli.js render animated-intro --format mp4 --out output/animated-intro.mp4 '{"title":"Welcome","subtitle":"Test Subtitle"}'
-
-# Video loops
-node ../dist/cli.js render video-loops --format mp4 --out output/video-loops.mp4 '{"title":"Loops"}'
-
-# Composite (embedded templates)
-node ../dist/cli.js render composite --format png --out output/composite.png '{"title":"Test Composite","qrUrl":"https://example.com"}'
-
-# Easing test
-node ../dist/cli.js render easing-test --format mp4 --out output/easing-test.mp4 '{}'
-```
-
-## SDK Tests
-
-Test programmatic rendering with the SDK:
-
-```bash
-node test-sdk.mjs
-```
-
-This tests:
-1. Static image rendering (PNG, JPEG, WebP formats)
-2. Animated video rendering with transitions
-3. QR code generation
-4. Different output formats
-
-## Templates
-
-| Template | Type | Description |
-|----------|------|-------------|
-| `static-image` | image | Basic OG image with gradient background |
-| `qr-code` | image | QR code generation with `qr()` helper |
-| `animated-intro` | video | Transition animations (bounce-in, fade-in-up) |
-| `video-loops` | video | Loop animations (pulse, bounce, spin, float, wiggle, ping) |
-| `composite` | image | Template composition with `template()` helper |
-| `easing-test` | video | Visual comparison of easing functions |
-
-## Features Tested
-
-- **Helpers**: `tw()`, `qr()`, `template()`
-- **Animations**: Transition animations with progress, loop animations with frame
-- **Easing**: linear, ease-in, ease-out, ease-in-out, cubic, quart variants
-- **Formats**: PNG, JPEG, WebP, MP4
-- **SDK**: `defineTemplate()`, `renderImage()`, `renderVideo()`

package/test-templates/config-test.mjs

@@ -1,17 +0,0 @@
-import React from 'react';
-const { createElement: h } = React;
-
-export const meta = {
-  name: 'test-config-template',
-  type: 'image',
-  size: { width: 400, height: 400 },
-  props: {
-    title: 'string',
-  },
-};
-
-export default function ConfigTest({ tw, title }) {
-  return h('div', { style: tw('flex items-center justify-center w-full h-full bg-background') },
-    h('h1', { style: tw('text-4xl font-bold text-primary') }, title)
-  );
-}

package/test-templates/demo-intro-props.json

@@ -1,4 +0,0 @@
-{
-  "title": "Welcome!",
-  "subtitle": "Built with loopwind"
-}

package/test-templates/run-tests.sh

@@ -1,44 +0,0 @@
-#!/bin/bash
-
-# Test script for loopwind templates
-# Outputs to test-templates/output/
-
-cd "$(dirname "$0")"
-
-# Use local build
-LW="node ../dist/cli.js"
-
-echo "🧪 Running loopwind template tests..."
-echo ""
-
-mkdir -p output
-
-# Static image test
-echo "📷 Testing static-image..."
-$LW render static-image '{"title":"Hello World","subtitle":"Testing static image template"}' --out output/static-image.png
-
-# QR code test
-echo "📱 Testing qr-code..."
-$LW render qr-code '{"url":"https://loopwind.dev","title":"Scan to visit"}' --out output/qr-code.png
-
-# Composite template test
-echo "🧩 Testing composite..."
-$LW render composite '{"title":"Composite Test","qrUrl":"https://github.com/tomtev/loopwind"}' --out output/composite.png
-
-# Animated intro video test
-echo "🎬 Testing animated-intro..."
-$LW render animated-intro '{"title":"Welcome","subtitle":"Animation classes test"}' --out output/animated-intro.mp4
-
-# Video loops test
-echo "🔄 Testing video-loops..."
-$LW render video-loops '{"title":"Loop Test"}' --out output/video-loops.mp4
-
-# Easing test video
-echo "📈 Testing easing-test..."
-$LW render easing-test '{}' --out output/easing-test.mp4
-
-echo ""
-echo "✅ All tests complete! Check output/ for results."
-echo ""
-echo "Output files:"
-ls -la output/