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 para nos ajudar a criar nossos templates!
O hygen utiliza de templates com EJS 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.
# 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
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
---
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:
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" 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 da documentação do hygen!
vamos testar então
Para testar, basta você digitar no terminal na pasta principal do seu projeto:
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:
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:
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!
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!
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 com 4 camaradas que podem te ajudar:
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!
Top comments (0)