Merge pull request #17 from xtr-dev/dev

🚀 BREAKING: Simplify API to use Payload collections directly

README.md

@@ -2,16 +2,17 @@
 
 📧 **Template-based email system with scheduling and job processing for PayloadCMS**
 
-⚠️ **Pre-release Warning**: This package is currently in active development (v0.0.x). Breaking changes may occur before v1.0.0. Not recommended for production use.
+✨ **Simplified API**: Starting from v0.1.0, this plugin uses a simplified API that leverages PayloadCMS collections directly for better type safety and flexibility.
 
 ## Features
 
-✅ **Template System**: Create reusable email templates with Handlebars syntax  
+✅ **Template System**: Create reusable email templates with LiquidJS, Mustache, or simple variables
-✅ **Outbox Scheduling**: Schedule emails for future delivery  
+✅ **Type Safety**: Full TypeScript support using your generated Payload types
+✅ **Flexible Template Engines**: LiquidJS, Mustache, or bring your own template renderer
+✅ **Email Scheduling**: Schedule emails for future delivery using Payload collections
 ✅ **Job Integration**: Automatic processing via PayloadCMS jobs queue
 ✅ **Retry Failed Sends**: Automatic retry mechanism for failed emails
-✅ **Template Variables**: Dynamic content with validation  
+✅ **Payload Native**: Uses Payload collections directly - no custom APIs to learn
-✅ **Developer API**: Simple methods for sending emails programmatically
 
 ## Installation
 
@@ -49,53 +50,124 @@ export default buildConfig({
 })
 ```
 
-### 2. Send emails in your code
+### 2. Send emails using Payload collections
 
 ```typescript
-import { sendEmail, scheduleEmail } from '@xtr-dev/payload-mailing'
+import { renderTemplate } from '@xtr-dev/payload-mailing'
 
