loopwind 0.23.0 → 0.24.0

package/examples/nextjs-api/pages/api/intro-video.ts

@@ -1,53 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from 'next';
-import { defineTemplate, renderVideo } from 'loopwind/sdk';
-
-// Define video template programmatically
-const introTemplate = defineTemplate({
-  name: 'intro-video',
-  type: 'video',
-  size: { width: 1920, height: 1080 },
-  video: { fps: 30, duration: 3 },
-  render: ({ tw, progress, title }) => {
-    // Fade in animation
-    const opacity = progress < 0.5 ? progress / 0.5 : 1;
-
-    return (
-      <div
-        style={tw(
-          'flex items-center justify-center w-full h-full bg-gradient-to-br from-black to-gray-900'
-        )}
-      >
-        <h1
-          style={{
-            ...tw('text-8xl font-bold text-white'),
-            opacity,
-          }}
-        >
-          {title}
-        </h1>
-      </div>
-    );
-  },
-});
-
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  const { title = 'Welcome!' } = req.query;
-
-  try {
-    // Render video as MP4 buffer
-    const mp4 = await renderVideo(introTemplate, {
-      title: String(title),
-    });
-
-    // Return video
-    res.setHeader('Content-Type', 'video/mp4');
-    res.setHeader('Cache-Control', 's-maxage=3600');
-    res.send(mp4);
-  } catch (error) {
-    console.error('Error rendering video:', error);
-    res.status(500).json({ error: 'Failed to render video' });
-  }
-}

package/examples/nextjs-api/pages/api/og-image.ts

@@ -1,50 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from 'next';
-import { defineTemplate, renderImage } from 'loopwind/sdk';
-
-// Define template programmatically
-const ogTemplate = 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-gradient-to-br from-blue-600 to-purple-700 p-12 justify-between'
-      )}
-    >
-      <div style={tw('flex items-center gap-4')}>
-        <div style={tw('w-12 h-12 rounded-full bg-white/20')} />
-        <span style={tw('text-white/80 text-2xl')}>yoursite.com</span>
-      </div>
-
-      <div>
-        <h1 style={tw('text-6xl font-bold text-white mb-4')}>{title}</h1>
-        <p style={tw('text-2xl text-white/80')}>{description}</p>
-      </div>
-    </div>
-  ),
-});
-
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  const { title = 'Welcome', description = 'Generated with loopwind SDK' } =
-    req.query;
-
-  try {
-    // Render image as PNG buffer
-    const png = await renderImage(ogTemplate, {
-      title: String(title),
-      description: String(description),
-    });
-
-    // Return image
-    res.setHeader('Content-Type', 'image/png');
-    res.setHeader('Cache-Control', 's-maxage=86400, stale-while-revalidate');
-    res.send(png);
-  } catch (error) {
-    console.error('Error rendering OG image:', error);
-    res.status(500).json({ error: 'Failed to render image' });
-  }
-}

package/examples/nextjs-template-import.ts

@@ -1,58 +0,0 @@
-/**
- * Example: Importing template files in Next.js API routes
- *
- * This demonstrates how to reuse _loopwind/templates/ files
- * in your SDK code with Next.js (or any other bundler)
- */
-
-import type { NextApiRequest, NextApiResponse } from 'next';
-import { defineTemplate, renderVideo } from 'loopwind/sdk';
-
-// Import your template file (Next.js/bundler handles TSX automatically)
-import * as videoIntroTemplate from '../../_loopwind/templates/video-intro/template';
-
-// Create SDK template from file with custom config
-const template = defineTemplate(videoIntroTemplate, {
-  config: {
-    colors: {
-      primary: '#ff0000',        // Override gradient colors
-      'indigo-900': '#1a0033',
-    },
-  },
-});
-
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  const { version = '1.0.0', changes } = req.query;
-
-  // Parse changes from query param (comma-separated)
-  const changeList = typeof changes === 'string'
-    ? changes.split(',').map(c => c.trim())
-    : undefined;
-
-  // Render video using imported template
-  const mp4 = await renderVideo(template, {
-    version: String(version),
-    changes: changeList,
-  });
-
-  res.setHeader('Content-Type', 'video/mp4');
-  res.setHeader('Cache-Control', 's-maxage=3600, stale-while-revalidate');
-  res.send(mp4);
-}
-
-/**
- * Usage:
- *
- * GET /api/release-video?version=2.0.0&changes=New%20feature,Bug%20fix,Performance
- *
- * Returns: MP4 video with version 2.0.0 and custom changes list
- *
- * Benefits:
- * - Reuse CLI templates in API
- * - Override config for custom branding
- * - Type-safe with TypeScript
- * - No duplicate template code
- */

