loopwind 0.23.0 → 0.24.0

package/test-sdk-source-config.mjs

@@ -1,427 +0,0 @@
-/**
- * Integration tests for SDK defineTemplateFromSource with StyleConfig
- * Tests that defineTemplateFromSource works with the same config scenarios as defineTemplate
- * Run with: node test-sdk-source-config.mjs
- */
-
-import { defineTemplateFromSource, renderImage, renderVideo } from './dist/sdk/index.js';
-import React from 'react';
-
-const { createElement: h } = React;
-
-// Test utilities
-let testsPassed = 0;
-let testsFailed = 0;
-
-function assert(condition, message) {
-  if (!condition) {
-    console.error(`❌ FAIL: ${message}`);
-    testsFailed++;
-    throw new Error(message);
-  } else {
-    console.log(`✅ PASS: ${message}`);
-    testsPassed++;
-  }
-}
-
-async function test(name, fn) {
-  console.log(`\n📝 Test: ${name}`);
-  try {
-    await fn();
-  } catch (error) {
-    console.error(`Error in test "${name}":`, error.message);
-  }
-}
-
-// Helper to check if SVG contains specific color
-function svgContainsColor(svg, color) {
-  const normalizedColor = color.replace('#', '');
-  return svg.includes(normalizedColor) || svg.includes(color);
-}
-
-// Test 1: Basic source template with config
-await test('Source: Basic template with config', async () => {
-  const source = `
-export const meta = {
-  name: 'source-with-config',
-  type: 'image',
-  size: { width: 400, height: 400 }
-};
-
-export default ({ tw }) => {
-  const h = React.createElement;
-  return h('div', { style: tw('flex items-center justify-center w-full h-full bg-primary') },
-    h('h1', { style: tw('text-4xl font-bold text-white') }, 'Config Test')
-  );
-};
-  `;
-
-  const template = defineTemplateFromSource(source, {
-    config: {
-      colors: {
-        primary: '#ff0000',
-      },
-    },
-  });
-
-  assert(template.config, 'Template should have config');
-  assert(template.config.colors.primary === '#ff0000', 'Config colors should match');
-
-  const svg = await renderImage(template, {}, { format: 'svg' });
-  const svgString = svg.toString();
-
-  assert(svgContainsColor(svgString, '#ff0000'), 'SVG should contain primary color');
-});
-
-// Test 2: Source with props and config
-await test('Source: Template with props and config', async () => {
-  const source = `
-export const meta = {
-  name: 'source-props-config',
-  type: 'image',
-  size: { width: 400, height: 400 }
-};
-
-export default ({ tw, title }) => {
-  const h = React.createElement;
-  return h('div', { style: tw('flex flex-col items-center justify-center w-full h-full bg-secondary') },
-    h('h1', { style: tw('text-4xl font-bold text-accent') }, title)
-  );
-};
-  `;
-
-  const template = defineTemplateFromSource(source, {
-    config: {
-      colors: {
-        accent: '#0000ff',
-        secondary: '#ffff00',
-      },
-    },
-  });
-
-  const svg = await renderImage(template, { title: 'Test' }, { format: 'svg' });
-  const svgString = svg.toString();
-
-  assert(svgContainsColor(svgString, '#0000ff'), 'SVG should contain accent color');
-  assert(svgContainsColor(svgString, '#ffff00'), 'SVG should contain secondary color');
-});
-
-// Test 3: Source with config override in render options
-await test('Source: Config override in render options', async () => {
-  const source = `
-export const meta = {
-  name: 'source-override',
-  type: 'image',
-  size: { width: 400, height: 400 }
-};
-
-export default ({ tw }) => {
-  const h = React.createElement;
-  return h('div', { style: tw('flex items-center justify-center w-full h-full bg-brand') },
-    h('h1', { style: tw('text-4xl font-bold') }, 'Override')
-  );
-};
-  `;
-
-  const template = defineTemplateFromSource(source, {
-    config: {
-      colors: {
-        brand: '#111111',
-      },
-    },
-  });
-
-  const svg = await renderImage(
-    template,
-    {},
-    {
-      format: 'svg',
-      config: {
-        colors: {
-          brand: '#222222',
-        },
-      },
-    }
-  );
-
-  const svgString = svg.toString();
-  assert(svgContainsColor(svgString, '#222222'), 'SVG should contain overridden brand color');
-  assert(!svgContainsColor(svgString, '#111111'), 'SVG should NOT contain original brand color');
-});
-
-// Test 4: Source video with config
-await test('Source: Video template with config', async () => {
-  const source = `
-export const meta = {
-  name: 'source-video',
-  type: 'video',
-  size: { width: 400, height: 400 },
-  video: { fps: 30, duration: 0.5 }
-};
-
-export default ({ tw, progress }) => {
-  const h = React.createElement;
-  const opacity = progress;
-  return h('div', { style: tw('flex items-center justify-center w-full h-full bg-white') },
-    h('h1', { style: { ...tw('text-4xl font-bold text-primary'), opacity } }, 'Video')
-  );
-};
-  `;
-
-  const template = defineTemplateFromSource(source, {
-    config: {
-      colors: {
-        primary: '#ff6600',
-      },
-    },
-  });
-
-  const mp4 = await renderVideo(template, {});
-
-  assert(Buffer.isBuffer(mp4), 'MP4 should be a Buffer');
-  assert(mp4.length > 0, 'MP4 buffer should not be empty');
-  const signature = mp4.toString('ascii', 4, 8);
-  assert(signature === 'ftyp', 'Should be valid MP4');
-});
-
-// Test 5: Source with multiple custom colors
-await test('Source: Multiple custom colors', async () => {
-  const source = `
-export const meta = {
-  name: 'source-multi-colors',
-  type: 'image',
-  size: { width: 600, height: 400 }
-};
-
-export default ({ tw }) => {
-  const h = React.createElement;
-  return h('div', { style: tw('flex flex-col items-center justify-center w-full h-full bg-brand-light p-8') },
-    h('h1', { style: tw('text-4xl font-bold text-brand') }, 'Brand'),
-    h('p', { style: tw('text-2xl text-brand-dark') }, 'Brand Dark'),
-    h('p', { style: tw('text-xl text-accent') }, 'Accent'),
-    h('p', { style: tw('text-lg text-success') }, 'Success')
-  );
-};
-  `;
-
-  const template = defineTemplateFromSource(source, {
-    config: {
-      colors: {
-        brand: '#8b5cf6',
-        'brand-light': '#a78bfa',
-        'brand-dark': '#7c3aed',
-        accent: '#f59e0b',
-        success: '#10b981',
-      },
-    },
-  });
-
-  const svg = await renderImage(template, {}, { format: 'svg' });
-  const svgString = svg.toString();
-
-  assert(svgContainsColor(svgString, '#8b5cf6'), 'SVG should contain brand color');
-  assert(svgContainsColor(svgString, '#a78bfa'), 'SVG should contain brand-light color');
-  assert(svgContainsColor(svgString, '#7c3aed'), 'SVG should contain brand-dark color');
-  assert(svgContainsColor(svgString, '#f59e0b'), 'SVG should contain accent color');
-  assert(svgContainsColor(svgString, '#10b981'), 'SVG should contain success color');
-});
-
-// Test 6: Source with fonts in config
-await test('Source: Fonts in config', async () => {
-  const source = `
-export const meta = {
-  name: 'source-fonts',
-  type: 'image',
-  size: { width: 400, height: 400 }
-};
-
-export default ({ tw }) => {
-  const h = React.createElement;
-  return h('div', { style: tw('flex flex-col items-center justify-center w-full h-full bg-white') },
-    h('h1', { style: tw('font-sans text-4xl text-text') }, 'Sans Font'),
-    h('p', { style: tw('font-mono text-xl text-text') }, 'Mono Font')
-  );
-};
-  `;
-
-  const template = defineTemplateFromSource(source, {
-    config: {
-      colors: {
-        text: '#000000',
-      },
-      fonts: {
-        sans: ['Inter', 'system-ui', 'sans-serif'],
-        mono: ['JetBrains Mono', 'monospace'],
-      },
-    },
-  });
-
-  const svg = await renderImage(template, {}, { format: 'svg' });
-  assert(svg.length > 0, 'SVG should be generated with fonts');
-});
-
-// Test 7: Source with partial config merge
-await test('Source: Partial config merge', async () => {
-  const source = `
-export const meta = {
-  name: 'source-partial-merge',
-  type: 'image',
-  size: { width: 400, height: 400 }
-};
-
-export default ({ tw }) => {
-  const h = React.createElement;
-  return h('div', { style: tw('flex items-center justify-center w-full h-full bg-secondary') },
-    h('h1', { style: tw('text-4xl font-bold text-primary') }, 'Merge')
-  );
-};
-  `;
-
-  const template = defineTemplateFromSource(source, {
-    config: {
-      colors: {
-        primary: '#111111',
-        secondary: '#222222',
-      },
-    },
-  });
-
-  const svg = await renderImage(
-    template,
-    {},
-    {
-      format: 'svg',
-      config: {
-        colors: {
-          primary: '#999999', // Override only primary
-        },
-      },
-    }
-  );
-
-  const svgString = svg.toString();
-  assert(svgContainsColor(svgString, '#999999'), 'SVG should contain overridden primary color');
-  assert(svgContainsColor(svgString, '#222222'), 'SVG should retain original secondary color');
-});
-
-// Test 8: Source with font files from URLs
-await test('Source: Font files from URLs', async () => {
-  const source = `
-export const meta = {
-  name: 'source-font-files',
-  type: 'image',
-  size: { width: 600, height: 400 }
-};
-
-export default ({ tw }) => {
-  const h = React.createElement;
-  return 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')
-  );
-};
-  `;
-
-  const template = defineTemplateFromSource(source, {
-    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 svg = await renderImage(template, {}, { format: 'svg' });
-  assert(svg.length > 0, 'SVG should be generated with font files from URLs');
-
-  const png = await renderImage(template, {}, { format: 'png' });
-  assert(Buffer.isBuffer(png), 'PNG should be a Buffer');
-  assert(png.length > 0, 'PNG buffer should not be empty');
-  assert(png[0] === 0x89 && png[1] === 0x50 && png[2] === 0x4e && png[3] === 0x47, 'Should be valid PNG with custom fonts');
-});
-
-// Test 9: Source PNG format with config
-await test('Source: PNG format with config', async () => {
-  const source = `
-export const meta = {
-  name: 'source-png',
-  type: 'image',
-  size: { width: 200, height: 200 }
-};
-
-export default ({ tw }) => {
-  const h = React.createElement;
-  return h('div', { style: tw('flex items-center justify-center w-full h-full bg-primary') },
-    h('h1', { style: tw('text-2xl font-bold text-white') }, 'PNG')
-  );
-};
-  `;
-
-  const template = defineTemplateFromSource(source);
-
-  const png = await renderImage(
-    template,
-    {},
-    {
-      format: 'png',
-      config: {
-        colors: {
-          primary: '#ff00ff',
-        },
-      },
-    }
-  );
-
-  assert(Buffer.isBuffer(png), 'PNG should be a Buffer');
-  assert(png.length > 0, 'PNG buffer should not be empty');
-  assert(png[0] === 0x89 && png[1] === 0x50 && png[2] === 0x4e && png[3] === 0x47, 'Should be valid PNG');
-});
-
-// Test 10: Source without config (defaults)
-await test('Source: No config - should work with defaults', async () => {
-  const source = `
-export const meta = {
-  name: 'source-no-config',
-  type: 'image',
-  size: { width: 400, height: 400 }
-};
-
-export default ({ tw }) => {
-  const h = React.createElement;
-  return h('div', { style: tw('flex items-center justify-center w-full h-full bg-white') },
-    h('h1', { style: tw('text-4xl font-bold text-black') }, 'No Config')
-  );
-};
-  `;
-
-  const template = defineTemplateFromSource(source);
-  const svg = await renderImage(template, {}, { format: 'svg' });
-  assert(svg.length > 0, 'SVG should be generated without config');
-});
-
-// Summary
-console.log('\n' + '='.repeat(50));
-console.log(`✅ Tests passed: ${testsPassed}`);
-console.log(`❌ Tests failed: ${testsFailed}`);
-console.log('='.repeat(50));
-
-if (testsFailed > 0) {
-  process.exit(1);
-} else {
-  console.log('\n🎉 All tests passed!');
-  process.exit(0);
-}