loopwind 0.19.0 → 0.20.1

package/test-templates/test-sdk.mjs

@@ -2,41 +2,64 @@ import { defineTemplate, renderImage, renderVideo } from '../dist/sdk/index.js';
 import fs from 'fs/promises';
 import React from 'react';
 
+// Helper to create inline template modules for testing
+function createTemplateModule(meta, render) {
+  return { meta, default: render };
+}
+
 // Test 1: Static image template
-const staticTemplate = defineTemplate({
-  name: 'sdk-static',
-  type: 'image',
-  size: { width: 1200, height: 630 },
-  render: ({ tw, title, subtitle }) => (
+const staticTemplateModule = createTemplateModule(
+  {
+    name: 'sdk-static',
+    type: 'image',
+    size: { width: 1200, height: 630 },
+    props: {
+      title: 'string',
+      subtitle: 'string',
+    },
+  },
+  ({ tw, title, subtitle }) => (
     React.createElement('div', { style: tw('flex flex-col w-full h-full bg-gradient-to-br from-green-600 to-teal-700 p-12 justify-center items-center') },
       React.createElement('h1', { style: tw('text-6xl font-bold text-white mb-4') }, title),
       React.createElement('p', { style: tw('text-2xl text-white/80') }, subtitle),
       React.createElement('p', { style: tw('text-white/60 mt-8') }, 'Rendered via SDK')
     )
   )
-});
+);
+const staticTemplate = defineTemplate(staticTemplateModule);
 
 // Test 2: Animated video template
-const animatedTemplate = defineTemplate({
-  name: 'sdk-animated',
-  type: 'video',
-  size: { width: 1920, height: 1080 },
-  video: { fps: 30, duration: 2 },
-  render: ({ tw, title }) => (
+const animatedTemplateModule = createTemplateModule(
+  {
+    name: 'sdk-animated',
+    type: 'video',
+    size: { width: 1920, height: 1080 },
+    video: { fps: 30, duration: 2 },
+    props: {
+      title: 'string',
+    },
+  },
+  ({ tw, title }) => (
     React.createElement('div', { style: tw('flex flex-col items-center justify-center w-full h-full bg-gray-900') },
-      React.createElement('div', { style: tw('w-20 h-20 rounded-full bg-gradient-to-br from-pink-500 to-orange-500 mb-8 ease-out animate-bounce-in/0/0.3') }),
-      React.createElement('h1', { style: tw('text-7xl font-bold text-white ease-out animate-fade-in-up/0.2/0.6') }, title),
-      React.createElement('p', { style: tw('text-2xl text-white/60 mt-4 ease-out animate-fade-in/0.5/0.9') }, 'SDK Video Test')
+      React.createElement('div', { style: tw('w-20 h-20 rounded-full bg-gradient-to-br from-pink-500 to-orange-500 mb-8 ease-out enter-bounce-in/0/300') }),
+      React.createElement('h1', { style: tw('text-7xl font-bold text-white ease-out enter-fade-in-up/200/600') }, title),
+      React.createElement('p', { style: tw('text-2xl text-white/60 mt-4 ease-out enter-fade-in/500/900') }, 'SDK Video Test')
     )
   )
-});
+);
+const animatedTemplate = defineTemplate(animatedTemplateModule);
 
 // Test 3: QR code template
-const qrTemplate = defineTemplate({
-  name: 'sdk-qr',
-  type: 'image',
-  size: { width: 800, height: 800 },
-  render: ({ tw, qr, url }) => (
+const qrTemplateModule = createTemplateModule(
+  {
+    name: 'sdk-qr',
+    type: 'image',
+    size: { width: 800, height: 800 },
+    props: {
+      url: 'string',
+    },
+  },
+  ({ tw, qr, url }) => (
     React.createElement('div', { style: tw('flex flex-col items-center justify-center w-full h-full bg-white p-8') },
       React.createElement('h2', { style: tw('text-3xl font-bold text-gray-900 mb-6') }, 'SDK QR Test'),
       React.createElement('img', {
@@ -46,7 +69,8 @@ const qrTemplate = defineTemplate({
       React.createElement('p', { style: tw('text-gray-600 mt-6') }, url)
     )
   )
-});
+);
+const qrTemplate = defineTemplate(qrTemplateModule);
 
 async function runTests() {
   console.log('Testing loopwind SDK...\n');

package/test-video-props.json

@@ -0,0 +1,3 @@
+{
+  "title": "Welcome!"
+}

package/website/DEPLOYMENT.md

@@ -140,3 +140,4 @@ npm run dev
 - [OG Images Setup](./OG_IMAGES.md)
 - [Cloudflare Astro Guide](https://developers.cloudflare.com/workers/framework-guides/web-apps/astro/)
 
+

package/website/OG_IMAGES.md

@@ -139,3 +139,4 @@ const ogTemplate = defineTemplate({
 - [Styling](/styling) - Tailwind CSS styling guide
 - [Config](/config) - loopwind.json configuration
 
+

package/website/astro.config.mjs

@@ -16,8 +16,24 @@ export default defineConfig({
   vite: {
     plugins: [tailwindcss()],
     ssr: {
-      external: ['node:fs/promises', 'node:fs', 'node:path', 'fs', 'fs/promises', 'path'],
-      noExternal: ['loopwind'],
+      external: [
+        'node:fs/promises',
+        'node:fs',
+        'node:path',
+        'fs',
+        'fs/promises',
+        'path',
+        'loopwind',
+        '@resvg/resvg-js',
+        '@resvg/resvg-js-darwin-arm64',
+        '@resvg/resvg-js-darwin-x64',
+        '@resvg/resvg-js-linux-arm64-gnu',
+        '@resvg/resvg-js-linux-x64-gnu',
+        '@resvg/resvg-js-win32-x64-msvc',
+      ],
+    },
+    optimizeDeps: {
+      exclude: ['loopwind', '@resvg/resvg-js'],
     },
   },
   markdown: {