loopwind 0.18.1 → 0.20.1

package/test-jsx-support.mjs

@@ -1,10 +1,15 @@
 /**
- * Test JSX support in defineTemplateFromSource
+ * 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 in defineTemplateFromSource\n');
+console.log('Testing JSX Support with Pre-compilation\n');
 
 // Test 1: Simple JSX template
 const simpleJSX = `
@@ -22,7 +27,11 @@ export default ({ tw, title }) => (
 `;
 
 try {
-  const template1 = defineTemplateFromSource(simpleJSX);
+  // 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');
@@ -53,7 +62,11 @@ export default ({ tw, title, subtitle, items }) => (
 `;
 
 try {
-  const template2 = defineTemplateFromSource(nestedJSX);
+  // 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',
@@ -82,7 +95,11 @@ export default ({ tw }) => (
 `;
 
 try {
-  const template3 = defineTemplateFromSource(selfClosing);
+  // 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');
@@ -109,7 +126,11 @@ export default ({ tw, title, count }) => (
 `;
 
 try {
-  const template4 = defineTemplateFromSource(complexAttrs);
+  // 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');
@@ -118,3 +139,8 @@ try {
 }
 
 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! 🎉');

package/test-sdk-config.mjs

@@ -4,6 +4,7 @@
  */
 
 import { defineTemplate, renderImage, renderVideo } from './dist/sdk/index.js';
+import * as configTestTemplate from './test-templates/config-test.mjs';
 import React from 'react';
 import fs from 'fs/promises';
 import path from 'path';
@@ -12,6 +13,11 @@ import { fileURLToPath } from 'url';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const { createElement: h } = React;
 
+// Helper to create inline template modules for testing
+function createTemplateModule(meta, render) {
+  return { meta, default: render };
+}
+
 // Test utilities
 let testsPassed = 0;
 let testsFailed = 0;
@@ -52,15 +58,7 @@ await test('Config in defineTemplate - Image', async () => {
     },
   };
 
-  const template = defineTemplate({
-    name: 'test-config-template',
-    size: { width: 400, height: 400 },
-    config,
-    render: ({ tw, title }) =>
-      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)
-      ),
-  });
+  const template = defineTemplate(configTestTemplate, { config });
 
   assert(template.config, 'Template should have config');
   assert(template.config.colors.primary === '#ff0000', 'Config colors should match');
