📋 Templates y Scaffolding

Objetivo: Generar código base consistente usando el sistema integrado de templates con Plop.js

Tip

Todo en un lugar: Los templates están integrados directamente en proyecto-vue. No necesitas clonar repositorios adicionales.

---

⚡ Workflow Integrado

🏗️ Sistema de Templates

graph TD
    A[cd proyecto-vue] --> B[npx plop]
    B --> C{¿Qué necesitas?}
    C --> D[Workspace Completo]
    C --> E[Microfrontend Específico]
    C --> F[Librería Específica]
    D --> G[Copiar a nuevo repo]
    E --> H[Copiar a repo existente]
    F --> H
    G --> I[pnpm install]
    H --> I
    I --> J[¡Listo para desarrollar!]

    style D fill:#e1f5fe
    style E fill:#f3e5f5
    style F fill:#e8f5e8

🎯 Beneficios del sistema integrado:

• ✅ Un solo repositorio - Todo desde proyecto-vue
• ✅ Templates actualizados - Siempre las últimas mejores prácticas
• ✅ Consistencia garantizada - Mismo stack en todos los proyectos
• ✅ Cero configuración - Templates pre-probados y funcionales

---

🚀 Proceso Completo

Setup Inicial (una sola vez por máquina)

1. Clonar proyecto-vue:

   git clone https://github.com/Kompa-s/proyecto-vue.git
   cd proyecto-vue

2. Instalar dependencias:

   pnpm install
   pnpm -r build

3. Verificar que funciona:

   npx plop --version  # Debe mostrar versión de Plop

Note

Una vez configurado, solo necesitas git pull ocasionalmente para obtener templates actualizados.

---

📋 Sistema de Templates Disponibles

🏗️ Workspace Completo - proyecto-completo

¿Cuándo usar?

• Empiezas un proyecto completamente nuevo
• Tu equipo necesita workspace independiente
• Quieres estructura completa desde cero

¿Qué genera?

• Estructura completa (@apps/, packages/, configs)
• Packages base (types, utils, vue-utils opcionales)
• Configuraciones (ESLint, Prettier, TypeScript)
• Documentación (README personalizado)

🔗 Microfrontends Específicos

microfrontend-integrado

¿Cuándo usar?

• Se ejecuta dentro de aplicación ASP.NET
• Recibe window.__params del host
• Ejemplos: checkout, listados, reservas

Genera: @apps/mi-micro/ completo

microfrontend-independiente

¿Cuándo usar?

• SPA completa independiente
• No depende de host ASP.NET
• Ejemplos: admin panels, herramientas internas

Genera: @apps/mi-spa/ completo

📦 Librerías Específicas

libreria-vue

¿Cuándo usar?

• Componentes reutilizables
• Composables compartidos
• Depende de Vue/Pinia

Genera: packages/vue-mi-lib/ completo

libreria-utils

¿Cuándo usar?

• Funciones puras JavaScript/TypeScript
• Sin dependencias de Vue
• Tipos compartidos

Genera: packages/mi-utils/ completo

Note

¿No sabes cuál elegir? Usa el Decision Tree para identificar qué template necesitas.

---

🎯 Ejemplos de Uso por Escenario

Escenario 1: Nuevo Equipo/Proyecto 🆕

1. Generar workspace completo:

   cd proyecto-vue
   npx plop
   # Seleccionar: proyecto-completo
   # Nombre: "mi-empresa-frontend"
   # Incluir types: Sí
   # Incluir utils: Sí

