Introdução

A maioria dos tutoriais de email para por enviar um único email com HTML inline. Mas aplicações em produção precisam de algo mais sofisticado: um sistema de templates que mantenha consistência em dezenas de tipos de email, permanecendo fácil de manter e com segurança de tipos.

Este guia percorre a construção de um sistema profissional de templates de email no SvelteKit usando o Nodemailer. Você aprenderá a criar layouts base que estabelecem consistência de marca, templates especializados para diferentes tipos de email e a orquestrar fluxos de trabalho com múltiplos emails que enviam sequências coordenadas de mensagens.

O Que Você Vai Construir

Ao final deste artigo, você terá:

Template de layout base fornecendo estilo e estrutura consistentes
Templates especializados para emails de boas-vindas, notificações e formulários de contato
Fluxos de trabalho com múltiplos emails que enviam sequências coordenadas
Interfaces com segurança de tipos garantindo a correção dos dados do template
Funções de envio reutilizáveis abstraindo o transporte de email
Padrões de produção para composição e reutilização de templates

Pré-requisitos

Este é um artigo avançado. Você já deve entender:

Roteamento do SvelteKit e código do lado do servidor
Envio básico de emails com Nodemailer
Fundamentos de TypeScript
Padrões de validação de formulários

Se você precisar de conhecimentos básicos, comece com um guia introdutório de Nodemailer antes de abordar sistemas avançados de templates.

O Espaço do Problema

Enviar emails em produção rapidamente vira uma bagunça sem um sistema de templates. Veja o que acontece:

Problema 1: Duplicação de HTML

Todo email contém cabeçalho, rodapé e 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

O custo: Mudar o rodapé? Atualize 15 arquivos. Ajustar as cores da marca? Faça um localizar-e-substituir por toda a base de código. Adicionar um link jurídico? Torça para não perder nenhum arquivo.

Problema 2: Sem Segurança de Tipos

Os dados do email são tipados como strings, transformando erros de digitação em erros de execução:

// ❌ 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

Sem um sistema, cada desenvolvedor inventa seus próprios padrões:

// 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

O resultado: Os emails ficam diferentes, alguns quebram no Outlook, e a manutenção vira trabalho arqueológico.

Problema 4: Caos com Múltiplos Emails

Fluxos de trabalho reais enviam múltiplos emails coordenados:

// ❌ 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({
		/* ... */
	})
}

Perguntas que este código não responde:

O que acontece se o email #2 falha, mas o #1 foi enviado com sucesso?
Como você testa cada email de forma independente?
Como você sabe qual template cada email utiliza?
Como você compartilha estilos entre eles?

O Modelo Mental do SvelteKit

O SvelteKit nos ensina a pensar em composição e reutilização. Aplicamos esses mesmos princípios aos templates de email:

Modelo Mental 1: Templates como Funções

No SvelteKit, componentes são funções que recebem props e retornam markup. Templates de email funcionam da mesma forma:

// 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 })
}

Insight principal: Trate os templates como componentes Svelte — funções puras que aceitam props tipadas e retornam HTML.

Modelo Mental 2: Herança por Composição

Assim como o padrão <slot> do Svelte, os templates de email se compõem por meio da injeção de conteúdo:

// 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: Limites de Módulos Exclusivos do Servidor

Templates de email são lógica exclusiva do servidor, assim como arquivos +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 que .ts e não .server.ts?

Os arquivos de template não precisam da extensão .server.ts porque são importados exclusivamente por módulos exclusivos do servidor (como arquivos +page.server.ts). O limite do servidor já é estabelecido pelo arquivo importador.

Arquitetura do Sistema de Templates

Vamos construir um sistema de templates de email pronto para produção do zero.

Estrutura de Diretórios

Organize os templates como uma biblioteca dentro do seu módulo de 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

Princípios de design:

Responsabilidade Única: Cada template cuida de um tipo de email
Composição: Templates injetam conteúdo em layouts compartilhados
Segurança de Tipos: Interfaces TypeScript definem os dados esperados
Reutilização: Templates são funções puras sem efeitos colaterais

Construindo o Layout Base

O layout base fornece estrutura e estilo consistentes para todos os emails. Pense nele como o "app shell" dos seus emails.

Por Que Você Precisa de um Layout Base

Sem um layout base:

HTML do cabeçalho duplicado em 15 arquivos
Links do rodapé atualizados manualmente em todo lugar
Mudanças nas cores da marca exigem um localizar-e-substituir massivo
Resets CSS para clientes de email copiados e colados inconsistentemente

Com um layout base:

Altere o rodapé uma vez, atualize todos os emails
Adicione o link de cancelamento de inscrição em um único lugar
Ajuste as cores da marca globalmente
Garanta compatibilidade consistente com clientes de email

Crie o Template 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;')
}

Principais funcionalidades deste layout:

Resets para Clientes de Email: Normaliza a renderização no Gmail, Outlook e Apple Mail
Design Responsivo: Adapta-se a telas móveis com media queries
Suporte a Preheader: Exibe texto de prévia nos clientes de email
Cabeçalho com Gradiente: Elemento visual moderno e com identidade de marca
Links no Rodapé: Cancelamento de inscrição, privacidade, contato (exigidos para conformidade)
Proteção contra XSS: A função escapeHtml previne ataques de injeção

O preheader é o texto de prévia exibido nos clientes de email antes de abrir a mensagem. Ele aparece após a linha de assunto na maioria dos aplicativos de email. Use-o para complementar sua linha de assunto e melhorar as taxas de abertura.

Exemplo: Assunto: "Bem-vindo à Nossa Plataforma" | Preheader: "Comece com nosso guia rápido de configuração"

Construindo Templates Especializados

