Como automatizar a criação de arquivos e códigos padrões em JS para seu projeto.

Fala dev!

Chegou aquela nova demanda — e lá vamos nós criar toda aquela estrutura de pastas para nossa feature, componentes, testes, UI etc. Um processo que, por muitas vezes, pode ser demorado e repetitivo.

Mas você sabia que existem algumas soluções para resolver este problema?

Aqui, na Syngenta Digital, adotamos a lib Plop.js para facilitar esse processo em alguns dos nosso projetos — e, por tabela, ainda documentamos e padronizamos a estrutura de arquivos.

Curtiu? Então vamos no passo a passo!
Além disso, estou deixando um exemplo completo do projeto aqui:

GitHub — RodrigoRafaelDS/plopExample

Basta baixar o projeto e seguir os passos do README.md para testar a lib!

Passo 1 — Instalação

Instale o Plop no seu projeto:

yarn add plop

Plop: Consistency Made Simple

Passo 2 — Estrutura de pastas e arquivos

Crie o template da estrutura de pastas do seu projeto:

Aqui, temos um exemplo com estruturas para arquivos de uma feature e outra estrutura para componentes, contendo arquivos de teste, estilização, componentes, entre outros.

A extensão .hbs é utilizada para podermos acessar as variáveis setadas na CLI.

Passo 3 — Conteúdo dos arquivos

Em cada arquivo, você pode usar os argumentos passados no CLI para preencher campos específicos:

import React from 'react';
import './{{dashCase name}}.styles.less';

const {{pascalCase name}}: React.FC = () => {
return (
    <div className='{{dashCase name}}-header'>
    </div>
);
};
export default {{pascalCase name}}Header;

Nos casos acima, name é o argumento passado com o nome do componente para a CLI, que pode ser acessado usando usando {{ }}, além disso, podemos aplicar formatações para a forma na qual estes nomes serão escritos, como pascalCase, dashCase etc. Os detalhes estão documentados em: https://plopjs.com/documentation/#addmany

Passo 4 — Scrip do CLI

Crie o arquivo plopfile.js na raiz do seu projeto. É esse script que irá coletar as informações necessárias para criar os arquivos.

Através da função plop.setGenerator, podemos definir os inputs do nosso prompt e, com base nas respostas do usuário, setar os nomes dos arquivos e o caminho para o local dos mesmos.

...

module.exports = plop => {

...

  plop.setGenerator('component', {
    description: 'Create a component',
    prompts: [
       {
        type: 'list',
        name: 'type',
        choices: ['feature', 'component'],
        message: 'Select feature or component: '
       },
       {
        type: 'input',
        name: 'name',
        message: 'What is your feature name?'
       },
       {
        when(response) {
         return response?.type === 'component'
        },
    
        type: 'input',
        name: 'componentName',
        message: 'What is your component name?'
       }
      ]

...

Aqui, podemos notar que o primeiro input do terminal é um select entre criar uma estrutura de feature ou de componente, depois, coletamos o nome da feature e, caso a opção selecionada seja criar um componente dentro da feature, perguntamos também o nome do componente.

Passo 5 — Crie as actions

Dado que coletamos os dados necessários para criar nossos arquivos, chegou a hora de gerar os arquivos.

Para gerar os arquivos, passamos uma lista objetos, onde cada item representa um arquivo a ser criado.

[
 {
    type: 'add', // referência para adicionar um novo arquivo
    path: 'src/page', // caminho de destino do arquivo
    templateFile: 'template/file.hbs' // caminho do template do arquivo
 },
...
]

Segue abaixo um exemplo para criar os arquivos tipo tsx, test.tsx e styles.less.

const componentTypeFiles = ['tsx', 'test.tsx', 'styles.less']
  return componentTypeFiles.map(typeFile => {
   return {
    type: 'add',
    path: `${localePath}.${typeFile}`,
    templateFile: `plop-templates/component-example/component-example.${typeFile}.hbs`
   }
  })
 }

Note que o template file aponta para os seguintes arquivos:

Com isso, finalizamos nossa implementação!

Agora o seu projeto possui automações, além de uma documentação das estruturas de seus arquivos!