@@ -74,14 +72,20 @@ await test('Config in defineTemplate - Image', async () => {
 
 // Test 2: Config in renderImage options
 await test('Config in renderImage options', async () => {
-  const template = defineTemplate({
-    name: 'test-render-config',
-    size: { width: 400, height: 400 },
-    render: ({ tw, title }) =>
+  const templateModule = createTemplateModule(
+    {
+      name: 'test-render-config',
+      type: 'image',
+      size: { width: 400, height: 400 },
+      props: { title: 'string' },
+    },
+    ({ tw, title }) =>
       h('div', { style: tw('flex items-center justify-center w-full h-full bg-secondary') },
         h('h1', { style: tw('text-4xl font-bold text-accent') }, title)
-      ),
-  });
+      )
+  );
+
+  const template = defineTemplate(templateModule);
 
   const svg = await renderImage(
     template,
@@ -104,18 +108,25 @@ await test('Config in renderImage options', async () => {
 
 // Test 3: Config override (options override template)
 await test('Config override - Options override template', async () => {
-  const template = defineTemplate({
-    name: 'test-override',
-    size: { width: 400, height: 400 },
+  const templateModule = createTemplateModule(
+    {
+      name: 'test-override',
+      type: 'image',
+      size: { width: 400, height: 400 },
+      props: {},
+    },
+    ({ tw }) =>
+      h('div', { style: tw('flex items-center justify-center w-full h-full bg-brand') },
+        h('h1', { style: tw('text-4xl font-bold') }, 'Override Test')
+      )
+  );
+
+  const template = defineTemplate(templateModule, {
     config: {
       colors: {
         brand: '#111111',
       },
     },
-    render: ({ tw }) =>
-      h('div', { style: tw('flex items-center justify-center w-full h-full bg-brand') },
-        h('h1', { style: tw('text-4xl font-bold') }, 'Override Test')
-      ),
   });
 
   const svg = await renderImage(
@@ -138,14 +149,20 @@ await test('Config override - Options override template', async () => {
 
 // Test 4: PNG format with config
 await test('PNG format with config', async () => {
-  const template = defineTemplate({
-    name: 'test-png',
-    size: { width: 200, height: 200 },
-    render: ({ tw }) =>
+  const templateModule = createTemplateModule(
+    {
+      name: 'test-png',
+      type: 'image',
+      size: { width: 200, height: 200 },
+      props: {},
+    },
+    ({ tw }) =>
       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 = defineTemplate(templateModule);
 
   const png = await renderImage(
     template,
@@ -168,21 +185,27 @@ await test('PNG format with config', async () => {
 
 // Test 5: Video with config
 await test('Video with config', async () => {
-  const template = defineTemplate({
-    name: 'test-video',
-    type: 'video',
-    size: { width: 400, height: 400 },
-    video: { fps: 30, duration: 0.5 },
-    config: {
-      colors: {
-        primary: '#ff6600',
-      },
+  const templateModule = createTemplateModule(
+    {
+      name: 'test-video',
+      type: 'video',
+      size: { width: 400, height: 400 },
+      video: { fps: 30, duration: 0.5 },
+      props: {},
     },
-    render: ({ tw, progress }) => {
+    ({ tw, progress }) => {
       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 = defineTemplate(templateModule, {
+    config: {
+      colors: {
+        primary: '#ff6600',
+      },
     },
   });
 
@@ -197,20 +220,26 @@ await test('Video with config', async () => {
 
 // Test 6: Video with config override
 await test('Video with config override', async () => {
-  const template = defineTemplate({
-    name: 'test-video-override',
-    type: 'video',
-    size: { width: 400, height: 400 },
-    video: { fps: 30, duration: 0.5 },
+  const templateModule = createTemplateModule(
+    {
+      name: 'test-video-override',
+      type: 'video',
+      size: { width: 400, height: 400 },
+      video: { fps: 30, duration: 0.5 },
+      props: {},
+    },
+    ({ tw, progress }) =>
+      h('div', { style: tw('flex items-center justify-center w-full h-full bg-brand') },
+        h('h1', { style: { ...tw('text-4xl font-bold'), opacity: progress } }, 'Video')
+      )
+  );
+
+  const template = defineTemplate(templateModule, {
     config: {
       colors: {
         brand: '#333333',
       },
     },
-    render: ({ tw, progress }) =>
-      h('div', { style: tw('flex items-center justify-center w-full h-full bg-brand') },
-        h('h1', { style: { ...tw('text-4xl font-bold'), opacity: progress } }, 'Video')
-      ),
   });
 
   const mp4 = await renderVideo(template, {}, {
@@ -237,18 +266,23 @@ await test('Multiple custom colors', async () => {
     },
   };
 
-  const template = defineTemplate({
-    name: 'test-multi-colors',
-    size: { width: 600, height: 400 },
-    config,
-    render: ({ tw }) =>
+  const templateModule = createTemplateModule(
+    {
+      name: 'test-multi-colors',
+      type: 'image',
+      size: { width: 600, height: 400 },
+      props: {},
+    },
+    ({ tw }) =>
       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 = defineTemplate(templateModule, { config });
 
   const svg = await renderImage(template, {}, { format: 'svg' });
   const svgString = svg.toString();
@@ -272,16 +306,21 @@ await test('Fonts in config', async () => {
     },
   };
 
-  const template = defineTemplate({
-    name: 'test-fonts',
-    size: { width: 400, height: 400 },
-    config,
-    render: ({ tw }) =>
+  const templateModule = createTemplateModule(
+    {
+      name: 'test-fonts',
+      type: 'image',
+      size: { width: 400, height: 400 },
+      props: {},
+    },
+    ({ tw }) =>
       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 = defineTemplate(templateModule, { config });
 
   const svg = await renderImage(template, {}, { format: 'svg' });
   const svgString = svg.toString();
@@ -292,14 +331,20 @@ await test('Fonts in config', async () => {
 
 // Test 9: Empty config (should work with defaults)
 await test('Empty config - should work with defaults', async () => {
-  const template = defineTemplate({
-    name: 'test-no-config',
-    size: { width: 400, height: 400 },
-    render: ({ tw }) =>
+  const templateModule = createTemplateModule(
+    {
+      name: 'test-no-config',
+      type: 'image',
+      size: { width: 400, height: 400 },
+      props: {},
+    },
+    ({ tw }) =>
       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 = defineTemplate(templateModule);
 
   const svg = await renderImage(template, {}, { format: 'svg' });
   assert(svg.length > 0, 'SVG should be generated without config');
@@ -307,19 +352,26 @@ await test('Empty config - should work with defaults', async () => {
 
 // Test 10: Partial config merge
 await test('Partial config merge', async () => {
-  const template = defineTemplate({
-    name: 'test-partial-merge',
-    size: { width: 400, height: 400 },
+  const templateModule = createTemplateModule(
+    {
+      name: 'test-partial-merge',
+      type: 'image',
+      size: { width: 400, height: 400 },
+      props: {},
+    },
+    ({ tw }) =>
+      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 = defineTemplate(templateModule, {
     config: {
       colors: {
         primary: '#111111',
         secondary: '#222222',
       },
     },
-    render: ({ tw }) =>
-      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 svg = await renderImage(
@@ -363,16 +415,21 @@ await test('Font files from URLs', async () => {
     },
   };
 
-  const template = defineTemplate({
-    name: 'test-font-files',
-    size: { width: 600, height: 400 },
-    config,
-    render: ({ tw }) =>
+  const templateModule = createTemplateModule(
+    {
+      name: 'test-font-files',
+      type: 'image',
+      size: { width: 600, height: 400 },
+      props: {},
+    },
+    ({ 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')
-      ),
-  });
+      )
+  );
+
+  const template = defineTemplate(templateModule, { config });
 
   const svg = await renderImage(template, {}, { format: 'svg' });
   assert(svg.length > 0, 'SVG should be generated with font files from URLs');