-// Send immediately using template slug
+// Option 1: Using templates with variables
-const emailId = await sendEmail(payload, {
+const { html, text, subject } = await renderTemplate(payload, 'welcome-email', {
-  templateSlug: 'welcome-email',
-  to: 'user@example.com',
-  variables: {
   firstName: 'John',
   welcomeUrl: 'https://yoursite.com/welcome'
+})
+
+// Create email using Payload's collection API (full type safety!)
+const email = await payload.create({
+  collection: 'emails',
+  data: {
+    to: ['user@example.com'],
+    subject,
+    html,
+    text,
+    // Schedule for later (optional)
+    scheduledAt: new Date(Date.now() + 24 * 60 * 60 * 1000),
+    // Add any custom fields you've defined
+    priority: 1,
+    customField: 'your-value', // Your custom collection fields work!
   }
 })
 
-// Schedule for later
+// Option 2: Direct HTML email (no template needed)
-const scheduledId = await scheduleEmail(payload, {
+const directEmail = await payload.create({
-  templateSlug: 'reminder-email',
+  collection: 'emails',
-  to: 'user@example.com',
+  data: {
-  scheduledAt: new Date(Date.now() + 24 * 60 * 60 * 1000), // 24 hours
+    to: ['user@example.com'],
-  variables: {
+    subject: 'Welcome!',
-    eventName: 'Product Launch',
+    html: '<h1>Welcome John!</h1><p>Thanks for joining!</p>',
-    eventDate: new Date('2024-01-15')
+    text: 'Welcome John! Thanks for joining!',
   }
 })
 ```
 
+## Why This Approach is Better
+
+- ✅ **Full Type Safety**: Use your generated Payload types
+- ✅ **No Learning Curve**: Just use `payload.create()` like any collection
+- ✅ **Maximum Flexibility**: Add any custom fields to your email collection
+- ✅ **Payload Integration**: Leverage validation, hooks, access control
+- ✅ **Consistent API**: One way to create data in Payload
+
 ## Configuration
 
 ### Plugin Options
 
 ```typescript
-interface MailingPluginConfig {
+mailingPlugin({
-  collections?: {
+  // Template engine (optional)
-    templates?: string    // default: 'email-templates'
+  templateEngine: 'liquidjs',  // 'liquidjs' | 'mustache' | 'simple'
-    emails?: string      // default: 'emails'
+
+  // Custom template renderer (optional)
+  templateRenderer: async (template: string, variables: Record<string, any>) => {
+    return yourCustomEngine.render(template, variables)
+  },
+
+  // Email transport
+  transport: {
+    host: 'smtp.gmail.com',
+    port: 587,
+    auth: { user: '...', pass: '...' }
+  },
+
+  // Collection names (optional)
+  collections: {
+    templates: 'email-templates',  // default
+    emails: 'emails'              // default
+  },
+
+  // Sending options
+  defaultFrom: 'noreply@yoursite.com',
+  defaultFromName: 'Your Site',
+  retryAttempts: 3,              // default
+  retryDelay: 300000,            // 5 minutes (default)
+
+  // Advanced options
+  emailWrapper: (email) => ({    // optional layout wrapper
+    ...email,
+    html: `<html><body>${email.html}</body></html>`
+  }),
+  richTextEditor: lexicalEditor(),  // optional custom editor
+  onReady: async (payload) => {     // optional initialization hook
+    console.log('Mailing plugin ready!')
   }
-  defaultFrom?: string
+})
-  transport?: Transporter | MailingTransportConfig
+```
-  queue?: string         // default: 'default'
+
-  retryAttempts?: number // default: 3
+### Template Engine Options
-  retryDelay?: number    // default: 300000 (5 minutes)
+
-  emailWrapper?: EmailWrapperHook // optional email layout wrapper
+Choose your preferred template engine:
-  richTextEditor?: RichTextField['editor'] // optional custom rich text editor
+
-  onReady?: (payload: any) => Promise<void> // optional callback after plugin initialization
+```typescript
-  initOrder?: 'before' | 'after' // default: 'before'
+// LiquidJS (default) - Modern syntax with logic
+mailingPlugin({
+  templateEngine: 'liquidjs'  // {% if user.isPremium %}Premium!{% endif %}
+})
+
+// Mustache - Logic-less templates
+mailingPlugin({
+  templateEngine: 'mustache'  // {{#user.isPremium}}Premium!{{/user.isPremium}}
+})
+
+// Simple variable replacement
+mailingPlugin({
+  templateEngine: 'simple'    // Just {{variable}} replacement
+})
+
+// Custom template renderer
+mailingPlugin({
+  templateRenderer: async (template, variables) => {
+    return handlebars.compile(template)(variables)  // Bring your own!
   }
+})
 ```
 
 ### Transport Configuration
@@ -473,71 +545,50 @@ mailingPlugin({
 })
 ```
 
-## Handlebars Helpers
+## Template Syntax Reference
 
-The plugin includes several built-in helpers:
+Depending on your chosen template engine, you can use different syntax:
 
-- `{{formatDate date 'short'}}` - Format dates (short, long, or default)
+### LiquidJS (Default)
-- `{{formatCurrency amount 'USD'}}` - Format currency
+- Variables: `{{ user.name }}`
-- `{{capitalize string}}` - Capitalize first letter
+- Logic: `{% if user.isPremium %}Premium content{% endif %}`
-- `{{#ifEquals value1 value2}}...{{/ifEquals}}` - Conditional equality
+- Loops: `{% for item in items %}{{ item.name }}{% endfor %}`
+- Filters: `{{ amount | formatCurrency }}`, `{{ date | formatDate: "short" }}`
 
-## API Methods
+### Mustache
+- Variables: `{{ user.name }}`
+- Logic: `{{#user.isPremium}}Premium content{{/user.isPremium}}`
+- Loops: `{{#items}}{{ name }}{{/items}}`
+- No built-in filters (use variables with pre-formatted data)
 
-### sendEmail(payload, options)
+### Simple
+- Variables only: `{{ user.name }}`, `{{ amount }}`, `{{ date }}`
 
-Send an email immediately:
+### Built-in Filters (LiquidJS only)
+- `formatDate` - Format dates: `{{ createdAt | formatDate: "short" }}`
+- `formatCurrency` - Format currency: `{{ amount | formatCurrency: "USD" }}`
+- `capitalize` - Capitalize first letter: `{{ name | capitalize }}`
+
+## Available Helper Functions
 
 ```typescript
-const emailId = await sendEmail(payload, {
+import {
-  templateSlug: 'order-confirmation', // optional - use template slug
+  renderTemplate,    // Render email templates with variables
-  to: ['customer@example.com'],       // string or array of emails
+  processEmails,     // Process pending emails manually
-  cc: ['manager@example.com'],        // optional - array of emails
+  retryFailedEmails, // Retry failed emails
-  bcc: ['archive@example.com'],       // optional - array of emails  
+  getMailing        // Get mailing service instance
-  from: 'orders@yoursite.com',        // optional, uses default
+} from '@xtr-dev/payload-mailing'
-  replyTo: 'support@yoursite.com',    // optional
+
-  subject: 'Custom subject',          // required if no template
+// Render a template
-  html: '<h1>Custom HTML</h1>',       // required if no template
+const { html, text, subject } = await renderTemplate(payload, 'welcome', {
-  text: 'Custom text version',        // optional
+  name: 'John',
-  variables: {                        // template variables
+  activationUrl: 'https://example.com/activate'
-    orderNumber: '12345',
-    customerName: 'John Doe'
-  },
-  priority: 1                         // optional, 1-10 (1 = highest)
 })
-```
 
-### scheduleEmail(payload, options)
+// Process emails manually
-
-Schedule an email for later delivery:
-
-```typescript
-const emailId = await scheduleEmail(payload, {
-  templateSlug: 'newsletter',
-  to: ['user1@example.com', 'user2@example.com'],
-  scheduledAt: new Date('2024-01-15T10:00:00Z'),
-  variables: {
-    month: 'January',
-    highlights: ['Feature A', 'Feature B']
-  }
-})
-```
-
-### processEmails(payload)
-
-Manually process pending emails:
-
-```typescript
-import { processEmails } from '@xtr-dev/payload-mailing'
 await processEmails(payload)
-```
 
-### retryFailedEmails(payload)
+// Retry failed emails
-
-Manually retry failed emails:
-
-```typescript
-import { retryFailedEmails } from '@xtr-dev/payload-mailing'
 await retryFailedEmails(payload)
 ```
 
@@ -716,35 +767,85 @@ import {
 } from '@xtr-dev/payload-mailing'
 ```
 
+## Migration Guide (v0.0.x → v0.1.0)
+
+**🚨 BREAKING CHANGES**: The API has been simplified to use Payload collections directly.
+
+### Before (v0.0.x)
+```typescript
+import { sendEmail, scheduleEmail } from '@xtr-dev/payload-mailing'
+
+// Old way
+const emailId = await sendEmail(payload, {
+  templateSlug: 'welcome',
+  to: 'user@example.com',
+  variables: { name: 'John' }
+})
+
+const scheduledId = await scheduleEmail(payload, {
+  templateSlug: 'reminder',
+  to: 'user@example.com',
+  scheduledAt: new Date('2024-01-15T10:00:00Z'),
+  variables: { eventName: 'Launch' }
+})
+```
+
+### After (v0.1.0+)
+```typescript
+import { renderTemplate } from '@xtr-dev/payload-mailing'
+
+// New way - render template first
+const { html, text, subject } = await renderTemplate(payload, 'welcome', {
+  name: 'John'
+})
+
+// Then create email using Payload collections (full type safety!)
+const email = await payload.create({
+  collection: 'emails',
+  data: {
+    to: ['user@example.com'],
+    subject,
+    html,
+    text,
+    // For scheduling
+    scheduledAt: new Date('2024-01-15T10:00:00Z'),
+    // Add any custom fields from your collection
+    customField: 'value',
+  }
+})
+```
+
+### Benefits of Migration
+- ✅ **Full TypeScript support** with your generated Payload types
+- ✅ **Use any custom fields** you add to your email collection
+- ✅ **Leverage Payload's features**: validation, hooks, access control
+- ✅ **One consistent API** - just use `payload.create()`
+- ✅ **No wrapper methods** - direct access to Payload's power
+
 ## Recent Changes
 
-### v0.0.x (Latest)
+### v0.1.0 (Latest - Breaking Changes)
 
-**🔄 Breaking Changes:**
+**🚀 Major API Simplification:**
-- Removed email layouts system in favor of `emailWrapper` hook for better flexibility
+- **REMOVED**: `sendEmail()` and `scheduleEmail()` wrapper methods
-- Email fields (`to`, `cc`, `bcc`) now use `hasMany: true` for proper array handling  
+- **REMOVED**: `SendEmailOptions` custom types
-- Templates now use slug-based lookup instead of ID-based for developer-friendly API
+- **ADDED**: Direct Payload collection usage with full type safety
-- Email collection renamed from "outbox" to "emails"
+- **ADDED**: `renderTemplate()` helper for template rendering
-- Unified job processing: single `process-email-queue` job handles both pending and failed emails
+- **ADDED**: Support for LiquidJS, Mustache, and custom template engines
+- **IMPROVED**: Webpack compatibility with proper dynamic imports
 
-**✨ New Features:**
+**Template Engine Enhancements:**
-- Rich text editor with automatic HTML/text conversion
+- **NEW**: LiquidJS support (default) with modern syntax and logic
-- Template slugs for easier template reference
+- **NEW**: Mustache support for logic-less templates
-- `emailWrapper` hook for consistent email layouts
+- **NEW**: Custom template renderer hook for maximum flexibility
-- Custom rich text editor configuration support
+- **NEW**: Simple variable replacement as fallback
-- Initialization hooks (`onReady`, `initOrder`) for better plugin lifecycle control
+- **FIXED**: All webpack compatibility issues resolved
-- Improved Handlebars variable interpolation with defensive programming
 
-**🐛 Bug Fixes:**
+**Developer Experience:**
-- Fixed text version uppercase conversion in headings
+- **IMPROVED**: Full TypeScript inference using generated Payload types
-- Fixed Handlebars interpolation issues in text version
+- **IMPROVED**: Comprehensive migration guide and documentation
-- Improved plugin initialization order to prevent timing issues
+- **IMPROVED**: Better error handling and async patterns
-
+- **SIMPLIFIED**: Cleaner codebase with fewer abstractions
-**💡 Improvements:**
-- Better admin UI with proper array input controls
-- More robust error handling and logging
-- Enhanced TypeScript definitions
-- Simplified template creation workflow
 
 ## License
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xtr-dev/payload-mailing",
-  "version": "0.0.12",
+  "version": "0.1.1",
   "description": "Template-based email system with scheduling and job processing for PayloadCMS",
   "type": "module",
   "main": "dist/index.js",

src/index.ts

@@ -16,8 +16,7 @@ export { default as Emails } from './collections/Emails.js'
 // Utility functions for developers
 export {
   getMailing,
-  sendEmail,
+  renderTemplate,
-  scheduleEmail,
   processEmails,
   retryFailedEmails,
 } from './utils/helpers.js'

src/services/MailingService.ts

@@ -3,7 +3,7 @@ import { Liquid } from 'liquidjs'
 import nodemailer, { Transporter } from 'nodemailer'
 import {
   MailingPluginConfig,
-  SendEmailOptions,
+  TemplateVariables,
   MailingService as IMailingService,
   EmailTemplate,
   QueuedEmail,
@@ -107,71 +107,23 @@ export class MailingService implements IMailingService {
     }
   }
 
-  async sendEmail(options: SendEmailOptions): Promise<string> {
+  async renderTemplate(templateSlug: string, variables: TemplateVariables): Promise<{ html: string; text: string; subject: string }> {
-    const emailId = await this.scheduleEmail({
+    const template = await this.getTemplateBySlug(templateSlug)
-      ...options,
-      scheduledAt: new Date()
-    })
 
-    await this.processEmailItem(emailId)
+    if (!template) {
-
+      throw new Error(`Email template not found: ${templateSlug}`)
-    return emailId
     }
 
-  async scheduleEmail(options: SendEmailOptions): Promise<string> {
+    const emailContent = await this.renderEmailTemplate(template, variables)
-    let html = options.html || ''
+    const subject = await this.renderTemplateString(template.subject, variables)
-    let text = options.text || ''
-    let subject = options.subject || ''
-    let templateId: string | undefined = undefined
 
-    if (options.templateSlug) {
+    return {
-      const template = await this.getTemplateBySlug(options.templateSlug)
+      html: emailContent.html,
-
+      text: emailContent.text,
-      if (template) {
+      subject
-        templateId = template.id
-        const variables = options.variables || {}
-        const renderedContent = await this.renderEmailTemplate(template, variables)
-        html = renderedContent.html
-        text = renderedContent.text
-        subject = await this.renderTemplate(template.subject, variables)
-      } else {
-        throw new Error(`Email template not found: ${options.templateSlug}`)
     }
   }
 
-    if (!subject && !options.subject) {
-      throw new Error('Email subject is required')
-    }
-
-    if (!html && !options.html) {
-      throw new Error('Email HTML content is required')
-    }
-
-    const queueData = {
-      template: templateId,
-      to: Array.isArray(options.to) ? options.to : [options.to],
-      cc: options.cc ? (Array.isArray(options.cc) ? options.cc : [options.cc]) : undefined,
-      bcc: options.bcc ? (Array.isArray(options.bcc) ? options.bcc : [options.bcc]) : undefined,
-      from: options.from || this.getDefaultFrom(),
-      replyTo: options.replyTo,
-      subject: subject || options.subject,
-      html,
-      text,
-      variables: options.variables,
-      scheduledAt: options.scheduledAt?.toISOString(),
-      status: 'pending' as const,
-      attempts: 0,
-      priority: options.priority || 5,
-    }
-
-    const result = await this.payload.create({
-      collection: this.emailsCollection as any,
-      data: queueData,
-    })
-
-    return result.id as string
-  }
-
   async processEmails(): Promise<void> {
     const currentTime = new Date().toISOString()
 
@@ -366,7 +318,7 @@ export class MailingService implements IMailingService {
     }
   }
 
-  private async renderTemplate(template: string, variables: Record<string, any>): Promise<string> {
+  private async renderTemplateString(template: string, variables: Record<string, any>): Promise<string> {
     // Use custom template renderer if provided
     if (this.config.templateRenderer) {
       try {
@@ -434,8 +386,8 @@ export class MailingService implements IMailingService {
     let text = serializeRichTextToText(template.content)
 
     // Apply template variables to the rendered content
-    html = await this.renderTemplate(html, variables)
+    html = await this.renderTemplateString(html, variables)
-    text = await this.renderTemplate(text, variables)
+    text = await this.renderTemplateString(text, variables)
 
     return { html, text }
   }

src/types/index.ts

@@ -1,5 +1,5 @@
 import { Payload } from 'payload'
-import type { CollectionConfig, RichTextField } from 'payload'
+import type { CollectionConfig, RichTextField, TypedCollection } from 'payload'
 import { Transporter } from 'nodemailer'
 
 export interface EmailObject {
@@ -83,26 +83,15 @@ export interface QueuedEmail {
   updatedAt: string
 }
 
-export interface SendEmailOptions {
+// Simple helper type for template variables
-  templateSlug?: string
+export interface TemplateVariables {
-  to: string | string[]
+  [key: string]: any
-  cc?: string | string[]
-  bcc?: string | string[]
-  from?: string
-  replyTo?: string
-  subject?: string
-  html?: string
-  text?: string
-  variables?: Record<string, any>
-  scheduledAt?: Date
-  priority?: number
 }
 
 export interface MailingService {
-  sendEmail(options: SendEmailOptions): Promise<string>
-  scheduleEmail(options: SendEmailOptions): Promise<string>
   processEmails(): Promise<void>
   retryFailedEmails(): Promise<void>
+  renderTemplate(templateSlug: string, variables: TemplateVariables): Promise<{ html: string; text: string; subject: string }>
 }
 
 export interface MailingContext {

src/utils/helpers.ts

@@ -1,5 +1,5 @@
 import { Payload } from 'payload'
-import { SendEmailOptions } from '../types/index.js'
+import { TemplateVariables } from '../types/index.js'
 
 export const getMailing = (payload: Payload) => {
   const mailing = (payload as any).mailing
@@ -9,14 +9,9 @@ export const getMailing = (payload: Payload) => {
   return mailing
 }
 
-export const sendEmail = async (payload: Payload, options: SendEmailOptions): Promise<string> => {
+export const renderTemplate = async (payload: Payload, templateSlug: string, variables: TemplateVariables): Promise<{ html: string; text: string; subject: string }> => {
   const mailing = getMailing(payload)
-  return mailing.service.sendEmail(options)
+  return mailing.service.renderTemplate(templateSlug, variables)
-}
-
-export const scheduleEmail = async (payload: Payload, options: SendEmailOptions): Promise<string> => {
-  const mailing = getMailing(payload)
-  return mailing.service.scheduleEmail(options)
 }
 
 export const processEmails = async (payload: Payload): Promise<void> => {

template-syntax-migration.md

@@ -1,160 +0,0 @@
-# Template Engine Options
-
-The plugin now supports flexible template rendering with multiple options:
-
-1. **String-based Configuration** (easy setup with built-in engines)
-2. **Custom Template Renderer Hook** (maximum flexibility)
-3. **Simple Variable Replacement** (fallback, no dependencies)
-
-## Configuration Options
-
-### String-based Template Engine Configuration
-Easy setup using built-in template engines:
-
-```typescript
-// Using LiquidJS (default, requires: npm install liquidjs)
-mailingPlugin({
-  templateEngine: 'liquidjs'
-})
-
-// Using Mustache (requires: npm install mustache)
-mailingPlugin({
-  templateEngine: 'mustache'
-})
-
-// Using simple variable replacement (no dependencies)
-mailingPlugin({
-  templateEngine: 'simple'
-})
-```
-
-### Custom Template Renderer Hook
-```typescript
-// Example with Handlebars
-import Handlebars from 'handlebars'
-
-mailingPlugin({
-  templateRenderer: async (template: string, variables: Record<string, any>) => {
-    const compiled = Handlebars.compile(template)
-    return compiled(variables)
-  }
-})
-
-// Example with Mustache
-import Mustache from 'mustache'
-
-mailingPlugin({
-  templateRenderer: async (template: string, variables: Record<string, any>) => {
-    return Mustache.render(template, variables)
-  }
-})
-
-// Example with Nunjucks
-import nunjucks from 'nunjucks'
-
-mailingPlugin({
-  templateRenderer: async (template: string, variables: Record<string, any>) => {
-    return nunjucks.renderString(template, variables)
-  }
-})
-```
-
-### Using LiquidJS (Optional)
-Install the optional dependency:
-```bash
-npm install liquidjs
-# or
-pnpm add liquidjs
-```
-
-### Fallback Mode
-If no custom renderer is provided and neither LiquidJS nor Mustache are installed, simple `{{variable}}` replacement is used.
-
-## Template Syntax Reference
-
-### Mustache Syntax (Logic-less)
-```mustache
-Hello {{user.name}},
-
-{{#user.isPremium}}
-  Welcome to premium! Your balance is {{balance}}.
-{{/user.isPremium}}
-
-{{#orders}}
-  Order: {{id}} - {{date}}
-{{/orders}}
-```
-
-### LiquidJS Syntax (With Logic)
-```liquid
-Hello {{user.name}},
-
-{% if user.isPremium %}
-  Welcome to premium! Your balance is {{balance | formatCurrency}}.
-{% endif %}
-
-{% for order in orders %}
-  Order: {{order.id}} - {{order.date | formatDate: "short"}}
-{% endfor %}
-```
-
-### Simple Variable Replacement
-```
-Hello {{user.name}},
-Your balance is {{balance}}.
-```
-
-## Migration from Handlebars
-
-### Variables
-- **Handlebars**: `{{variable}}`
-- **LiquidJS**: `{{variable}}` (same)
-
-### Conditionals
-- **Handlebars**: `{{#if condition}}content{{/if}}`
-- **LiquidJS**: `{% if condition %}content{% endif %}`
-
-### Loops
-- **Handlebars**: `{{#each items}}{{this}}{{/each}}`
-- **LiquidJS**: `{% for item in items %}{{item}}{% endfor %}`
-
-### Filters/Helpers
-- **Handlebars**: `{{formatDate date "short"}}`
-- **LiquidJS**: `{{date | formatDate: "short"}}`
-
-### Available Filters
-- `formatDate` - Format dates (short, long, or default)
-- `formatCurrency` - Format currency amounts
-- `capitalize` - Capitalize first letter
-
-### Comparison Operations (LiquidJS Advantage)
-- **Handlebars**: Required `{{#ifEquals}}` helper
-- **LiquidJS**: Built-in: `{% if user.role == "admin" %}`
-
-## Example Migration
-
-### Before (Handlebars)
-```handlebars
-Hello {{user.name}},
-
-{{#if user.isPremium}}
-  Welcome to premium! Your balance is {{formatCurrency balance}}.
-{{/if}}
-
-{{#each orders}}
-  Order: {{this.id}} - {{formatDate this.date "short"}}
-{{/each}}
-```
-
-### After (LiquidJS)
-```liquid
-Hello {{user.name}},
-
-{% if user.isPremium %}
-  Welcome to premium! Your balance is {{balance | formatCurrency}}.
-{% endif %}
-
-{% for order in orders %}
-  Order: {{order.id}} - {{order.date | formatDate: "short"}}
-{% endfor %}
-```