Introducción

La mayoría de los tutoriales de email se detienen en el envío de un único correo con HTML en línea. Pero las aplicaciones en producción necesitan algo más sofisticado: un sistema de plantillas que mantenga la consistencia entre docenas de tipos de email y que a la vez sea mantenible y con seguridad de tipos.

Esta guía explica cómo construir un sistema profesional de plantillas de email en SvelteKit usando Nodemailer. Aprenderás a crear layouts base que establezcan consistencia de marca, plantillas especializadas para distintos tipos de email, y a orquestar flujos de trabajo multi-email que envíen secuencias coordinadas de mensajes.

Qué Vas a Construir

Al finalizar este artículo, tendrás:

Plantilla de layout base que proporciona estilos y estructura consistentes
Plantillas especializadas para emails de bienvenida, notificaciones y formularios de contacto
Flujos de trabajo multi-email que envían secuencias coordinadas
Interfaces con seguridad de tipos que garantizan la correctitud de los datos de las plantillas
Funciones de envío reutilizables que abstraen el transporte de email
Patrones de producción para la composición y reutilización de plantillas

Requisitos Previos

Este es un artículo avanzado. Ya deberías comprender:

Enrutamiento en SvelteKit y código del lado del servidor
Envío básico de emails con Nodemailer
Fundamentos de TypeScript
Patrones de validación de formularios

Si necesitas conocimientos fundamentales, comienza con una guía básica de Nodemailer antes de abordar sistemas de plantillas avanzados.

El Espacio del Problema

Enviar emails en producción se vuelve rápidamente desordenado sin un sistema de plantillas. Esto es lo que ocurre:

Problema 1: Duplicación de HTML

Cada email contiene encabezados, pies de página y estilos duplicados:

// ❌ Duplicated across every email type
async function sendWelcomeEmail(email: string) {
	await transporter.sendMail({
		to: email,
		subject: 'Welcome!',
		html: `
      <!DOCTYPE html>
      <html>
        <head>
          <style>
            /* 200 lines of CSS repeated in every email */
            body { font-family: sans-serif; }
            .header { background: #007bff; }
            .footer { color: #666; }
          </style>
        </head>
        <body>
          <div class="header"><!-- Header repeated everywhere --></div>
          <div class="content">Welcome content here</div>
          <div class="footer"><!-- Footer repeated everywhere --></div>
        </body>
      </html>
    `
	})
}

// Same structure copy-pasted 15 times for different email types

El costo: ¿Cambias el pie de página? Actualiza 15 archivos. ¿Ajustas los colores de marca? Busca y reemplaza en toda tu base de código. ¿Agregas un enlace legal? Espera no olvidarte de ningún archivo.

Problema 2: Sin Seguridad de Tipos

Los datos del email son de tipo cadena de texto, lo que convierte los errores tipográficos en errores en tiempo de ejecución:

// ❌ Typos caught only when emails fail
await sendEmail({
	to: user.email,
	subject: 'Welcome',
	html: `<p>Hello ${user.nmae}</p>` // Typo: nmae instead of name
})

Problema 3: Estilos Inconsistentes

Sin un sistema, cada desarrollador inventa sus propios patrones:

// Developer A uses inline styles
html: `<p style="color: #333; font-size: 16px;">Text</p>`

// Developer B uses classes
html: `<p class="body-text">Text</p>`

// Developer C copies from old emails
html: `<font color="#333">Text</font>` // Deprecated HTML

El resultado: Los emails se ven diferentes, algunos se rompen en Outlook, el mantenimiento se convierte en un trabajo arqueológico.

Problema 4: Caos con Múltiples Emails

Los flujos de trabajo reales envían múltiples emails coordinados:

// ❌ Fragile, hard to test, unclear dependencies
async function handleDemoRequest(data) {
	// Email 1: Sales notification
	await transporter.sendMail({
		/* ... */
	})

	// Email 2: Welcome to lead
	await transporter.sendMail({
		/* ... */
	})

	// Email 3: Confirmation
	await transporter.sendMail({
		/* ... */
	})
}

Preguntas que este código no responde:

¿Qué ocurre si el email #2 falla pero el #1 tuvo éxito?
¿Cómo pruebas cada email de forma independiente?
¿Cómo sabes qué plantilla usa cada email?
¿Cómo compartes estilos entre ellos?

El Modelo Mental de SvelteKit

SvelteKit nos enseña a pensar en términos de composición y reutilización. Aplicamos esos mismos principios a las plantillas de email:

Modelo Mental 1: Las Plantillas como Funciones

En SvelteKit, los componentes son funciones que reciben props y devuelven markup. Las plantillas de email funcionan de la misma manera:

// A template is a pure function
function welcomeTemplate(data: WelcomeData): string {
	return `<html>...</html>`
}

// Compose templates like components
function emailWithLayout(content: string, title: string): string {
	return baseLayout(content, { title })
}

Idea clave: Trata las plantillas como componentes de Svelte: funciones puras que aceptan props tipadas y devuelven HTML.

Modelo Mental 2: Herencia Mediante Composición

Al igual que el patrón <slot> de Svelte, las plantillas de email se componen mediante inyección de contenido:

// Base layout accepts content (like a slot)
function baseLayout(content: string, options: LayoutOptions): string {
	return `
    <html>
      <body>
        <div class="header">...</div>
        ${content}  <!-- Content "slot" -->
        <div class="footer">...</div>
      </body>
    </html>
  `
}

// Specific templates inject their content
function welcomeTemplate(data: WelcomeData): string {
	const content = `<p>Welcome ${data.name}!</p>`
	return baseLayout(content, { title: 'Welcome!' })
}

Modelo Mental 3: Límites de Módulos Solo del Servidor

Las plantillas de email son lógica exclusiva del servidor, al igual que los archivos +page.server.ts:

src/lib/mailer/
├── emailSetup.server.ts     # Transport configuration
├── sendEmail.server.ts       # Send function
└── templates/                # Template library
    ├── layout.ts             # Base layout
    ├── welcome.ts            # Welcome emails
    ├── notification.ts       # Notifications
    └── contact.ts            # Contact forms

¿Por qué .ts y no .server.ts?

Los archivos de plantillas no necesitan la extensión .server.ts porque son importados exclusivamente por módulos solo del servidor (como los archivos +page.server.ts). El límite del servidor ya está establecido por el archivo importador.

Arquitectura del Sistema de Plantillas

Construyamos un sistema de plantillas de email listo para producción desde cero.

Estructura de Directorios

Organiza las plantillas como una biblioteca dentro de tu módulo mailer:

src/lib/mailer/
├── emailSetup.server.ts      # SMTP transporter configuration
├── sendEmail.server.ts        # Reusable send function
└── templates/
    ├── layout.ts              # Base layout (shared structure)
    ├── contact.ts             # Contact form emails
    ├── welcome.ts             # User onboarding emails
    └── notification.ts        # System alerts/updates

Principios de diseño:

