Plop.js - Automatize a criação de arquivos

Olá Web Developers! Vamos conhecer o Plop.js, uma ferramenta incrível que nos permite automatizar a geração de arquivos em nossos projetos. Se você já precisou copiar o conteúdo de um arquivo já existente para criar outro, você precisa conhecer esta ferramenta!

Entendendo o problema

Caso você já tenha trabalhado com Angular, sabe que ele possui comandos do próprio Angular-CLI para gerar services, pipes, classes, modules, etc.

Por exemplo, se você precisar criar um Service, basta executar o comando para criá-lo. Assim será gerado automaticamente um arquivo com o nome do seu service, com código contendo o service com o nome que você escolheu, e ele automaticamente será inserido no seu módulo (atualização de arquivo).

Ou seja, com um simples comando você terá arquivos sendo criados e atualizados, já com o conteúdo pronto para você começar a programar. Então te poupa o trabalho de ter que escrever declarações repetitivas.

ng generate service hero

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class HeroService {

  constructor() { }

}

Porém, não temos essa praticidade em qualquer lugar. Um ótimo exemplo é quando trabalhamos com React. Por ser uma biblioteca, ele não é tão opinativo quanto frameworks como o Angular. Em resumo, cada um pode criar sua própria estrutura, modo de escrever seus códigos, bibliotecas, etc. Esta é uma das diferenças entre bibliotecas e frameworks.

Por consequência, não temos uma ferramenta que gere arquivos para nós. Isso muitas vezes faz com que a gente acabe criando um arquivo vazio e escrevendo tudo, ou até mesmo copiando um arquivo existente para acelerar um pouco. Com o Plop.js você economiza aqueles 5 minutos para cada arquivo criado, seja rota, componente, controller, arquivo de teste, etc.

Plop.js vem ao resgate!

Uma vez que seu projeto começa a crescer, é preciso ter uma boa estrutura, organização e padrões. Também é importante que todos do time sigam esse mesmo padrão.

Com o intuito de resolver isso, o Plop.js nos permite criar comandos que vão gerar arquivos com a estrutura que queremos de forma bem simples!

Grandes empresas utilizam o Plop.js, como Microsoft, PayPal, Adobe e Mozilla.

A imagem abaixo mostra o Plop.js sendo iniciado em um projeto React, me perguntando se quero criar um componente, serviço, hook ou uma estrutura para Redux-Saga (action, reducer e saga).

Curso Angular - Introdução

Conhecer o curso

Instalando o Plop.js

Primeiro precisamos instalar o Plop.js em nosso projeto. Execute o comando:

npm install --save-dev plop

No package.json vamos adicionar um comando para iniciar o Plop!

{
	...
	"scripts": {
		"plop": "plop"
	}
}

Agora poderemos iniciar o Plop.js com o comando npm run plop.

Iniciando seu primeiro gerador

Crie na raiz do seu projeto um arquivo com o nome plopfile.js com o seguinte conteúdo:

module.exports = function (plop) {

};

Estamos expondo uma função que o Plop.js vai executar e passar para ela o objeto plop como parâmetro. Este objeto possui várias funções a fim de nos permitir criar nossos geradores.

Já podemos criar os geradores dentro desta função. No entanto, em projetos grandes isso vai gerar uma bagunça. Portanto, prefira criar um arquivo para cada gerador.

Por isso, vamos criar uma pasta chamada plop e dentro vamos criar um arquivo chamado hook-generator.js. Ele vai servir para gerarmos um React Hook.

Em hook-generator.js vamos ter o seguinte código:

module.exports = function (plop) {
	
};

É um código igual ao que fizemos antes, mas agora ele está em um arquivo separado. Então vamos conectá-lo ao arquivo principal, o plopfile.js;

const hookGenerator = require('./plop/hook-generator.js');

module.exports = function (plop) {
	hookGenerator(plop);
};

Dessa forma estamos fazendo com que o plopfile.js seja um lugar onde chamamos nossos geradores ao invés de declará-los diretamente aqui.

Iniciando um gerador de React Hooks

Volte ao arquivo hook-generator.js para podermos ver como é simples criar um gerador de arquivos.

module.exports = function (plop) {
	plop.setGenerator('hook', {
		description: 'Gerador de React Hooks',
		prompts: [],
		actions: []
	})
};

É desse modo que iniciamos um gerador. Vamos entender cada uma das suas partes:

• setGenerator: Função para criar um gerador. Ela recebe uma string indicando seu nome e um objeto indicando suas configurações
• "hook": Indica o nome que demos ao gerador
• description: Campo para colocarmos uma descrição sobre o nosso gerador
• prompts: Array que vai receber objetos que vão indicar as perguntas que o terminal vai fazer para nós respondermos, para assim ele saber como criar o arquivo.
• actions: Outro Array, e ele vai receber objetos que vão indicar as ações que o Plop vai ter que executar baseado em nossas respostas.

Partiremos agora para o prompts. Para criar um hook, vamos simplesmente pedir para o usuário indicar o nome do hook a ser criado. Assim poderemos usar esse nome para criar o nome do arquivo e já criar um código com esse mesmo nome.

Em resumo, vamos usar os prompts quando precisarmos ter o valor de alguma variável. Vamos chamar essa variável de nomeHook. Ficará assim:

	...
	prompts: [
		{
			type: 'input',
			name: 'nomeHook',
			message: 'Digite o nome do Hook: '
		}
	],
	...

• type indica o tipo de entrada que vamos usar. Para permitir que o usuário escreva, utilizamos o input
• name é o nome da variável
• message é o texto que o terminal vai imprimir para pedir uma ação do usuário

Curso React - Despertando o Poder dos Hooks

Conhecer o curso

Definindo Ações

Para encerrar, precisamos indicar uma ação a ser executada. No nosso caso, um arquivo vai ser criado. Com o intuito de criar um arquivo com o código que quisermos usando as variáveis que pegamos em prompts, criamos um arquivo de template que usa Handlebars.

Crie um arquivo chamado hook-template.hbs. Dentro dele teremos o template do nosso código. Você pode escrever do jeito que quiser.

import { useState, useEffect } from 'react';

export function use{{nomeHook}}(){
	const [value, setValue] = useState(null);
	
	useEffect(() => {
	
	}, []);
	
	return value;
}

Então criamos aqui uma estrutura genérica para um React Hook. Esse é o conteúdo que o Plop.js vai colocar no arquivo que for gerado. Porém, veja que no nome da função escrevemos {{nomeHook}}. O Handlebars vai trocar essa parte pelo nome da nossa variável. Ou seja, se o usuário escrever Scroll, teremos uma função com o nome useScroll().

Por fim, para fazer esse arquivo ser gerado, vamos escrever nossa action.

	...
	actions: [
		{
			type: 'add',
			path: 'src/hooks/use{{nomeHook}}.js',
			templateFile: 'plop/hook-template.hbs'
		}
	]
	...

• Como queremos criar um novo arquivo, o tipo da ação deve ser add.
• Em path indicamos o caminho do arquivo e seu nome. Note que colocamos {{nomeHook}} para que seja trocado pela nossa variável. Assim o arquivo será criado com esse nome.
• templateFile indica o arquivo com a template que será usada para inserir conteúdo no arquivo a ser criado.

Executando o Plop.js

Finalmente, basta executar o comando npm run plop. Como só temos um gerador, ele vai iniciá-lo automaticamente. Vamos dar ao nosso hook o nome Scroll.

Assim que você pressionar Enter, o arquivo do jeito que queríamos será gerado, como você pode ver na imagem abaixo:

Formação Desenvolvedor React

Conhecer a formação