Agora que temos um layout base, vamos criar templates especializados para diferentes tipos de e-mail. Cada template foca em um caso de uso específico enquanto aproveita o layout compartilhado.

Template 1: E-mail de Formulário de Contato

O template de contato exibe informações enviadas pelo usuário para sua equipe:

// 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;')
}

Recursos do template:

Tabela de dados estruturada: Layout de informações fácil de escanear
Links prontos para e-mail: Links mailto clicáveis para respostas rápidas
Destaque da mensagem: Tratamento visual distinto para a mensagem do usuário
Botão de ação: CTA de resposta em destaque
Segurança de tipos: Interface garante que todos os campos obrigatórios estejam presentes

Template 2: E-mail de Boas-vindas

O template de boas-vindas integra novos usuários com uma mensagem calorosa e envolvente:

// 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;')
}

Recursos do template:

Personalização: Usa o nome do destinatário para criar conexão
Verificação condicional: Exibe a verificação de e-mail somente quando necessário
Benefícios específicos da conta: Adapta o conteúdo ao nível de assinatura
Múltiplos CTAs: Links de documentação, tutoriais e comunidade
Resumo da conta: Confirma os detalhes do cadastro

E-mails de boas-vindas têm taxas de abertura de 50 a 86% — as mais altas de qualquer tipo de e-mail. Envie-os dentro de 1 minuto após o cadastro, enquanto o engajamento do usuário está no pico. Cada minuto de atraso reduz significativamente as taxas de abertura.

Template 3: E-mail de Notificação

O template de notificação lida com alertas do sistema, atualizações e mensagens transacionais:

// 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;')
}

Recursos do template:

Níveis de severidade: O estilo visual muda com base na importância (info/success/warning/error)
Estrutura flexível: Suporta tabela de detalhes opcional, botões de ação e personalização
Mensagens contextuais: O texto do rodapé se adapta ao nível de severidade
Consciência de segurança: Dicas de segurança para notificações sensíveis
Rastreamento de timestamp: Exibe quando o evento ocorreu

Função de Envio Reutilizável

Crie uma função de envio central que todos os templates utilizam:

// 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()
}

Fluxos de Trabalho com Múltiplos E-mails

Aplicações reais frequentemente precisam enviar múltiplos e-mails coordenados para uma única ação do usuário. Vamos construir um exemplo completo.

O Cenário: Solicitação de Demonstração

Quando alguém solicita uma demonstração, precisamos:

Notificar a equipe de vendas (template de contato) com os detalhes do lead
Dar boas-vindas ao lead (template de boas-vindas) enquanto aguarda
Confirmar o recebimento (template de notificação) com os detalhes enviados

Etapa 1: Definir o Schema de Validação

// 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>

Etapa 2: Criar o Componente de Formulário

<!-- 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>

Etapa 3: Criar a Action do 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 que a ordem importa:

Notificação de vendas primeiro: Garante que a equipe saiba sobre o lead mesmo que os e-mails seguintes falhem
Boas-vindas em segundo: Engaja o lead com valor imediato
Confirmação por último: Fornece uma referência detalhada

Se o e-mail #3 falhar, os e-mails #1 e #2 ainda terão sido enviados com sucesso — sua equipe sabe sobre o lead e o lead recebeu as boas-vindas.

Padrões de Reutilização de Templates

Padrão 1: Mapeamento de Campos

Reutilize templates mapeando dados diferentes para os 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)
	})
})

Padrão 2: Variantes de Template

Crie variantes de template 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'
})

Padrão 3: Composição

Componha e-mails complexos a partir de partes mais 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' })
}

Testando Templates

Testes Unitários de Templates

// 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')
	})
})

Visualizar Templates Localmente

Crie uma rota de prévia para desenvolvimento:

// 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}

Acesse /email-preview/contact, /email-preview/welcome ou /email-preview/notification para ver os templates renderizados.

Boas Práticas em Produção

1. Versionamento de Templates

Se precisar atualizar templates em produção, inclua números de versão para rastreamento e reversão adicionando um comentário de versão no template:

// 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. Boas Práticas de Pré-cabeçalho

Crie pré-cabeçalhos atraentes (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. Otimização para Mobile

Teste os templates em dispositivos móveis:

/* 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. Acessibilidade

Torne os templates acessíveis:

<!-- 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. Testes em Clientes de E-mail

Teste nos principais clientes:

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

Use serviços como Litmus ou Email on Acid para testes automatizados.

Erros Comuns

Erro 1: Estilos Inline em 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>

Erro 2: Não Escapar Entradas do Usuário

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

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

Erro 3: Versão em Texto Simples Ausente

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

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

Erro 4: Sem Testes de Template

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

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

Conclusão

Você construiu um sistema de templates de e-mail pronto para produção com:

Layout base garantindo consistência em todos os e-mails
Templates especializados para contatos, boas-vindas e notificações
Fluxos de múltiplos e-mails coordenando sequências de mensagens
Segurança de tipos prevenindo erros em tempo de execução
Padrões reutilizáveis para composição de templates

Principais Aprendizados

Templates como funções: Funções puras que aceitam dados tipados
Composição ao invés de duplicação: Injete conteúdo em layouts compartilhados
Limites exclusivos do servidor: Templates vivem em módulos .server.ts
Segurança de tipos: Interfaces evitam dados ausentes ou incorretos
Testes: Visualize localmente antes de enviar aos clientes

Próximos Passos

Adicionar mais templates especializados (redefinição de senha, fatura, etc.)
Implementar versionamento de templates para testes A/B
Configurar testes automatizados em clientes de e-mail
Criar painel de visualização de templates
Construir rastreamento de métricas de templates

Este guia foca em padrões prontos para produção para construir sistemas de templates de e-mail sustentáveis e com segurança de tipos no SvelteKit. Para mais tutoriais, visite The Hackpile Chronicles.