2. Copiar a tu repositorio:

   Copy-Item -Recurse ./mi-empresa-frontend/* /ruta/a/mi/nuevo/repo/
   cd /ruta/a/mi/nuevo/repo

3. Setup inicial:

   pnpm install
   pnpm build

4. Crear tu primer microfrontend:

   npx plop  # Ahora usa templates copiados
   # Seleccionar: microfrontend-integrado

Escenario 2: Agregar a Proyecto Existente ➕

1. Generar componente específico:

   cd proyecto-vue
   npx plop
   # Seleccionar: microfrontend-integrado
   # Nombre: "flight-booking"

2. Copiar a tu proyecto real:

   Copy-Item -Recurse @apps/flight-booking ../mi-proyecto-real/@apps/

3. Configurar en tu proyecto:

   cd ../mi-proyecto-real
   # Agregar al package.json: "app-flight-booking": "pnpm --filter flight-booking"
   pnpm install

4. Desarrollar:

   pnpm app-flight-booking dev

Escenario 3: Crear Librería Compartida 📚

1. Generar librería:

   cd proyecto-vue
   npx plop
   # Seleccionar: libreria-vue
   # Nombre: "vue-date-picker"

2. Copiar a tu proyecto real:

   Copy-Item -Recurse packages/vue-date-picker ../mi-proyecto-real/packages/

3. Configurar y usar:

   cd ../mi-proyecto-real
   # Agregar al package.json: "lib-vue-date-picker": "pnpm --filter vue-date-picker"
   pnpm install
   pnpm lib-vue-date-picker build

---

🔍 Validaciones Automáticas

El generador incluye validaciones para mantener consistencia:

Validación	Descripción	Error ejemplo
Nombres únicos	Verifica que no existe en @apps/ o packages/	Ya existe un microfrontend con el nombre "review"
Formato kebab-case	Solo minúsculas y guiones	Use formato kebab-case (ejemplo: mi-proyecto)
Prefijo vue-	Librerías Vue deben comenzar con vue-	Las librerías Vue deben comenzar con "vue-"
Descripción mínima	Al menos 10 caracteres	La descripción debe tener al menos 10 caracteres

---

🆕 Mantener Templates Actualizados

Obtener últimas mejoras:

cd proyecto-vue
git pull origin main
pnpm install  # Si hay nuevas dependencias

¿Qué se actualiza automáticamente?

El equipo de arquitectura mantiene actualizados:

• ✅ Nuevos tipos de templates según necesidades del equipo
• ✅ Mejores configuraciones (ESLint, TypeScript, Vite)
• ✅ Dependencias actualizadas en el catalog
• ✅ Nuevos patterns y mejores prácticas

Tip

Beneficio automático: Con un simple git pull tienes acceso a todas las mejoras del equipo sin configuración adicional.

---

✅ Checklist de Uso

Pre-generación

• proyecto-vue clonado y actualizado (git pull)
• Decidido qué tipo de proyecto necesitas (Decision Tree)
• Nombre en kebab-case definido
• Ruta de destino clara para copiar el código

Post-generación

Para Workspace Completo:

• Código copiado al nuevo repositorio
• pnpm install ejecutado en el nuevo repo
• pnpm build completado exitosamente
• Para más componentes: volver a proyecto-vue y usar (npx plop)

Para Código Específico:

• Componente copiado al proyecto real
• Script añadido al package.json del proyecto real
• pnpm install ejecutado
• Código funciona (pnpm app-{nombre} dev o pnpm lib-{nombre} build)

Validación final

• Hot reload funcionando (microfrontends)
• No errores TypeScript
• Build exitoso
• Linting sin warnings

---

🎯 Ventajas del Sistema Integrado

Para Desarrolladores

• ⚡ Un solo comando para generar código funcional
• 🎯 Cero configuración - Todo pre-configurado y probado
• 🔧 Always updated - Templates mejoran automáticamente
• 📚 Documentación viva - Templates como ejemplos funcionales

Para el Equipo

• 🏗️ Estándares enforced - Arquitectura consistente automática
• 📈 Onboarding acelerado - Nuevos miembros productivos desde día 1
• 🔄 Mejora continua - Templates evolucionan con la experiencia
• 🛡️ Calidad garantizada - Configuraciones probadas en producción

Tip

Filosofía: Los templates no son solo boilerplate, son la cristalización de las mejores prácticas del equipo, siempre actualizadas.

---

🔄 Próximos Pasos

1. 🚀 Quick Start - Usa los templates para tu primer proyecto
2. 💻 Desarrollo Día a Día - Workflows con templates generados
3. 📚 Referencias - Configuraciones detalladas para personalización avanzada