Como reduzir o "copia & cola" no seu dia-a-dia com Code Generators
Tags: webdev, productivity, programming, react
Published: 2022-12-26 17:10:50

Alguma vez você já notou que existem algumas coisas que você faz no dia a dia como desenvolvedor é repetitiva? não? Exatamente, as vezes a gente nem nota, só faz no "modo automático". Esse post vai te ajudar a melhorar sua produtividade pra algumas tarefas monotonas do dia a dia.

Vou dar um exemplo, criar um componente, vamos supor que em seu projeto sua stack seja um `React + styled components` para criar seus componentes.

Esse é apenas um EXEMPLO, utilizando no contexto que mais estou vivenciando no momento, pensando no FRONTEND, mas, você pode usar para qualquer contexto, backend, c#, php, python e por ai vai!

Neste post, vamos utilizar da ferramenta [hygen](https://www.hygen.io/) para nos ajudar a criar nossos templates!
O hygen utiliza de templates com [EJS](https://ejs.co/) para facilitar o entendimento e criação desses templates.

## Iniciando com Hygen
Primeiramente vamos entender como funciona o Hygen, para isso, vamos criar um **projeto do 0**, bem simples.

```bash
# 1 - criar pasta
mkdir nome-da-pasta-aqui

# 2 - acessar pasta
cd nome-da-pasta-aqui

# 3 - inicialize um projeto
npm init --yes

# 4 - instale o pacote do Hygen
npm install -D hygen
```

Feito isso, agora crie uma estrutura como a seguir:
```
_templates/
└── component
    └── new
        ├── component.ejs.t
        └── prompt.js
```
e os conteudos dos arquivos são:

`_templates/component/new/prompt.js`
```javascript
module.exports = [
  {
    type: "input",
    name: "name", // nome da variável para utilizar nos templates
    message: "Qual é o nome do componente?",
  },
];
```

`_templates/component/new/component.ejs.t`
```typescript
---
to: components/<%= h.changeCase.param(name) %>/index.tsx
unless_exists: true
---
// Hey, esse é meu componente <%= name %>, mas seu arquivo 
// está criado na pasta `<%= h.changeCase.param(name) %>/index.tsx`

const <%= h.changeCase.pascal(name) %> = () => {
    return (
        <>
            <h1>My <%= name %> component is HERE!</h1>
        </>
    )
}

export { <%= h.changeCase.pascal(name) %> }
```

### Entendendo os arquivos

E antes de mais nada vamos entender melhor esses arquivos.

Para começar a utilizar generators\templates, você vai precisar de algumas variáveis, como por exemplo, o nome do componente, pois essa informação afeta onde esse arquivo vai ser criado, o nome dos arquivos e variáveis dentro do código.

Começando pelo `prompt.js`, então ele é simplesmente o arquivo responsável por obter todas as variáveis inicias que precisamos pra gerar um template legalzão! Vale observar que esse arquivo exporta um `array` portanto, caso necessário, é possível adicionar mais perguntas.

Já o `component.ejs.t` é um arquivo dividido em duas principais partes:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zy7j8oop40rwccnwjjf7.png)

O Cabeçalho possui alguns parâmetros de configuração que definem algumas coisas desse template, como destino **(to)**, se vai ser criado apenas se não existir **(unless_exists)**, e existem algumas outras opções que podem ser utilizadas por ai, você pode consultar todas aqui [nesse link sobre "frontmatter and properties"](https://www.hygen.io/docs/templates#all-frontmatter-properties) da documentação do hygen.

Para escrever em tela alguma variável no `EJS` basta você mandar um `<%= nome_da_variavel %>`, onde o `nome_da_variavel` é o mesmo definido no `prompt.js` e pronto! 

Mas olhando aqui no meio do parâmetro `to` no cabeçalho, é possível observar algo um pouco diferente olha só:

`<%= h.changeCase.param(name) %>`

E esse `h` é uma abreviação para `helper` ou em bom e claro portugues um "ajudante" que geralmente aparecem pra fazer algumas coisas e que ~~não sabemos onde enfiar e~~ são utilizados em milhões de lugares no nosso código.

E esse `helper` possui uma função chamada `changeCase` que facilita pra gente a conversão de strings de uma forma bem fácil! nesse caso está sendo utilizado o `param case`, que nada mais é que:
- a transformação do texto todo para `minusculo` +  substituição de todos espaços por `-`.

Por exemplo, se o input da variável `name` presente no `prompt.js` fosse `FooTEr ComPoNeNt`, o resultado dessa transformação utilizando o `h.changeCase.param("FooTEr ComPoNeNt")` será `footer-component`. 

Um detalhe legal, esses helpers podem ser usados em qualquer parte (cabeçalho ou corpo) dos templates.

Você pode conhecer todos as funções do change case helper [aqui nesse link](https://www.hygen.io/docs/templates/#change-case-helpers) da documentação do hygen!

### vamos testar então

Para testar, basta você digitar no terminal na pasta principal do seu projeto:
```bash
npx hygen component new
```
nesse comando acima, temos uma separação relacionando qual o generator e qual a ação será utilizada, lembrando da separação de pastas do `_templates`... se liga:
```
_templates/
└── component // ISSO é o GENERATOR
    └── new   // ISSO é a ACTION
```

Então vamos executar esse comando, para utilizar o gerador `component` e utilizar sua ação de `new`.

Ao executar isso deveria acontecer:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mytirf4029a52m3urr1w.png)

Sua linha de comando está solicitando uma entrada de texto do usuário, lhe perguntando exatamente o que está no `prompt.js`. Nice!

Vamos colocar um `FOOTER` por exemplo, inclusive pode colocar TUDO MAIUSCULO mesmo pra ver se os helpers estão funcionando! hehe.

Ao pressionar um "enter" para confirmar seu input, seu terminal deveria exibir algo parecido com isso:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9ah9ymtizdcpi2fk71u.png)

Exatamente falando as ações que foram realizadas, nesse contexto ele apenas criou um arquivo, seguindo os os paramêtros definidos no arquivo de template.

Nice! Vamos dar uma olhadinha no arquivo gerado!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ychpcrhobtk9d427r6la.png)
Obs: o "sublinhado" de erro é por conta da falta do import do `react` nesse template :)