package/examples/sdk-video-preview.tsx

@@ -1,120 +0,0 @@
-/**
- * Example: Using the SDK Video Preview Component
- *
- * This demonstrates how to use previewVideo() and <VideoPreview>
- * to display video templates in React applications.
- */
-
-import { defineTemplate, previewVideo, VideoPreview, type PreviewFrames } from 'loopwind/sdk';
-import { useState, useEffect } from 'react';
-
-// Define a video template
-const introTemplate = defineTemplate({
-  name: 'intro-animation',
-  type: 'video',
-  size: { width: 1920, height: 1080 },
-  video: { fps: 30, duration: 3 },
-  render: ({ tw, progress, title = 'Hello World' }) => (
-    <div style={tw('flex items-center justify-center w-full h-full bg-gradient-to-r from-blue-500 to-purple-600')}>
-      <h1
-        style={{
-          ...tw('text-8xl font-bold text-white enter-fade-in/0/1000'),
-          opacity: progress
-        }}
-      >
-        {title}
-      </h1>
-    </div>
-  )
-});
-
-/**
- * Example 1: Pre-render at build time or on server
- * (Next.js getStaticProps, getServerSideProps, etc.)
- */
-export async function getStaticProps() {
-  // Pre-render all frames on the server
-  const frames = await previewVideo(introTemplate, {
-    title: 'Welcome!'
-  });
-
-  return {
-    props: {
-      frames // Pass serialized frames to client
-    }
-  };
-}
-
-/**
- * Example 2: Client component that displays pre-rendered frames
- */
-export function IntroPreview({ frames }: { frames: PreviewFrames }) {
-  return (
-    <div className="container">
-      <h2>Video Preview</h2>
-      <VideoPreview
-        frames={frames}
-        autoPlay={true}
-        loop={true}
-        controls={true}
-        onFrameChange={(frame) => console.log(`Current frame: ${frame}`)}
-      />
-    </div>
-  );
-}
-
-/**
- * Example 3: Loading frames on demand (client-side)
- * Note: This only works if you can run Node.js code (e.g., Electron, desktop apps)
- */
-export function DynamicPreview() {
-  const [frames, setFrames] = useState<PreviewFrames | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    // Load frames (only works in Node.js environment)
-    previewVideo(introTemplate, { title: 'Dynamic!' })
-      .then(setFrames)
-      .finally(() => setLoading(false));
-  }, []);
-
-  if (loading) return <div>Rendering preview...</div>;
-  if (!frames) return <div>Failed to load preview</div>;
-
-  return <VideoPreview frames={frames} autoPlay loop />;
-}
-
-/**
- * Example 4: Minimal preview without controls
- */
-export function MinimalPreview({ frames }: { frames: PreviewFrames }) {
-  return (
-    <VideoPreview
-      frames={frames}
-      controls={false}
-      autoPlay={true}
-      loop={true}
-      style={{ border: '2px solid #7c3aed', borderRadius: '8px' }}
-    />
-  );
-}
-
-/**
- * Example 5: Next.js API Route for on-demand preview generation
- */
-// pages/api/preview/[template].ts
-export async function handler(req, res) {
-  const { template } = req.query;
-  const props = req.body;
-
-  try {
-    // Generate preview frames on-demand
-    const frames = await previewVideo(introTemplate, props, {
-      format: 'data-url' // Use data URLs for easy JSON serialization
-    });
-
-    res.json(frames);
-  } catch (error) {
-    res.status(500).json({ error: error.message });
-  }
-}

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);