Responsabilidad Única: Cada plantilla maneja un tipo de email
Composición: Las plantillas inyectan contenido en layouts compartidos
Seguridad de Tipos: Las interfaces de TypeScript definen los datos esperados
Reutilización: Las plantillas son funciones puras sin efectos secundarios

Construyendo el Layout Base

El layout base proporciona estructura y estilos consistentes para todos los emails. Piensa en él como el "app shell" de tus emails.

Por Qué Necesitas un Layout Base

Sin un layout base:

El HTML del encabezado duplicado en 15 archivos
Los enlaces del pie de página actualizados manualmente en todas partes
Los cambios de color de marca requieren un masivo buscar y reemplazar
Los resets de CSS para clientes de email copiados y pegados de forma inconsistente

Con un layout base:

Cambia el pie de página una vez, actualiza todos los emails
Agrega el enlace de cancelar suscripción en un solo lugar
Ajusta los colores de marca de forma global
Garantiza compatibilidad consistente con los clientes de email

Crear la Plantilla de Layout

// src/lib/mailer/templates/layout.ts

interface EmailLayoutOptions {
	title?: string
	preheader?: string
}

/**
 * Base email layout providing consistent structure and styling
 *
 * All email templates should inject their content into this layout
 * to ensure brand consistency and email client compatibility
 */
export function emailLayout(
	content: string,
	{ title = 'Email', preheader }: EmailLayoutOptions = {}
): string {
	return `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="x-apple-disable-message-reformatting">
      <title>${escapeHtml(title)}</title>
      
      ${
				preheader
					? `
        <!--[if !mso]><!-->
        <div style="display: none; max-height: 0px; overflow: hidden;">
          ${escapeHtml(preheader)}
        </div>
        <!--<![endif]-->
      `
					: ''
			}
      
      <style>
        /* Reset styles for email clients */
        body, table, td, a { 
          -webkit-text-size-adjust: 100%; 
          -ms-text-size-adjust: 100%; 
        }
        table, td { 
          mso-table-lspace: 0pt; 
          mso-table-rspace: 0pt; 
        }
        img { 
          -ms-interpolation-mode: bicubic;
          border: 0;
          height: auto;
          line-height: 100%;
          outline: none;
          text-decoration: none;
        }
        
        /* Base styles */
        body {
          margin: 0;
          padding: 0;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
                       'Helvetica Neue', Arial, sans-serif;
          line-height: 1.6;
          color: #333333;
          background-color: #f4f4f4;
        }
        
        /* Container */
        .email-wrapper {
          width: 100%;
          background-color: #f4f4f4;
          padding: 20px 0;
        }
        
        .email-container {
          max-width: 600px;
          margin: 0 auto;
          background-color: #ffffff;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        /* Header */
        .email-header {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
          padding: 30px 20px;
          text-align: center;
        }
        
        .email-header h1 {
          margin: 0;
          font-size: 24px;
          font-weight: 600;
        }
        
        /* Body */
        .email-body {
          padding: 30px 20px;
        }
        
        /* Footer */
        .email-footer {
          background-color: #f8f9fa;
          padding: 20px;
          text-align: center;
          font-size: 12px;
          color: #6c757d;
          border-top: 1px solid #e9ecef;
        }
        
        .email-footer p {
          margin: 0 0 10px 0;
        }
        
        .email-footer a {
          color: #667eea;
          text-decoration: none;
        }
        
        /* Responsive */
        @media only screen and (max-width: 600px) {
          .email-container {
            width: 100% !important;
            border-radius: 0 !important;
          }
          .email-body {
            padding: 20px 15px !important;
          }
        }
      </style>
    </head>
    <body>
      <div class="email-wrapper">
        <div class="email-container">
          <div class="email-header">
            <h1>${escapeHtml(title)}</h1>
          </div>
          <div class="email-body">
            ${content}
          </div>
          <div class="email-footer">
            <p>© ${new Date().getFullYear()} Your Company. All rights reserved.</p>
            <p>
              <a href="https://yourcompany.com/unsubscribe">Unsubscribe</a> | 
              <a href="https://yourcompany.com/privacy">Privacy Policy</a> |
              <a href="https://yourcompany.com/contact">Contact Us</a>
            </p>
            <p>123 Business St, City, State 12345</p>
          </div>
        </div>
      </div>
    </body>
    </html>
  `
}

/**
 * Escapes HTML to prevent XSS attacks
 * Essential when including user input in email templates
 */
