Aumentando la productividad en un plop

Cuando trabajamos en un proyecto nos damos cuenta de que hay procesos que repetimos mucho, en una aplicación NodeJS con Express podría ser crear una carpeta para una ruta y un archivo para cada método. En una aplicación Vue o Angular, crear los archivos para los componentes, templates y estilos. En una aplicación con Redux deberíamos crear types, actions, reducers, etc.

Si bién podríamos tener algunos archivos dando vueltas que podamos copiar y pegar para agilizar esos procesos, hay partes que todavía deberíamos hacer a mano (o codear algo que lo haga por nosotros), como renombrar los archivos, variables, etc.

Hoy vamos a ver plopjs, una herramienta para generar archivos, construida sobre inquirer y handlebars.

Pensando en el equipo

Si bien podemos configurar plop a nivel global, brilla más cuando lo configuramos a nivel proyecto. Esto nos permite usar las herramientas de versionado integradas en el proyecto para actualizar nuestros generadores al igual que cualquier otro código.

Agregando plop

Para agregar plop a nuestro proyecto hacemos:

# NPM
npm install plop --save-dev

# Yarn
yarn add plop --dev

Y creamos un archivo plopfile.js en la raíz de nuestro proyecto con el siguiente contenido:

module.exports = function (plop) {
    plop.setGenerator('component', {
        description: 'crea un componente de React',
        prompts: [],
        actions: []
    });
};

Configurando plop

Vamos a dividir el código de arriba:

• plop.setGenerator('nombre', ...): Nos permite crear un generador nombrado, es básicamente asignarle un nombre a un conjunto de instrucciones que van a crear archivos.
• description: Descripción del generador, deberíamos entender que hace solo con leerla.
• prompts: Preguntas que vamos a hacerle al usuario, después podemos usar esas respuestas en nuestros templates.
• actions: Acciónes de creacion, modificación o eliminación de archivos que deben ser ejecutadas.

Prompts

Podemos hacerle distintos tipos de preguntas a los usuarios, como por ejemplo:

• list:
• input:
• checkbox:

Entre otros.

Veamos un ejemplo completo:

module.exports = function (plop) {
    plop.setGenerator('component', {
        description: 'crea un componente de React',
        prompts: [{
            type: 'input',
            name: 'name',
            message: 'nombre del componente'
        }],
        actions: [{
            type: 'add',
            path: 'src/{{pascalCase name}}.js',
            templateFile: 'plop/component.js.hbs'
        }]
    });
};

Helpers

En el ejemplo de arriba vemos que en el action -> path definimos src/{{pascalCase name}}.js. pascalCase es uno de los helpers integrados dentro de plop. Que nos permiten modificar las variables obtenidas desde los prompts, tanto en los campos de nuestras actions como en nuestros templates.

También podemos definir nuestros propios helpers usando la función setHelper.

Templates

Son los archivos que referenciamos desde nuestros actions y van a ser copiados a los directorios definidos, se escriben en formato handlebars y tienen acceso a todos los helpers que definamos en nuestro plopfile.

Vamos a crear un archivo en plop/component.js.hbs con el siguiente contenido:

import React from "react";

const {{pascalCase name}} = () => <div>{`<{{pascalCase name}} />`}</div>;

export default {{pascalCase name}};

Si tenemos una variable name con el valor de list, el resultado sería:

import React from "react";

const List = () => <div>{`<List />`}</div>;

export default List;

Usando nuestros generadores

Para usar nuestros generadores, basta con correr el siguiente comando en la consola, mientras estamos parados en la carpeta de nuestro proyecto:

# npx plop <nombre del generador> [...respuestas]

# Base
npx plop

# Especificando el generador
npx plop component

# Especificando generador y respuesta en orden
npx plop component List

# Especificando generador y respuesta explicita
npx plop component --name List

Listo ✨

Felicitaciones, ya agregaste, usaste y aprendiste algunas cosas de Plop.

Si querés, podés ver más de plop acá.

Si te gustan estos posts, no te olvides de seguirme en:

• Twitter
• Twitch
• Sumarte al discord