loopwind 0.18.0 → 0.19.0

package/dist/sdk/template.js

@@ -1,43 +1,4 @@
 import React from 'react';
-/**
- * Define a template programmatically for use in serverless environments
- *
- * @example
- * ```typescript
- * const ogImage = defineTemplate({
- *   name: 'og-image',
- *   type: 'image',
- *   size: { width: 1200, height: 630 },
- *   render: ({ tw, title, description }) => (
- *     <div style={tw('flex flex-col w-full h-full bg-white p-12')}>
- *       <h1 style={tw('text-6xl font-bold')}>{title}</h1>
- *       <p style={tw('text-2xl text-gray-600')}>{description}</p>
- *     </div>
- *   )
- * });
- * ```
- */
-export function defineTemplate(definition) {
-    // Validate definition
-    if (!definition.name) {
-        throw new Error('Template definition must have a name');
-    }
-    if (!definition.size || !definition.size.width || !definition.size.height) {
-        throw new Error('Template definition must have a size with width and height');
-    }
-    if (!definition.render || typeof definition.render !== 'function') {
-        throw new Error('Template definition must have a render function');
-    }
-    // Set defaults
-    const type = definition.type || 'image';
-    if (type === 'video' && !definition.video) {
-        throw new Error('Video templates must have video metadata (fps, duration)');
-    }
-    return {
-        ...definition,
-        type,
-    };
-}
 /**
  * Convert a template definition to template metadata
  * @internal
@@ -55,66 +16,83 @@ export function templateToMeta(template) {
 /**
  * Define a template from an imported template file
  *
- * Allows reusing file-based templates from _loopwind/templates/ in the SDK
+ * The standard way to create templates in loopwind. Import a template file
+ * and pass it to defineTemplate() with optional config overrides.
  *
  * @example
  * ```typescript
- * import * as videoIntro from './_loopwind/templates/video-intro/template';
+ * import * as ogImage from './_loopwind/templates/og-image/template';
  *
- * const template = defineTemplateFromFile(videoIntro, {
+ * const template = defineTemplate(ogImage, {
  *   config: {
  *     colors: { primary: '#ff0000' }
  *   }
  * });
  *
- * const mp4 = await renderVideo(template, { version: '2.0.0' });
+ * const png = await renderImage(template, { title: 'Hello' });
  * ```
  */