Mas olha só! se não é um Component já criado com alguns padrões bem simples, no caso, para compreender melhor, faça a comparação entre o template e esse arquivo gerado.

Vou facilitar e deixar o print do template aqui!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aj3tlmh9mnihy6n7alpc.png)

E pronto! Agora, seguindo esses mesmos conceitos, basta adicionar mais arquivos `.ejs.t` dentro da pasta `new` ou, até mesmo criar outra "ação" e ir personalizando como quiser.

Vou deixar aqui agora um exemplo um pouco mais "completo", nesse link aqui do meu github:
https://github.com/MatheusHAS/code-generator/tree/main/examples/react-typescript

Nesse exemplo foi apenas um `Componente`, mas imagina que isso pode ser usado para criar `Slices` dos seus `stores`, adicionar já padronizações e criação de arquivos relacionados a `i18n` e por ai vai!

Ah, o `hygen` não é o único que faz isso, existem outros que fazem tão bem quanto, no caso o hygen tem me servido pela facilidade, mas dependendo do seu contexto de aplicação pode mudar um pouco, então vou deixar aqui um [link do NPM trends](https://npmtrends.com/hygen-vs-plop-vs-slush-vs-yeoman-generator) com 4 camaradas que podem te ajudar:

- [Hygen](https://www.hygen.io/)
- [Plop](https://plopjs.com/)
- [Slush](https://slushjs.github.io/#/)
- [Yeoman](https://yeoman.io/)

Espero que esse conteudo tenha sido útil de alguma forma! :)

---

Esse é um dos meus primeiros posts, então, se viu algo que dá pra melhorar, manda um salve ai! me chama em algum lugar, manda um comentário, um sinal de fumaça ou sei lá! hehe

Minhas redes:
- LinkedIn: https://www.linkedin.com/in/matheusazambuja/
- Github: https://github.com/MatheusHAS

e é isso!
Valeww pessoaR!