Arquitectura Lógica

This content is not available in your language yet.

La arquitectura de @lynx/mail divide de forma limpia el diseño gráfico de las plantillas de la lógica imperativa de envío a través del protocolo SMTP.

Diagrama de Flujo

El ciclo de envío de un correo electrónico a través del ecosistema sigue un patrón de renderizado anticipado (Ahead of Time Rendering):

graph LR
    A[Componente React] --> B(Motor de Renderizado)

    B --> C{HTML String}
    B --> D{Plain Text String}

    C --> E[Nodemailer Transporter]
    D --> E

    E --> F[Servidor SMTP Externo]
    F --> G((Bandeja del Usuario))

    style A fill:#000000,stroke:#333,stroke-width:2px,color:#fff

Organización de Directorios

Dentro del paquete, la estructura promueve un acceso fácil a las funciones de exportación:

templates/: Almacena todos los componentes de React Email. Generalmente, cada plantilla es un archivo .tsx que exporta un componente por defecto y se acompaña de interfaces o esquemas Zod para validar las props.
components/: Pequeños fragmentos visuales reutilizables (como el Header, Footer o el Logo corporativo) que se comparten entre múltiples plantillas.
transporter/: Configuración de los clientes SMTP mediante nodemailer, definiendo puertos, host, validación de credenciales y pooling.

Creación de una Nueva Plantilla

Para añadir un nuevo correo electrónico al sistema:

Crear el Archivo: Añadir un nuevo componente .tsx en el directorio templates/.
Definir Props Tipadas: Declarar una interfaz para los datos dinámicos (ej. nombreUsuario, linkAccion). Las propiedades deben estar estrictamente tipadas.
Construir el Diseño: Emplear los primitivos de React Email (<Html>, <Head>, <Preview>, <Body>, <Container>, <Text>) en lugar de HTML genérico para asegurar que se muestre correctamente en clientes restrictivos como Outlook.
Exportar la Función de Renderizado: Exportar un método que encapsule el render asíncrono para generar tanto el cuerpo HTML como la alternativa en texto plano (plain-text fallback).