-export function defineTemplateFromFile(templateModule, options = {}) {
+export function defineTemplate(templateModule, options = {}) {
     const { meta, default: render } = templateModule;
-    return defineTemplate({
+    // Validate meta
+    if (!meta.name) {
+        throw new Error('Template meta must have a name');
+    }
+    if (!meta.size || !meta.size.width || !meta.size.height) {
+        throw new Error('Template meta must have a size with width and height');
+    }
+    const type = meta.type || 'image';
+    if (type === 'video' && !meta.video) {
+        throw new Error('Video templates must have video metadata (fps, duration)');
+    }
+    return {
         name: meta.name,
-        type: meta.type,
+        type: type,
         size: meta.size,
         video: meta.video,
         config: options.config,
         render,
-    });
+    };
 }
 /**
  * Define a template from a source code string
  *
+ * **IMPORTANT:** This function expects **pre-compiled JavaScript** with React.createElement
+ * calls. If you have JSX source code, compile it first using `compileTemplate()` from
+ * 'loopwind/sdk/compiler'.
+ *
  * **WARNING:** This function evaluates code strings using `new Function()`.
  * Only use with **trusted** template sources. Never use with user input from
  * untrusted sources as it can execute arbitrary code.
  *
- * Perfect for:
- * - Templates stored in a database (admin-created only)
- * - Templates from a trusted CMS
- * - Code editor features where templates are validated
+ * **Recommended workflow:**
+ * 1. In your admin panel: Use `compileTemplate()` to transform JSX → JavaScript
+ * 2. Store the compiled JavaScript in your database
+ * 3. In production: Load compiled code and pass to `defineTemplateFromSource()`
+ *
+ * This approach keeps @babel/standalone out of your production bundle!
  *
  * @example
  * ```typescript
- * const templateSource = `
- * export const meta = {
- *   name: 'user-template',
- *   type: 'image',
- *   size: { width: 1200, height: 630 }
- * };
+ * // Admin panel: Compile and save
+ * import { compileTemplate } from 'loopwind/sdk/compiler';
  *
- * export default ({ tw, title }) => {
- *   const h = React.createElement;
- *   return h('div', { style: tw('flex w-full h-full bg-blue-500 p-12') },
- *     h('h1', { style: tw('text-6xl font-bold text-white') }, title)
- *   );
- * };
- * `;
+ * const jsxCode = getUserCodeFromEditor(); // Contains JSX
+ * const compiled = compileTemplate(jsxCode);
+ * await db.templates.save({ code: compiled });
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Production API: Load and render
+ * import { defineTemplateFromSource, renderImage } from 'loopwind/sdk';
  *
- * const template = defineTemplateFromSource(templateSource, {
+ * const template = await db.templates.findById(id);
+ * const templateDef = defineTemplateFromSource(template.code, {
  *   config: { colors: { primary: '#3b82f6' } }
  * });
  *
- * const png = await renderImage(template, { title: 'Hello' });
+ * const png = await renderImage(templateDef, { title: 'Hello' });
  * ```
  */
 export function defineTemplateFromSource(sourceCode, options = {}) {
@@ -129,7 +107,6 @@ export function defineTemplateFromSource(sourceCode, options = {}) {
         // This executes the source code and returns the exports
         const moduleFactory = new Function('React', `
       'use strict';
-      const h = React.createElement;
       ${processedSource}
       return { meta, default: defaultExport };
     `);
@@ -141,7 +118,7 @@ export function defineTemplateFromSource(sourceCode, options = {}) {
         if (!templateModule.default || typeof templateModule.default !== 'function') {
             throw new Error('Template source must have a default export function');
         }
-        return defineTemplateFromFile(templateModule, options);
+        return defineTemplate(templateModule, options);
     }
     catch (error) {
         throw new Error(`Failed to parse template source: ${error instanceof Error ? error.message : String(error)}`);
@@ -240,13 +217,15 @@ export function defineTemplateFromSchema(schema) {
       return h(React.Fragment, null, elements.map((el, i) => buildElement(el, i)));
     }
   `)(React);
-    return defineTemplate({
+    // Create a template module from the schema
+    const meta = {
         name: schema.name,
-        type: schema.type,
+        description: schema.name,
+        type: schema.type || 'image',
         size: schema.size,
         video: schema.video,
-        config: schema.config,
-        render,
-    });
+        props: {},
+    };
+    return defineTemplate({ meta, default: render }, { config: schema.config });
 }
 //# sourceMappingURL=template.js.map

package/dist/sdk/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../src/sdk/template.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../src/sdk/template.ts"],"names":[],"mappings":"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"}

package/examples/template-compiler-workflow.ts

@@ -0,0 +1,251 @@
+/**
+ * Example: Template Compiler Workflow
+ *
+ * This example demonstrates the recommended production workflow for JSX templates:
+ *
+ * 1. ADMIN PANEL: Use compileTemplate() to transform JSX → JavaScript
+ * 2. DATABASE: Store the compiled JavaScript
+ * 3. PRODUCTION API: Use defineTemplateFromSource() to render
+ *
+ * Benefits:
+ * - JSX developer experience in admin panel
+ * - No @babel/standalone in production (36 MB smaller!)
+ * - Faster cold starts in serverless functions
+ * - Syntax errors caught at save time, not render time
+ */
+
+import { compileTemplate, containsJSX } from 'loopwind/sdk/compiler';
+import { defineTemplateFromSource, renderImage } from 'loopwind/sdk';
+import fs from 'fs/promises';
+
+// ============================================================================
+// PART 1: Admin Panel - Compile and Save
+// ============================================================================
+
+/**
+ * Simulates an admin panel API where users edit templates in a code editor
+ */
+async function adminPanelSaveTemplate(templateId: string, userCode: string) {
+  console.log('📝 Admin Panel: User saved template\n');
+  console.log('User-provided JSX:');
+  console.log(userCode.substring(0, 200) + '...\n');
+
+  try {
+    // Check if the code contains JSX
+    if (containsJSX(userCode)) {
+      console.log('✓ Detected JSX syntax, compiling...');
+
+      // Compile JSX to JavaScript
+      const compiled = compileTemplate(userCode);
+
+      console.log('✓ Compilation successful!');
+      console.log('  Original size:', userCode.length, 'bytes');
+      console.log('  Compiled size:', compiled.length, 'bytes\n');
+
+      // In a real app, you would save to a database:
+      // await db.templates.update(templateId, {
+      //   sourceCode: compiled,
+      //   updatedAt: new Date()
+      // });
+
+      // For this example, save to a file
+      await fs.writeFile(`template-${templateId}-compiled.js`, compiled);
+      console.log('✓ Saved compiled template to database\n');
+
+      return { success: true, compiled };
+    } else {
+      console.log('ℹ No JSX detected, saving as-is\n');
+      return { success: true, compiled: userCode };
+    }
+  } catch (error) {
+    console.error('✗ Compilation failed:', (error as Error).message);
+    return {
+      success: false,
+      error: (error as Error).message,
+    };
+  }
+}
+
+// ============================================================================
+// PART 2: Production API - Load and Render
+// ============================================================================
+
+/**
+ * Simulates a production API endpoint that renders templates
+ * This runs in Vercel, AWS Lambda, or any serverless function
+ */
+async function productionApiRenderTemplate(
+  templateId: string,
+  props: Record<string, any>
+) {
+  console.log('🚀 Production API: Rendering template\n');
+
+  try {
+    // Load pre-compiled template from database
+    // In a real app:
+    // const template = await db.templates.findById(templateId);
+    // const compiledCode = template.sourceCode;
+
+    // For this example, load from file
+    const compiledCode = await fs.readFile(
+      `template-${templateId}-compiled.js`,
+      'utf-8'
+    );
+
+    console.log('✓ Loaded pre-compiled template from database');
+    console.log('  Size:', compiledCode.length, 'bytes');
+    console.log('  No Babel needed! 🎉\n');
+
+    // Define template from pre-compiled JavaScript
+    // This is FAST - no JSX transformation at runtime
+    const templateDef = defineTemplateFromSource(compiledCode, {
+      config: {
+        colors: {
+          primary: '#3b82f6',
+          secondary: '#8b5cf6',
+        },
+      },
+    });
+
+    console.log('✓ Template loaded');
+    console.log('  Name:', templateDef.name);
+    console.log('  Type:', templateDef.type);
+    console.log('  Size:', templateDef.size.width, 'x', templateDef.size.height, '\n');
+
+    // Render the image
+    const png = await renderImage(templateDef, props);
+
+    console.log('✓ Image rendered');
+    console.log('  PNG size:', png.length, 'bytes\n');
+
+    return png;
+  } catch (error) {
+    console.error('✗ Rendering failed:', (error as Error).message);
+    throw error;
+  }
+}
+
+// ============================================================================
+// DEMO: Full Workflow
+// ============================================================================
+
+async function demo() {
+  console.log('='.repeat(70));
+  console.log('🎨 Template Compiler Workflow Demo');
+  console.log('='.repeat(70) + '\n');
+
+  // Example JSX template that a user might write in a code editor
+  const userJSX = `
+export const meta = {
+  name: 'social-card',
+  type: 'image',
+  size: { width: 1200, height: 630 }
+};
+
+export default ({ tw, title, description, author }) => (
+  <div style={tw('flex flex-col justify-between w-full h-full bg-gradient-to-br from-primary to-secondary p-12')}>
+    <div style={tw('flex flex-col')}>
+      <h1 style={tw('text-6xl font-bold text-white mb-4')}>
+        {title}
+      </h1>
+      <p style={tw('text-2xl text-white/90')}>
+        {description}
+      </p>
+    </div>
+    <div style={tw('flex items-center gap-4')}>
+      <div style={tw('w-16 h-16 rounded-full bg-white/20')} />
+      <span style={tw('text-xl text-white/80')}>{author}</span>
+    </div>
+  </div>
+);
+`;
+
+  const templateId = 'card-123';
+
+  // STEP 1: Admin panel compiles and saves
+  console.log('STEP 1: Admin Panel Workflow');
+  console.log('-'.repeat(70) + '\n');
+  await adminPanelSaveTemplate(templateId, userJSX);
+
+  // STEP 2: Production API loads and renders
+  console.log('STEP 2: Production API Workflow');
+  console.log('-'.repeat(70) + '\n');
+  const png = await productionApiRenderTemplate(templateId, {
+    title: 'Building with loopwind',
+    description: 'Generate images and videos programmatically',
+    author: 'Tommy Vedvik',
+  });
+
+  // Save the final result
+  await fs.writeFile('social-card-demo.png', png);
+  console.log('✅ Saved final image to social-card-demo.png\n');
+
+  // Cleanup
+  await fs.unlink(`template-${templateId}-compiled.js`);
+
+  console.log('='.repeat(70));
+  console.log('📊 Workflow Summary');
+  console.log('='.repeat(70));
+  console.log('\n✅ Benefits of this approach:\n');
+  console.log('1. Users write natural JSX syntax in admin panel');
+  console.log('2. JSX compiled once at save time (not every render)');
+  console.log('3. Compiled templates stored in database');
+  console.log('4. Production bundle 36 MB smaller (no @babel/standalone)');
+  console.log('5. Faster cold starts in serverless functions');
+  console.log('6. Syntax errors caught early (at save, not production)\n');
+
+  console.log('🔧 For Vercel/Lambda deployments:\n');
+  console.log('- Admin panel imports: loopwind/sdk/compiler');
+  console.log('- Production API imports: loopwind/sdk');
+  console.log('- Result: Only admin panel includes Babel\n');
+}
+
+// ============================================================================
+// Example Integration Code
+// ============================================================================
+
+/**
+ * Example: Next.js Admin Panel API Route
+ */
+async function exampleNextJSAdminRoute(req: any, res: any) {
+  const { templateId, code } = req.body;
+
+  try {
+    // Compile JSX
+    const compiled = compileTemplate(code);
+
+    // Save to database
+    // await db.templates.update(templateId, { sourceCode: compiled });
+
+    res.json({ success: true });
+  } catch (error) {
+    res.status(400).json({
+      error: 'Compilation failed',
+      message: (error as Error).message,
+    });
+  }
+}
+
+/**
+ * Example: Next.js Production API Route
+ */
+async function exampleNextJSProductionRoute(req: any, res: any) {
+  const { templateId, props } = req.body;
+
+  try {
+    // Load pre-compiled template
+    // const template = await db.templates.findById(templateId);
+    // const templateDef = defineTemplateFromSource(template.sourceCode);
+
+    // Render
+    // const png = await renderImage(templateDef, props);
+
+    // res.setHeader('Content-Type', 'image/png');
+    // res.send(png);
+  } catch (error) {
+    res.status(500).json({ error: 'Rendering failed' });
+  }
+}
+
+// Run the demo
+demo().catch(console.error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "loopwind",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "A CLI tool for AI code agents and developers for generating images and videos.",
   "type": "module",
   "bin": {
@@ -15,6 +15,10 @@
     "./sdk": {
       "types": "./dist/sdk/index.d.ts",
       "default": "./dist/sdk/index.js"
+    },
+    "./sdk/compiler": {
+      "types": "./dist/sdk/compiler.d.ts",
+      "default": "./dist/sdk/compiler.js"
     }
   },
   "scripts": {
@@ -74,6 +78,8 @@
     "vite": "^7.2.2"
   },
   "devDependencies": {
+    "@babel/standalone": "^7.28.5",
+    "@types/babel__standalone": "^7.1.9",
     "@types/chalk-animation": "^1.6.3",
     "@types/express": "^5.0.5",
     "@types/gradient-string": "^1.1.6",

package/test-jsx-support.mjs

@@ -0,0 +1,146 @@
+/**
+ * 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! 🎉');