MVC Module Creator for JS

Extensión para Visual Studio Code diseñada para automatizar la creación de módulos bajo el patrón de arquitectura MVC (Modelo-Vista-Controlador) utilizando Vanilla JavaScript.

La herramienta está enfocada en proyectos sin dependencias externas, encargándose de generar los archivos base, inyectar dependencias estáticas, documentar con JSDoc y preparar pruebas unitarias nativas.

Características principales

• Generación de estructura base: Crea los archivos model.js, view.js, controller.js, dom.js y style.css para cada módulo.
• Generación dinámica de campos: Interfaz para definir campos (Texto, Número, Fecha, Selector, Textarea). La extensión escribe el HTML correspondiente, la lógica de recolección en el DOM y las validaciones en el Modelo.
• Patrón Singleton: Opción integrada para aplicar el patrón Singleton a las clases del módulo generado.
• Auto-Wiring: Inyección automática del import del nuevo controlador en el archivo app.js ubicado en la raíz del proyecto.
• JSDoc Tipado: Generación de cabeceras @typedef en el Modelo basándose en los campos ingresados para habilitar IntelliSense en el editor sin necesidad de TypeScript.
• Testing Nativo: Creación de un archivo model.test.js configurado para funcionar con el test runner nativo de Node.js node:test.
• Utilidades compartidas: Generación e inyección de un archivo utils.js global para el manejo de inyección de CSS asíncrono y creación de IDs.
• Auto-formateo: Ejecución automática del formateador predeterminado de VS Code al finalizar la escritura de los archivos.

Estructura generada

Al ejecutar el comando sobre un directorio, se generará la siguiente estructura (ejemplo para un módulo llamado "Usuarios"):

./usuarios
 ├── controller.js
 ├── dom.js
 ├── model.js
 ├── model.test.js
 ├── style.css
 ├── utils.js
 └── view.js

La extensión permite definir los campos del formulario durante la creación del módulo y genera automáticamente:

• Clase Model
• Clase View
• Clase Dom
• Clase Controller
• Métodos singleton
• Validaciones básicas
• Formularios HTML
• CRUD base para APIs REST

Uso

La extensión provee dos métodos de ejecución:

Desde el explorador de archivos:

1. Hacer clic derecho sobre el directorio destino en la barra lateral de VS Code.

2. Seleccionar la opción "MVC Module Creator for JS: Crear Módulo" en el menú contextual.

3. Completar los datos requeridos en los inputs flotantes.

Desde la paleta de comandos:

1. Abrir la paleta (Ctrl + Shift + P en Windows/Linux, Cmd + Shift + P en macOS).

2. Ejecutar "MVC Module Creator for JS: Crear Módulo".

3. El módulo se creará en el directorio raíz del espacio de trabajo abierto.

Inicia la configuración del nuevo módulo:

1. Ingresar el nombre del módulo.

2. Definir los campos (opcional):

• Título
• Tipo
• Valor por defecto
• Placeholder

3. Definir si desea implementar Singleton.

4. La extensión generará automáticamente la estructura del módulo.

Tipos de campo soportados

• Texto
• Número
• Fecha
• Textarea
• Selector

Ejemplo

Módulo:

Usuarios

Campos:

Nombre
Apellido
Email
Fecha de Nacimiento

Resultado:

usuarios/
 ├── controller.js
 ├── dom.js
 ├── model.js
 ├── model.test.js
 ├── style.css
 ├── utils.js
 └── view.js

Pruebas unitarias

Los archivos de test generados están diseñados para el test runner incluido en las versiones recientes de Node.js. No requieren la instalación de Jest, Mocha u otras dependencias.

Para ejecutar las pruebas del módulo, utilizar el siguiente comando en la terminal:

node --test

Requisitos

• Visual Studio Code 1.101 o superior.

Autor

Gonzalo Castillo

Sugerencias a gonzalocastilloar@gmail.com. Teléfono personal (+54 9 3564 565969).

Licencia

MIT