loopwind 0.18.0 → 0.19.0

package/test-sdk-source-config.mjs

@@ -0,0 +1,427 @@
+/**
+ * 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);
+}

package/test-templates/config-test.mjs

@@ -0,0 +1,17 @@
+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/website/astro.config.mjs

@@ -1,14 +1,24 @@
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 import tailwindcss from '@tailwindcss/vite';
+import cloudflare from '@astrojs/cloudflare';
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://loopwind.dev',
   output: 'hybrid',
+  adapter: cloudflare({
+    platformProxy: {
+      enabled: true,
+    },
+  }),
   integrations: [mdx()],
   vite: {
     plugins: [tailwindcss()],
+    ssr: {
+      external: ['node:fs/promises', 'node:fs', 'node:path', 'fs', 'fs/promises', 'path'],
+      noExternal: ['loopwind'],
+    },
   },
   markdown: {
     shikiConfig: {

package/website/dist/.gitkeep

@@ -2,3 +2,4 @@
 # Generate with: loopwind render video-intro '{"title":"loopwind","subtitle":"Generate videos with React + Tailwind"}' --out public/demo-intro.mp4
 
 
+

package/website/dist/_worker.js/index.js

@@ -1,7 +1,7 @@
 globalThis.process ??= {}; globalThis.process.env ??= {};
 import { renderers } from './renderers.mjs';
 import { createExports } from './_@astrojs-ssr-adapter.mjs';
-import { manifest } from './manifest_BAAoOzaU.mjs';
+import { manifest } from './manifest_CT_D-YDe.mjs';
 
 const _page0 = () => import('./pages/_image.astro.mjs');
 const _page1 = () => import('./pages/agents.astro.mjs');