function escapeHtml(unsafe: string): string {
	return String(unsafe)
		.replace(/&/g, '&amp;')
		.replace(/</g, '&lt;')
		.replace(/>/g, '&gt;')
		.replace(/"/g, '"')
		.replace(/'/g, '&#039;')
}

Características clave de este layout:

Resets para Clientes de Email: Normaliza el renderizado en Gmail, Outlook y Apple Mail
Diseño Responsivo: Se adapta a pantallas móviles con media queries
Soporte de Preencabezado: Muestra texto de vista previa en los clientes de email
Encabezado con Degradado: Elemento visual moderno y con marca
Enlaces en el Pie de Página: Cancelar suscripción, privacidad, contacto (obligatorios para cumplimiento normativo)
Protección XSS: La función escapeHtml previene ataques de inyección

El preencabezado es el texto de vista previa que se muestra en los clientes de email antes de abrir el mensaje. Aparece después de la línea de asunto en la mayoría de las aplicaciones de email. Úsalo para ampliar tu línea de asunto y mejorar las tasas de apertura.

Ejemplo: Asunto: "Bienvenido a Nuestra Plataforma" | Preencabezado: "Comienza con nuestra guía de configuración rápida"

Creación de Plantillas Especializadas

Ahora que tenemos un layout base, vamos a crear plantillas especializadas para diferentes tipos de correo electrónico. Cada plantilla se enfoca en un caso de uso específico aprovechando el layout compartido.

Plantilla 1: Correo de Formulario de Contacto

La plantilla de contacto muestra la información enviada por el usuario a tu equipo:

// src/lib/mailer/templates/contact.ts

import { emailLayout } from './layout'

export interface ContactEmailData {
	name: string
	email: string
	service: string[]
	budget: string
	message: string
}

/**
 * Contact form email template
 * Displays user-submitted information in a structured, readable format
 */
export function contactTemplate(data: ContactEmailData): string {
	const content = `
    <div style="margin-bottom: 20px;">
      <p style="font-size: 16px; color: #555;">
        You have received a new contact form submission from your website.
      </p>
    </div>
    
    <table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
      <tr>
        <td style="padding: 12px; background: #f8f9fa; font-weight: 600; 
                   border: 1px solid #dee2e6; width: 30%;">
          Name
        </td>
        <td style="padding: 12px; border: 1px solid #dee2e6;">
          ${escapeHtml(data.name)}
        </td>
      </tr>
      <tr>
        <td style="padding: 12px; background: #f8f9fa; font-weight: 600; 
                   border: 1px solid #dee2e6;">
          Email
        </td>
        <td style="padding: 12px; border: 1px solid #dee2e6;">
          <a href="mailto:${escapeHtml(data.email)}" 
             style="color: #667eea; text-decoration: none;">
            ${escapeHtml(data.email)}
          </a>
        </td>
      </tr>
      <tr>
        <td style="padding: 12px; background: #f8f9fa; font-weight: 600; 
                   border: 1px solid #dee2e6;">
          Budget Range
        </td>
        <td style="padding: 12px; border: 1px solid #dee2e6;">
          ${escapeHtml(data.budget)}
        </td>
      </tr>
      <tr>
        <td style="padding: 12px; background: #f8f9fa; font-weight: 600; 
                   border: 1px solid #dee2e6;">
          Services Interested In
        </td>
        <td style="padding: 12px; border: 1px solid #dee2e6;">
          <ul style="margin: 0; padding-left: 20px;">
            ${data.service.map((s) => `<li>${escapeHtml(s)}</li>`).join('')}
          </ul>
        </td>
      </tr>
    </table>
    
    <div style="margin-top: 30px; padding: 20px; background: #f8f9fa; 
               border-left: 4px solid #667eea; border-radius: 4px;">
      <h3 style="margin: 0 0 10px 0; font-size: 18px; color: #333;">
        Message
      </h3>
      <p style="margin: 0; white-space: pre-wrap; color: #555;">
        ${escapeHtml(data.message)}
      </p>
    </div>
    
    <div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #e9ecef;">
      <a href="mailto:${escapeHtml(data.email)}" 
         style="display: inline-block; padding: 12px 24px; background: #667eea; 
                color: white; text-decoration: none; border-radius: 6px; 
                font-weight: 600;">
        Reply to ${escapeHtml(data.name)}
      </a>
    </div>
  `

	return emailLayout(content, {
		title: 'New Contact Form Submission',
		preheader: `New inquiry from ${data.name} regarding ${data.service[0]}`
	})
}

function escapeHtml(unsafe: string): string {
	return String(unsafe)
		.replace(/&/g, '&amp;')
		.replace(/</g, '&lt;')
		.replace(/>/g, '&gt;')
		.replace(/"/g, '"')
		.replace(/'/g, '&#039;')
}

Características de la plantilla:

Tabla de datos estructurada: Diseño de información fácil de escanear
Enlaces listos para correo: Enlaces mailto clicables para respuestas rápidas
Resaltado del mensaje: Tratamiento visual distintivo para el mensaje del usuario
Botón de acción: CTA de respuesta prominente
Seguridad de tipos: La interfaz garantiza que todos los campos requeridos estén presentes

Plantilla 2: Correo de Bienvenida

La plantilla de bienvenida incorpora nuevos usuarios con un mensaje cálido y atractivo:

// src/lib/mailer/templates/welcome.ts

import { emailLayout } from './layout'

export interface WelcomeEmailData {
	name: string
	email: string
	accountType?: 'free' | 'pro' | 'enterprise'
	verificationUrl?: string
}

/**
 * Welcome email template for new user onboarding
 *
 * Creates engaging first impression with:
 * - Personalized greeting
 * - Account-specific benefits
 * - Optional email verification
 * - Clear next steps
 */
export function welcomeTemplate(data: WelcomeEmailData): string {
	const accountBenefits = getAccountBenefits(data.accountType || 'free')

	const content = `
    <div style="margin-bottom: 30px;">
      <p style="font-size: 18px; margin: 0 0 20px 0; color: #333;">
        Welcome aboard, ${escapeHtml(data.name)}! 🎉
      </p>
      <p style="margin: 0 0 15px 0; color: #555; font-size: 15px;">
        We're thrilled to have you join our community. Your account has been 
        successfully created, and you're now ready to explore everything we have to offer.
      </p>
    </div>

    ${
			data.verificationUrl
				? `
      <div style="background: #fff3cd; border-left: 4px solid #ffc107; 
                 padding: 20px; margin: 30px 0; border-radius: 4px;">
        <p style="margin: 0 0 15px 0; font-weight: 600; color: #856404; font-size: 16px;">
          📧 Please verify your email address
        </p>
        <p style="margin: 0 0 15px 0; color: #856404; font-size: 14px;">
          To ensure the security of your account and enable all features, please verify 
          your email address by clicking the button below.
        </p>
        <div style="text-align: center; margin: 20px 0;">
          <a href="${data.verificationUrl}" 
             style="display: inline-block; padding: 14px 32px; background: #667eea; 
                    color: white; text-decoration: none; border-radius: 6px; 
                    font-weight: 600; font-size: 16px;">
            Verify Email Address
          </a>
        </div>
        <p style="margin: 15px 0 0 0; font-size: 13px; color: #856404;">
          This link expires in 24 hours. If you didn't create this account, 
          you can safely ignore this email.
        </p>
      </div>
    `
				: ''
		}

    <div style="margin: 30px 0;">
      <h2 style="font-size: 20px; margin: 0 0 20px 0; color: #333;">
        🚀 Get Started with Your ${accountBenefits.title}
      </h2>
      <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; 
                 border: 1px solid #e9ecef;">
        ${accountBenefits.features
					.map(
						(feature) => `
          <div style="display: flex; margin-bottom: 15px; align-items: start;">
            <span style="color: #28a745; font-size: 20px; margin-right: 12px; 
                       line-height: 1;">✓</span>
            <div>
              <p style="margin: 0 0 5px 0; font-weight: 600; color: #333; font-size: 15px;">
                ${feature.title}
              </p>
              <p style="margin: 0; color: #666; font-size: 14px;">
                ${feature.description}
              </p>
            </div>
          </div>
        `
					)
					.join('')}
      </div>
    </div>

    <div style="margin: 30px 0; text-align: center; padding: 30px 20px; 
               background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%); 
               border-radius: 8px;">
      <h3 style="margin: 0 0 15px 0; color: #333; font-size: 18px;">
        Need help getting started?
      </h3>
      <p style="margin: 0 0 20px 0; color: #666; font-size: 14px;">
        Check out our comprehensive guides, video tutorials, and active community forum.
      </p>
      <div style="display: inline-flex; gap: 15px; flex-wrap: wrap; 
                 justify-content: center;">
        <a href="https://yourcompany.com/docs" 
           style="display: inline-block; padding: 10px 20px; background: white; 
                  color: #667eea; text-decoration: none; border-radius: 6px; 
                  font-weight: 600; border: 2px solid #667eea; font-size: 14px;">
          📚 Documentation
        </a>
        <a href="https://yourcompany.com/tutorials" 
           style="display: inline-block; padding: 10px 20px; background: white; 
                  color: #667eea; text-decoration: none; border-radius: 6px; 
                  font-weight: 600; border: 2px solid #667eea; font-size: 14px;">
          🎥 Video Tutorials
        </a>
        <a href="https://yourcompany.com/community" 
           style="display: inline-block; padding: 10px 20px; background: white; 
                  color: #667eea; text-decoration: none; border-radius: 6px; 
                  font-weight: 600; border: 2px solid #667eea; font-size: 14px;">
          💬 Community
        </a>
      </div>
    </div>

    <div style="margin: 30px 0; padding: 20px; background: white; 
               border: 1px solid #e9ecef; border-radius: 8px;">
      <p style="margin: 0 0 10px 0; color: #666; font-size: 14px;">
        <strong>Your account details:</strong>
      </p>
      <p style="margin: 0; color: #666; font-size: 14px; line-height: 1.8;">
        Email: ${escapeHtml(data.email)}<br>
        Plan: ${accountBenefits.title}<br>
        Joined: ${new Date().toLocaleDateString('en-US', {
					month: 'long',
					day: 'numeric',
					year: 'numeric'
				})}
      </p>
    </div>

    <div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #e9ecef;">
      <p style="margin: 0; color: #666; font-size: 14px; line-height: 1.6;">
        If you have any questions or need assistance, our support team is here to help. 
        Simply reply to this email or visit our 
        <a href="https://yourcompany.com/support" style="color: #667eea; text-decoration: none;">
          support center
        </a>.
      </p>
    </div>
  `

	return emailLayout(content, {
		title: 'Welcome to Your Company!',
		preheader: `Get started with your ${accountBenefits.title.toLowerCase()} and explore our platform`
	})
}

/**
 * Returns account-specific benefits and features
 * Customizes welcome message based on subscription tier
 */
function getAccountBenefits(accountType: 'free' | 'pro' | 'enterprise') {
	const benefits = {
		free: {
			title: 'Free Account',
			features: [
				{
					title: 'Explore Core Features',
					description:
						'Get familiar with our intuitive dashboard and essential tools to start building right away.'
				},
				{
					title: 'Join the Community',
					description:
						'Connect with thousands of users in our forums, share ideas, and learn from others.'
				},
				{
					title: 'Access Learning Resources',
					description: 'Watch tutorial videos, read documentation, and follow step-by-step guides.'
				}
			]
		},
		pro: {
			title: 'Pro Account',
			features: [
				{
					title: 'Unlock Advanced Tools',
					description:
						'Access premium features including automation, advanced analytics, and priority support.'
				},
				{
					title: 'Increased Limits',
					description: 'Enjoy 10x higher usage limits, more storage, and faster processing speeds.'
				},
				{
					title: 'Priority Support',
					description: 'Get help from our expert support team within hours, not days.'
				},
				{
					title: 'Exclusive Content',
					description: 'Access pro-only webinars, advanced tutorials, and industry insights.'
				}
			]
		},
		enterprise: {
			title: 'Enterprise Account',
			features: [
				{
					title: 'Dedicated Success Manager',
					description:
						'Your personal account manager will help you maximize value and ensure smooth onboarding.'
				},
				{
					title: 'Custom Integration',
					description:
						'Our team will help integrate our platform with your existing systems and workflows.'
				},
				{
					title: 'Advanced Security',
					description:
						'Enterprise-grade security with SSO, audit logs, and compliance certifications.'
				},
				{
					title: '24/7 Premium Support',
					description:
						'Round-the-clock support with guaranteed response times and direct access to engineers.'
				}
			]
		}
	}

	return benefits[accountType]
}

function escapeHtml(unsafe: string): string {
	return String(unsafe)
		.replace(/&/g, '&amp;')
		.replace(/</g, '&lt;')
		.replace(/>/g, '&gt;')
		.replace(/"/g, '"')
		.replace(/'/g, '&#039;')
}

Características de la plantilla:

Personalización: Usa el nombre del destinatario para generar conexión
Verificación condicional: Muestra la verificación de correo solo cuando es necesario
Beneficios específicos de la cuenta: Adapta el contenido al nivel de suscripción
Múltiples CTAs: Documentación, tutoriales, enlaces a la comunidad
Resumen de cuenta: Confirma los detalles del registro

Los correos de bienvenida tienen tasas de apertura del 50-86%—las más altas de cualquier tipo de correo. Envíalos dentro del primer minuto después del registro, mientras la participación del usuario está en su punto máximo. Cada minuto de demora reduce significativamente las tasas de apertura.

Plantilla 3: Correo de Notificación

La plantilla de notificación maneja alertas del sistema, actualizaciones y mensajes transaccionales:

// src/lib/mailer/templates/notification.ts

import { emailLayout } from './layout'

export type NotificationLevel = 'info' | 'success' | 'warning' | 'error'

export interface NotificationEmailData {
	title: string
	message: string
	level?: NotificationLevel
	actionUrl?: string
	actionLabel?: string
	details?: Array<{ label: string; value: string }>
	timestamp?: Date
	userName?: string
}

/**
 * Notification email template for system alerts and updates
 *
 * Handles various notification types:
 * - Account security alerts (password changes, login attempts)
 * - System announcements (maintenance, feature launches)
 * - Activity updates (mentions, comments, assignments)
 * - Transaction confirmations (payments, invoices)
 *
 * Visual styling adapts based on severity level
 */
export function notificationTemplate(data: NotificationEmailData): string {
	const level = data.level || 'info'
	const colors = getNotificationColors(level)
	const icon = getNotificationIcon(level)

	const formattedTime = data.timestamp
		? data.timestamp.toLocaleString('en-US', {
				month: 'long',
				day: 'numeric',
				year: 'numeric',
				hour: '2-digit',
				minute: '2-digit'
			})
		: new Date().toLocaleString('en-US', {
				month: 'long',
				day: 'numeric',
				year: 'numeric',
				hour: '2-digit',
				minute: '2-digit'
			})

	const content = `
    ${
			data.userName
				? `
      <div style="margin-bottom: 20px;">
        <p style="margin: 0; color: #666; font-size: 15px;">
          Hi ${escapeHtml(data.userName)},
        </p>
      </div>
    `
				: ''
		}

    <div style="background: ${colors.background}; border-left: 4px solid ${colors.border}; 
               padding: 25px; margin: 20px 0; border-radius: 6px;">
      <div style="display: flex; align-items: start; gap: 15px;">
        <div style="font-size: 32px; line-height: 1; margin-top: -2px;">
          ${icon}
        </div>
        <div style="flex: 1;">
          <h2 style="margin: 0 0 12px 0; font-size: 20px; color: ${colors.text};">
            ${escapeHtml(data.title)}
          </h2>
          <p style="margin: 0; color: ${colors.text}; font-size: 15px; line-height: 1.6;">
            ${escapeHtml(data.message)}
          </p>
        </div>
      </div>
    </div>

    ${
			data.details && data.details.length > 0
				? `
      <div style="margin: 30px 0;">
        <h3 style="margin: 0 0 15px 0; font-size: 16px; color: #333; font-weight: 600;">
          Details
        </h3>
        <table style="width: 100%; border-collapse: collapse; background: #f8f9fa; 
                     border-radius: 6px; overflow: hidden;">
          ${data.details
						.map(
							(detail) => `
            <tr>
              <td style="padding: 14px 20px; border-bottom: 1px solid #e9ecef; 
                        font-weight: 600; color: #555; width: 35%;">
                ${escapeHtml(detail.label)}
              </td>
              <td style="padding: 14px 20px; border-bottom: 1px solid #e9ecef; color: #333;">
                ${escapeHtml(detail.value)}
              </td>
            </tr>
          `
						)
						.join('')}
        </table>
      </div>
    `
				: ''
		}

    ${
			data.actionUrl && data.actionLabel
				? `
      <div style="margin: 35px 0; text-align: center;">
        <a href="${data.actionUrl}" 
           style="display: inline-block; padding: 14px 32px; background: ${colors.button}; 
                  color: white; text-decoration: none; border-radius: 6px; 
                  font-weight: 600; font-size: 16px;">
          ${escapeHtml(data.actionLabel)}
        </a>
      </div>
    `
				: ''
		}

    <div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #e9ecef;">
      <p style="margin: 0 0 8px 0; color: #999; font-size: 13px;">
        <strong>Time:</strong> ${formattedTime}
      </p>
      <p style="margin: 0; color: #666; font-size: 14px; line-height: 1.6;">
        ${
					level === 'error' || level === 'warning'
						? `If you didn't expect this notification or believe it was sent in error, 
             please contact our support team immediately.`
						: `You're receiving this because of activity on your account. 
             You can manage your notification preferences in your account settings.`
				}
      </p>
    </div>

    ${
			level === 'error' || level === 'warning'
				? `
      <div style="margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 6px;">
        <p style="margin: 0; color: #666; font-size: 13px;">
          <strong>Security Tip:</strong> Never share your password or verification codes 
          with anyone, including our support team. We will never ask for this information via email.
        </p>
      </div>
    `
				: ''
		}
  `

	return emailLayout(content, {
		title: data.title,
		preheader: data.message.slice(0, 100)
	})
}

/**
 * Returns color scheme based on notification severity
 */
function getNotificationColors(level: NotificationLevel) {
	const colorSchemes = {
		info: {
			background: '#e7f3ff',
			border: '#2196f3',
			text: '#0d47a1',
			button: '#2196f3'
		},
		success: {
			background: '#e8f5e9',
			border: '#4caf50',
			text: '#1b5e20',
			button: '#4caf50'
		},
		warning: {
			background: '#fff3e0',
			border: '#ff9800',
			text: '#e65100',
			button: '#ff9800'
		},
		error: {
			background: '#ffebee',
			border: '#f44336',
			text: '#b71c1c',
			button: '#f44336'
		}
	}

	return colorSchemes[level]
}

/**
 * Returns emoji icon for notification level
 */
function getNotificationIcon(level: NotificationLevel): string {
	const icons = {
		info: 'ℹ️',
		success: '✅',
		warning: '⚠️',
		error: '🚨'
	}

	return icons[level]
}

function escapeHtml(unsafe: string): string {
	return String(unsafe)
		.replace(/&/g, '&amp;')
		.replace(/</g, '&lt;')
		.replace(/>/g, '&gt;')
		.replace(/"/g, '"')
		.replace(/'/g, '&#039;')
}

Características de la plantilla:

Niveles de gravedad: El estilo visual cambia según la importancia (info/success/warning/error)
Estructura flexible: Admite tabla de detalles opcional, botones de acción y personalización
Mensajería contextual: El texto del pie de página se adapta al nivel de gravedad
Conciencia de seguridad: Consejos de seguridad para notificaciones sensibles
Seguimiento de marca de tiempo: Muestra cuándo ocurrió el evento

Función de Envío Reutilizable

Crea una función de envío central que todas las plantillas utilicen:

// src/lib/mailer/sendEmail.server.ts

import { transporter } from './emailSetup.server'
import type { SentMessageInfo } from 'nodemailer'

export interface EmailOptions {
	to: string
	from: string
	replyTo?: string
	subject: string
	html: string
	text?: string
}

/**
 * Sends email using Nodemailer with error handling
 *
 * Automatically generates plain text version from HTML
 * Provides structured error messages for debugging
 */
export async function sendEmail({
	to,
	from,
	replyTo,
	subject,
	html,
	text
}: EmailOptions): Promise<SentMessageInfo> {
	// Validate required fields
	if (!to || !from || !subject || !html) {
		throw new Error('Missing required email fields')
	}

	try {
		const info = await transporter.sendMail({
			from,
			to,
			replyTo,
			subject,
			html,
			text: text || stripHtml(html) // Auto-generate text version
		})

		console.log('✓ Email sent:', {
			messageId: info.messageId,
			to,
			subject
		})

		return info
	} catch (err) {
		console.error('Email send failed:', {
			to,
			subject,
			error: err.message
		})

		throw new Error(`Failed to send email to ${to}: ${err.message}`)
	}
}
/**
 * Strips HTML tags for plain text version
 */
function stripHtml(html: string): string {
	return html
		.replace(/<style[^>]*>.*?<\/style>/gi, '')
		.replace(/<script[^>]*>.*?<\/script>/gi, '')
		.replace(/<[^>]+>/g, '')
		.replace(/\s+/g, ' ')
		.trim()
}

Flujos de Trabajo con Múltiples Correos

Las aplicaciones reales a menudo necesitan enviar múltiples correos coordinados para una sola acción del usuario. Vamos a construir un ejemplo completo.

El Escenario: Solicitud de Demo

Cuando alguien solicita una demo, necesitamos:

Notificar al equipo de ventas (plantilla de contacto) con los detalles del prospecto
Dar la bienvenida al prospecto (plantilla de bienvenida) mientras espera
Confirmar la recepción (plantilla de notificación) con los detalles enviados

Paso 1: Definir el Esquema de Validación

// src/lib/types.ts

import * as v from 'valibot'

export const demoRequestSchema = v.object({
	name: v.pipe(
		v.string('Name is required'),
		v.nonEmpty('Name is required'),
		v.minLength(2, 'Name must be at least 2 characters'),
		v.maxLength(100, 'Name is too long'),
		v.trim()
	),

	email: v.pipe(
		v.string('Email is required'),
		v.nonEmpty('Email is required'),
		v.email('Please enter a valid email address'),
		v.maxLength(254, 'Email is too long'),
		v.toLowerCase(),
		v.trim()
	),

	company: v.pipe(
		v.string('Company name is required'),
		v.nonEmpty('Company name is required'),
		v.minLength(2, 'Company name must be at least 2 characters'),
		v.maxLength(100, 'Company name is too long'),
		v.trim()
	),

	role: v.pipe(
		v.string('Job title is required'),
		v.nonEmpty('Job title is required'),
		v.maxLength(100, 'Job title is too long'),
		v.trim()
	),

	companySize: v.pipe(
		v.string('Company size is required'),
		v.nonEmpty('Please select a company size')
	),

	interests: v.pipe(
		v.array(v.string()),
		v.minLength(1, 'Please select at least one area of interest'),
		v.maxLength(5, 'Please select no more than 5 interests')
	)
})

export type DemoRequestData = v.InferOutput<typeof demoRequestSchema>

Paso 2: Crear el Componente de Formulario

<!-- src/routes/demo/+page.svelte -->
<script lang="ts">
	import { enhance } from '$app/forms'

	interface FormResponse {
		success?: boolean
		email?: string
		errors?: Record<string, string[]>
		data?: any
	}

	let { form = $bindable() } = $props<{ form?: FormResponse }>()

	let isSubmitting = $state(false)

	const fieldErrors = (errors: Record<string, string[]> | undefined, field: string) =>
		errors && field in errors ? errors[field] : undefined
</script>

<div class="container">
	<h1>Request a Demo</h1>

	<p class="intro">
		See how our platform can transform your workflow. Fill out the form below and our team will
		reach out to schedule a personalized demo.
	</p>

	{#if form?.success}
		<div class="success-message" role="alert">
			<h2>✓ Demo Request Submitted!</h2>
			<p>
				Thank you for your interest! We've sent a confirmation to
				<strong>{form.email}</strong>. Our team will contact you within 24 hours to schedule your
				personalized demo.
			</p>
		</div>
	{/if}

	<form
		method="POST"
		use:enhance={() => {
			isSubmitting = true
			return async ({ update }) => {
				isSubmitting = false
				await update()
			}
		}}
	>
		<!-- Personal Information -->
		<fieldset>
			<legend>Personal Information</legend>

			<div class="form-field">
				<label for="name">
					Full Name *
					{#if fieldErrors(form?.errors, 'name')}
						<span class="error">{fieldErrors(form?.errors, 'name')?.[0]}</span>
					{/if}
				</label>
				<input
					id="name"
					name="name"
					type="text"
					value={form?.data?.name ?? ''}
					aria-invalid={fieldErrors(form?.errors, 'name') ? 'true' : undefined}
					required
				/>
			</div>

			<div class="form-field">
				<label for="email">
					Work Email *
					{#if fieldErrors(form?.errors, 'email')}
						<span class="error">{fieldErrors(form?.errors, 'email')?.[0]}</span>
					{/if}
				</label>
				<input
					id="email"
					name="email"
					type="email"
					value={form?.data?.email ?? ''}
					aria-invalid={fieldErrors(form?.errors, 'email') ? 'true' : undefined}
					required
				/>
			</div>
		</fieldset>

		<!-- Company Details -->
		<fieldset>
			<legend>Company Details</legend>

			<div class="form-field">
				<label for="company">
					Company Name *
					{#if fieldErrors(form?.errors, 'company')}
						<span class="error">{fieldErrors(form?.errors, 'company')?.[0]}</span>
					{/if}
				</label>
				<input
					id="company"
					name="company"
					type="text"
					value={form?.data?.company ?? ''}
					aria-invalid={fieldErrors(form?.errors, 'company') ? 'true' : undefined}
					required
				/>
			</div>

			<div class="form-field">
				<label for="role">
					Job Title *
					{#if fieldErrors(form?.errors, 'role')}
						<span class="error">{fieldErrors(form?.errors, 'role')?.[0]}</span>
					{/if}
				</label>
				<input
					id="role"
					name="role"
					type="text"
					value={form?.data?.role ?? ''}
					placeholder="e.g., Marketing Director"
					aria-invalid={fieldErrors(form?.errors, 'role') ? 'true' : undefined}
					required
				/>
			</div>

			<div class="form-field">
				<label for="companySize">
					Company Size *
					{#if fieldErrors(form?.errors, 'companySize')}
						<span class="error">{fieldErrors(form?.errors, 'companySize')?.[0]}</span>
					{/if}
				</label>
				<select id="companySize" name="companySize" value={form?.data?.companySize ?? ''} required>
					<option value="">Select company size</option>
					<option value="1-10">1-10 employees</option>
					<option value="11-50">11-50 employees</option>
					<option value="51-200">51-200 employees</option>
					<option value="201-500">201-500 employees</option>
					<option value="501+">501+ employees</option>
				</select>
			</div>
		</fieldset>

		<!-- Areas of Interest -->
		<fieldset>
			<legend>
				Areas of Interest *
				{#if fieldErrors(form?.errors, 'interests')}
					<span class="error">{fieldErrors(form?.errors, 'interests')?.[0]}</span>
				{/if}
			</legend>

			<div class="checkbox-group">
				{#each ['Marketing Automation', 'Sales Pipeline Management', 'Customer Analytics', 'Team Collaboration', 'Workflow Automation'] as interest}
					<label class="checkbox-label">
						<input
							type="checkbox"
							name="interests"
							value={interest}
							checked={form?.data?.interests?.includes(interest) ?? false}
						/>
						{interest}
					</label>
				{/each}
			</div>
		</fieldset>

		<button type="submit" disabled={isSubmitting}>
			{isSubmitting ? 'Submitting Request...' : 'Request Demo'}
		</button>
	</form>
</div>

<style>
	.container {
		max-width: 700px;
		margin: 2rem auto;
		padding: 0 1rem;
	}

	.intro {
		color: #666;
		font-size: 1.1rem;
		line-height: 1.6;
		margin-bottom: 2rem;
	}

	.success-message {
		background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
		border: 2px solid #4caf50;
		color: #1b5e20;
		padding: 2rem;
		border-radius: 8px;
		margin-bottom: 2rem;
	}

	.success-message h2 {
		margin: 0 0 1rem 0;
		color: #2e7d32;
	}

	.success-message p {
		margin: 0;
		font-size: 1rem;
		line-height: 1.6;
	}

	fieldset {
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		padding: 1.5rem;
		margin-bottom: 2rem;
	}

	legend {
		font-weight: 700;
		font-size: 1.1rem;
		color: #333;
		padding: 0 0.5rem;
	}

	.form-field {
		margin-bottom: 1.5rem;
	}

	label {
		display: block;
		font-weight: 600;
		margin-bottom: 0.5rem;
		color: #444;
	}

	.error {
		color: #d32f2f;
		font-size: 0.875rem;
		font-weight: normal;
		margin-left: 0.5rem;
	}

	input[type='text'],
	input[type='email'],
	select {
		width: 100%;
		padding: 0.75rem;
		border: 2px solid #e0e0e0;
		border-radius: 6px;
		font-size: 1rem;
		transition: border-color 0.2s;
	}

	input[type='text']:focus,
	input[type='email']:focus,
	select:focus {
		outline: none;
		border-color: #667eea;
	}

	input[aria-invalid='true'] {
		border-color: #d32f2f;
	}

	.checkbox-group {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 0.75rem;
		margin-top: 0.75rem;
	}

	.checkbox-label {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem;
		border-radius: 4px;
		cursor: pointer;
		transition: background 0.2s;
	}

	.checkbox-label:hover {
		background: #f5f5f5;
	}

	.checkbox-label input[type='checkbox'] {
		width: auto;
		cursor: pointer;
	}

	button {
		width: 100%;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		padding: 1rem 2rem;
		border: none;
		border-radius: 8px;
		font-size: 1.1rem;
		font-weight: 600;
		cursor: pointer;
		transition:
			transform 0.2s,
			box-shadow 0.2s;
	}

	button:hover:not(:disabled) {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
	}

	button:disabled {
		opacity: 0.6;
		cursor: not-allowed;
		transform: none;
	}
</style>

Paso 3: Crear la Acción del Servidor

// src/routes/demo/+page.server.ts

import { env } from '$env/dynamic/private'
import { fail, type Actions } from '@sveltejs/kit'
import * as v from 'valibot'
import { demoRequestSchema, type DemoRequestData } from '$lib/types'
import { sendEmail } from '$lib/mailer/sendEmail.server'
import { contactTemplate } from '$lib/mailer/templates/contact'
import { welcomeTemplate } from '$lib/mailer/templates/welcome'
import { notificationTemplate } from '$lib/mailer/templates/notification'

export const actions: Actions = {
	default: async ({ request }) => {
		const formData = await request.formData()

		const demoData = {
			name: formData.get('name') as string,
			email: formData.get('email') as string,
			company: formData.get('company') as string,
			role: formData.get('role') as string,
			companySize: formData.get('companySize') as string,
			interests: formData.getAll('interests') as string[]
		}

		try {
			const validatedData = v.parse(demoRequestSchema, demoData)

			// Send three coordinated emails
			await sendDemoEmails(validatedData)

			return {
				success: true,
				email: validatedData.email
			}
		} catch (err) {
			if (v.isValiError(err)) {
				const fieldErrors: Record<string, string[]> = {}

				for (const issue of err.issues) {
					const path = issue.path?.[0]?.key as string
					if (path) {
						if (!fieldErrors[path]) {
							fieldErrors[path] = []
						}
						fieldErrors[path].push(issue.message)
					}
				}

				return fail(400, {
					errors: fieldErrors,
					data: demoData
				})
			}

			console.error('Demo request error:', err)
			return fail(500, {
				errors: {
					_form: ['Failed to process your request. Please try again later.']
				},
				data: demoData
			})
		}
	}
}

/**
 * Sends three coordinated emails for demo request:
 * 1. Internal notification to sales (contact template)
 * 2. Welcome email to lead (welcome template)
 * 3. Confirmation to lead (notification template)
 */
async function sendDemoEmails(data: DemoRequestData): Promise<void> {
	/**
	 * Email 1: Sales team notification
	 * Reuses contact template by mapping fields
	 */
	await sendEmail({
		to: env.GOOGLE_EMAIL,
		from: env.GOOGLE_EMAIL,
		replyTo: data.email,
		subject: `New Demo Request: ${data.company} - ${data.name}`,
		html: contactTemplate({
			name: data.name,
			email: data.email,
			service: data.interests, // Map interests → services
			budget: data.companySize, // Map companySize → budget
			message: `Company: ${data.company}\nRole: ${data.role}\n\nRequested demo for: ${data.interests.join(', ')}`
		})
	})

	/**
	 * Email 2: Welcome to lead
	 * Engages them while waiting for sales contact
	 */
	await sendEmail({
		to: data.email,
		from: env.GOOGLE_EMAIL,
		subject: 'Welcome! Your Demo Request is Confirmed',
		html: welcomeTemplate({
			name: data.name,
			email: data.email,
			accountType: 'free'
		})
	})

	/**
	 * Email 3: Confirmation to lead
	 * Provides receipt with submitted details
	 */
	await sendEmail({
		to: data.email,
		from: env.GOOGLE_EMAIL,
		subject: 'Demo Request Confirmation',
		html: notificationTemplate({
			title: 'Demo Request Received',
			message: `Thank you for requesting a demo, ${data.name}! We've received your request and our team will contact you within 24 hours to schedule your personalized demonstration.`,
			level: 'success',
			userName: data.name,
			details: [
				{ label: 'Company', value: data.company },
				{ label: 'Your Role', value: data.role },
				{ label: 'Company Size', value: data.companySize },
				{ label: 'Areas of Interest', value: data.interests.join(', ') },
				{ label: 'Contact Email', value: data.email }
			],
			actionUrl: 'https://google.com', // Placeholder URL for demo scheduling
			actionLabel: 'Prepare for Your Demo',
			timestamp: new Date()
		})
	})
}

Por qué importa este orden:

Notificación a ventas primero: Garantiza que el equipo sepa sobre el prospecto incluso si los correos posteriores fallan
Bienvenida segundo: Involucra al prospecto con valor inmediato
Confirmación al final: Proporciona una referencia detallada

Si el correo #3 falla, los correos #1 y #2 ya tuvieron éxito—tu equipo sabe sobre el prospecto y el prospecto recibió una bienvenida.

Patrones de Reutilización de Plantillas

Patrón 1: Mapeo de Campos

Reutiliza plantillas mapeando diferentes datos a los campos esperados:

// src/routes/demo/+page.server.ts
// ... inside sendDemoEmails function
// Demo request uses contact template by mapping fields
await sendEmail({
	html: contactTemplate({
		name: data.name,
		email: data.email,
		service: data.interests, // interests → service
		budget: data.companySize, // companySize → budget
		message: constructMessage(data)
	})
})

Patrón 2: Variantes de Plantilla

Crea variantes de plantilla para casos de uso relacionados:

// src/routes/demo/+page.server.ts
// ... inside sendEmail function
// Base notification
notificationTemplate({ title, message, level: 'info' })

// Others can reuse same template with different levels and content:

// Password changed (success variant)
notificationTemplate({
	title: 'Password Changed',
	message: 'Your password was successfully updated',
	level: 'success'
})

// Security alert (error variant)
notificationTemplate({
	title: 'Unusual Login Detected',
	message: 'We detected a login from a new device',
	level: 'error'
})

Patrón 3: Composición

Compone correos complejos a partir de partes más simples:

function orderReceiptTemplate(order: Order): string {
	const itemsList = order.items
		.map(
			(item) => `
    <tr>
      <td>${item.name}</td>
      <td>${item.quantity}</td>
      <td>$${item.price}</td>
    </tr>
  `
		)
		.join('')

	const content = `
    ${renderOrderSummary(order)}
    <table>${itemsList}</table>
    ${renderPaymentInfo(order.payment)}
    ${renderShippingInfo(order.shipping)}
  `

	return emailLayout(content, { title: 'Order Receipt' })
}

Pruebas de Plantillas

Pruebas Unitarias de Plantillas

// tests/unit/templates.test.ts

import { describe, it, expect } from 'vitest'
import { contactTemplate } from '$lib/mailer/templates/contact'

describe('contactTemplate', () => {
	it('renders all required fields', () => {
		const data = {
			name: 'John Doe',
			email: 'john@example.com',
			service: ['Web Development'],
			budget: '$10,000',
			message: 'Test message'
		}

		const html = contactTemplate(data)

		expect(html).toContain('John Doe')
		expect(html).toContain('john@example.com')
		expect(html).toContain('Web Development')
		expect(html).toContain('$10,000')
		expect(html).toContain('Test message')
	})

	it('escapes HTML in user input', () => {
		const data = {
			name: '<script>alert("xss")</script>',
			email: 'test@example.com',
			service: ['Web Development'],
			budget: '$5,000',
			message: '<img src=x onerror=alert(1)>'
		}

		const html = contactTemplate(data)

		expect(html).not.toContain('<script>')
		expect(html).toContain('&lt;script&gt;')
		expect(html).not.toContain('<img src=x')
	})
})

Vista Previa de Plantillas en Local

Crea una ruta de vista previa para desarrollo:

// src/routes/email-preview/[template]/+page.server.ts

import { error } from '@sveltejs/kit'
import { contactTemplate } from '$lib/mailer/templates/contact'
import { welcomeTemplate } from '$lib/mailer/templates/welcome'
import { notificationTemplate } from '$lib/mailer/templates/notification'

export async function load({ params }) {
	const mockData = {
		contact: contactTemplate({
			name: 'John Doe',
			email: 'john@example.com',
			service: ['Web Development', 'Consulting'],
			budget: '$10,000 - $25,000',
			message: 'Looking for help with a SvelteKit project'
		}),
		welcome: welcomeTemplate({
			name: 'Jane Smith',
			email: 'jane@example.com',
			accountType: 'pro',
			verificationUrl: 'https://example.com/verify'
		}),
		notification: notificationTemplate({
			title: 'Password Changed Successfully',
			message:
				'Your account password was recently updated. If you did not make this change, please contact support immediately.',
			level: 'success',
			userName: 'Alex Johnson',
			details: [
				{ label: 'Changed At', value: new Date().toLocaleString() },
				{ label: 'IP Address', value: '192.168.1.1' },
				{ label: 'Location', value: 'San Francisco, CA' }
			],
			timestamp: new Date()
		})
	}

	const html = mockData[params.template as keyof typeof mockData]

	if (!html) {
		error(404, 'Template not found')
	}

	return { html }
}

<!-- src/routes/email-preview/[template]/+page.svelte -->
<script lang="ts">
	let { data } = $props()
</script>

<svelte:head>
	<title>Email Preview</title>
</svelte:head>

{@html data.html}

Visita /email-preview/contact, /email-preview/welcome o /email-preview/notification para ver las plantillas renderizadas.

Mejores Prácticas en Producción

1. Control de Versiones de Plantillas

Si necesitas actualizar plantillas en producción, incluye números de versión para el seguimiento y la reversión, añadiendo un comentario de versión en la plantilla:

// src/lib/mailer/templates/welcome.ts

export const TEMPLATE_VERSION = '2.1.0'

export function welcomeTemplate(data: WelcomeEmailData): string {
  const content = `
    <!-- Template Version: ${TEMPLATE_VERSION} -->
    ${/* template content */}
  `

  return emailLayout(content, { title: 'Welcome!' })
}

2. Buenas Prácticas para el Preencabezado

Crea preencabezados atractivos (50-100 caracteres):

// ✅ Good preheaders
preheader: 'Get started with your new account in 3 easy steps'
preheader: 'Your order #12345 shipped and will arrive Tuesday'
preheader: 'Security alert: New login from Chrome on MacOS'

// ❌ Bad preheaders
preheader: 'View in browser'
preheader: data.name // Wasted space
preheader: '' // Missed opportunity

3. Optimización para Móviles

Prueba las plantillas en dispositivos móviles:

/* Always include mobile styles */
@media only screen and (max-width: 600px) {
	.email-container {
		width: 100% !important;
		border-radius: 0 !important;
	}

	.email-body {
		padding: 20px 15px !important;
	}

	h1 {
		font-size: 20px !important;
	}

	table {
		font-size: 14px !important;
	}
}

4. Accesibilidad

Haz que las plantillas sean accesibles:

<!-- Use semantic HTML -->
<h1>Welcome</h1>
<!-- Not <div style="font-size: 24px"> -->

<!-- Provide alt text -->
<img src="logo.png" alt="Company Logo" />

<!-- Ensure sufficient color contrast -->
<p style="color: #333; background: #fff;">
	<!-- 4.5:1 ratio -->

	<!-- Use proper link text -->
	<a href="/verify">Verify Your Email</a>
	<!-- Not "Click Here" -->
</p>

5. Pruebas en Clientes de Correo

Prueba en los principales clientes:

Gmail (web, iOS, Android)
Outlook (escritorio, web, iOS, Android)
Apple Mail (macOS, iOS)
Yahoo Mail
Outlook.com

Usa servicios como Litmus o Email on Acid para pruebas automatizadas.

Errores Comunes

Error 1: Estilos Inline en Elementos

<!-- ❌ Hard to maintain -->
<p style="color: #333; font-size: 16px; line-height: 1.6; margin-bottom: 20px;">
	<!-- ✅ Use classes where supported -->
	<style>
		.text {
			color: #333;
			font-size: 16px;
			line-height: 1.6;
			margin-bottom: 20px;
		}
	</style>
</p>

<p class="text"></p>

Error 2: No Escapar la Entrada del Usuario

// ❌ XSS vulnerability
html: `<p>${data.message}</p>`

// ✅ Always escape
html: `<p>${escapeHtml(data.message)}</p>`

Error 3: Versión en Texto Plano Faltante

// ❌ HTML only
await sendEmail({ html })

// ✅ Include text fallback
await sendEmail({
	html,
	text: stripHtml(html)
})

Error 4: Sin Pruebas de Plantillas

// ❌ Test in production
await sendEmail({ to: 'customer@example.com', html })

// ✅ Preview locally first
// Visit /email-preview/template-name

Conclusión

Has construido un sistema de plantillas de correo listo para producción con:

Diseño base que garantiza consistencia en todos los correos
Plantillas especializadas para contactos, bienvenida y notificaciones
Flujos de trabajo multi-correo que coordinan secuencias de mensajes
Seguridad de tipos que previene errores en tiempo de ejecución
Patrones reutilizables para la composición de plantillas

Puntos Clave

Plantillas como funciones: Funciones puras que aceptan datos tipados
Composición sobre duplicación: Inyecta contenido en diseños compartidos
Límites exclusivos del servidor: Las plantillas viven en módulos .server.ts
Seguridad de tipos: Las interfaces previenen datos faltantes o incorrectos
Pruebas: Previsualiza localmente antes de enviar a los clientes

Próximos Pasos

Agrega más plantillas especializadas (restablecimiento de contraseña, factura, etc.)
Implementa control de versiones de plantillas para pruebas A/B
Configura pruebas automatizadas en clientes de correo
Crea un panel de previsualización de plantillas
Construye un sistema de seguimiento de métricas de plantillas

Esta guía se enfoca en patrones listos para producción para construir sistemas de plantillas de correo mantenibles y con seguridad de tipos en SvelteKit. Para más tutoriales, visita The Hackpile Chronicles.