loopwind 0.22.0 → 0.24.0

package/examples/template-compiler-workflow.ts

@@ -1,251 +0,0 @@
-/**
- * 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/examples/visual-builder-templates.ts

@@ -1,336 +0,0 @@
-/**
- * Example: Visual Builder - Templates from JSON schemas
- *
- * Use case: Building a drag-and-drop template builder where users
- * construct templates visually without writing code.
- *
- * Safe for user-generated content - no code execution!
- */
-
-import {
-  defineTemplateFromSchema,
-  renderImage,
-  renderVideo,
-  type TemplateSchema,
-} from 'loopwind/sdk';
-import fs from 'fs/promises';
-
-// Example 1: Simple card template
-const cardSchema: TemplateSchema = {
-  name: 'simple-card',
-  size: { width: 1200, height: 630 },
-  config: {
-    colors: {
-      primary: '#3b82f6',
-      background: '#ffffff',
-      text: '#1f2937',
-    },
-  },
-  elements: [
-    {
-      type: 'div',
-      className: 'flex flex-col w-full h-full bg-background p-12 justify-center',
-      children: [
-        {
-          type: 'h1',
-          className: 'text-6xl font-bold text-primary mb-4',
-          content: '{{title}}',
-        },
-        {
-          type: 'p',
-          className: 'text-2xl text-text',
-          content: '{{description}}',
-        },
-      ],
-    },
-  ],
-};
-
-async function renderSimpleCard() {
-  const template = defineTemplateFromSchema(cardSchema);
-
-  const png = await renderImage(template, {
-    title: 'Visual Builder',
-    description: 'No code required!',
-  });
-
-  await fs.writeFile('simple-card.png', png);
-  console.log('✓ Rendered simple-card.png');
-}
-
-// Example 2: Complex layout with multiple sections
-const complexSchema: TemplateSchema = {
-  name: 'complex-layout',
-  size: { width: 1200, height: 630 },
-  config: {
-    colors: {
-      primary: '#8b5cf6',
-      secondary: '#ec4899',
-      background: '#fafafa',
-      text: '#0f172a',
-    },
-  },
-  elements: [
-    {
-      type: 'div',
-      className: 'flex w-full h-full bg-background',
-      children: [
-        // Left sidebar
-        {
-          type: 'div',
-          className: 'flex flex-col w-1/3 bg-primary p-8 justify-between',
-          children: [
-            {
-              type: 'h2',
-              className: 'text-3xl font-bold text-white',
-              content: '{{category}}',
-            },
-            {
-              type: 'p',
-              className: 'text-lg text-white/80',
-              content: '{{subtitle}}',
-            },
-          ],
-        },
-        // Right content area
-        {
-          type: 'div',
-          className: 'flex flex-col flex-1 p-12 justify-center',
-          children: [
-            {
-              type: 'h1',
-              className: 'text-6xl font-bold text-text mb-6',
-              content: '{{title}}',
-            },
-            {
-              type: 'div',
-              className: 'w-24 h-2 bg-secondary mb-6',
-            },
-            {
-              type: 'p',
-              className: 'text-2xl text-text/70',
-              content: '{{description}}',
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};
-
-async function renderComplexLayout() {
-  const template = defineTemplateFromSchema(complexSchema);
-
-  const png = await renderImage(template, {
-    category: 'TECHNOLOGY',
-    subtitle: 'Innovation Series',
-    title: 'The Future of AI',
-    description: 'Exploring the next generation of artificial intelligence',
-  });
-
-  await fs.writeFile('complex-layout.png', png);
-  console.log('✓ Rendered complex-layout.png');
-}
-
-// Example 3: Template with dynamic branding
-const brandedSchema: TemplateSchema = {
-  name: 'branded-template',
-  size: { width: 1200, height: 630 },
-  elements: [
-    {
-      type: 'div',
-      className: 'flex flex-col w-full h-full bg-brand-bg p-12 justify-between',
-      children: [
-        {
-          type: 'div',
-          className: 'flex items-center gap-4',
-          children: [
-            {
-              type: 'div',
-              className: 'w-16 h-16 rounded-full bg-brand-primary',
-            },
-            {
-              type: 'span',
-              className: 'text-2xl font-bold text-brand-text',
-              content: '{{companyName}}',
-            },
-          ],
-        },
-        {
-          type: 'div',
-          children: [
-            {
-              type: 'h1',
-              className: 'text-6xl font-bold text-brand-text mb-4',
-              content: '{{title}}',
-            },
-            {
-              type: 'p',
-              className: 'text-2xl text-brand-text/80',
-              content: '{{tagline}}',
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};
-
-async function renderWithBranding(brandColors: any, props: any) {
-  const template = defineTemplateFromSchema({
-    ...brandedSchema,
-    config: { colors: brandColors },
-  });
-
-  const png = await renderImage(template, props);
-  return png;
-}
-
-async function renderMultipleBrands() {
-  // Brand 1: Blue theme
-  const brand1 = await renderWithBranding(
-    {
-      'brand-primary': '#3b82f6',
-      'brand-bg': '#eff6ff',
-      'brand-text': '#1e3a8a',
-    },
-    {
-      companyName: 'TechCorp',
-      title: 'Innovation Summit 2024',
-      tagline: 'Building the Future Together',
-    }
-  );
-  await fs.writeFile('brand-1.png', brand1);
-  console.log('✓ Rendered brand-1.png');
-
-  // Brand 2: Purple theme
-  const brand2 = await renderWithBranding(
-    {
-      'brand-primary': '#8b5cf6',
-      'brand-bg': '#faf5ff',
-      'brand-text': '#581c87',
-    },
-    {
-      companyName: 'DesignStudio',
-      title: 'Creative Workshop',
-      tagline: 'Unleash Your Creativity',
-    }
-  );
-  await fs.writeFile('brand-2.png', brand2);
-  console.log('✓ Rendered brand-2.png');
-}
-
-// Example 4: User interface builder output
-// This simulates what a drag-and-drop builder would generate
-interface BuilderElement {
-  id: string;
-  type: string;
-  className: string;
-  content?: string;
-  children?: BuilderElement[];
-}
-
-function convertBuilderToSchema(
-  name: string,
-  elements: BuilderElement[],
-  config?: any
-): TemplateSchema {
-  // Remove IDs and convert to schema format
-  const cleanElements = (els: BuilderElement[]) => {
-    return els.map((el) => ({
-      type: el.type as any,
-      className: el.className,
-      content: el.content,
-      children: el.children ? cleanElements(el.children) : undefined,
-    }));
-  };
-
-  return {
-    name,
-    size: { width: 1200, height: 630 },
-    config,
-    elements: cleanElements(elements),
-  };
-}
-
-async function renderFromBuilder() {
-  // Simulated output from visual builder
-  const builderOutput: BuilderElement[] = [
-    {
-      id: 'root-1',
-      type: 'div',
-      className: 'flex items-center justify-center w-full h-full bg-gradient-to-br from-indigo-500 to-purple-600',
-      children: [
-        {
-          id: 'text-1',
-          type: 'h1',
-          className: 'text-8xl font-bold text-white',
-          content: '{{message}}',
-        },
-      ],
-    },
-  ];
-
-  const schema = convertBuilderToSchema('builder-output', builderOutput);
-  const template = defineTemplateFromSchema(schema);
-
-  const png = await renderImage(template, {
-    message: 'Built Visually!',
-  });
-
-  await fs.writeFile('builder-output.png', png);
-  console.log('✓ Rendered builder-output.png');
-}
-
-// Example 5: Video schema (for animated templates)
-const videoSchema: TemplateSchema = {
-  name: 'animated-card',
-  type: 'video',
-  size: { width: 1920, height: 1080 },
-  video: { fps: 30, duration: 3 },
-  config: {
-    colors: {
-      background: '#000000',
-      text: '#ffffff',
-    },
-  },
-  elements: [
-    {
-      type: 'div',
-      className: 'flex items-center justify-center w-full h-full bg-background',
-      children: [
-        {
-          type: 'h1',
-          className: 'text-8xl font-bold text-text enter-fade-in/0/1500 exit-fade-out/2500/3000',
-          content: '{{title}}',
-        },
-      ],
-    },
-  ],
-};
-
-async function renderVideoSchema() {
-  const template = defineTemplateFromSchema(videoSchema);
-
-  const mp4 = await renderVideo(template, {
-    title: 'Schema Video',
-  });
-
-  await fs.writeFile('animated-card.mp4', mp4);
-  console.log('✓ Rendered animated-card.mp4');
-}
-
-// Run all examples
-async function main() {
-  console.log('Visual Builder Examples\n');
-
-  await renderSimpleCard();
-  await renderComplexLayout();
-  await renderMultipleBrands();
-  await renderFromBuilder();
-  await renderVideoSchema();
-
-  console.log('\n✅ All visual builder examples completed!');
-}
-
-main().catch(console.error);