Introdução
Na criação de novos componentes e módulos dentro de uma app React, normalmente se segue um padrão de projeto, de estrutura de pastas e tipos de arquivos. Partindo da criação de um novo componente, pode-se proceder por exemplo das seguintes formas: duplicar as pastas e arquivos de outro componente presente na app, renomeando os nomes dos arquivos, atualizando imports e substituindo código para corresponder as definições do novo componente ou criar as pastas e arquivos na mão. Mas como seria possível melhorar a eficiência desse processo de criação de um novo componente para ser menos manual?
Hygen
Hygen é uma lib de geração automática de código, a qual a partir de definição de templates permite a geração de arquivos e definir o local dentro da aplicação que esses arquivos serão criados.
Setup
Para adicionar o Hygen na aplicação é necessário rodar o seguinte comando:
yarn add --dev hygen
Para iniciar o Hygen no projeto:
npx hygen init self
Ele vai gerar uma pasta _templates onde estarão duas pastas com alguns arquivos iniciais para uso do Hygen. Nessa pasta _templates será onde definiremos os templates para geração de arquivos.
A seguir será necessário criar um gerador de código a partir do seguinte comando, onde no lugar de nome_do_gerador é colocado o nome que representa ele (por exemplo pode ser colocado component para um gerador de componentes):
npx hygen generator new nome_do_gerador
Esse comando vai gerar uma estrutura de pastas _templates/nome_do_gerador/new, com um template inicial de exemplo. Dentro de nome_do_gerador/new, será definido todos os templates que serão usados ao executar o gerador no terminal. O template inicial (hello.ejs.t) de exemplo vem com o seguinte código:
---
to: app/hello.js
---
const hello = ```
Hello!
This is your first hygen template.
Learn what it can do here:
https://github.com/jondot/hygen
```
console.log(hello)
Onde to: define o local que o novo arquivo será criado e abaixo dele está o código que vai ser gerado. Todos os arquivos de template seguem o padrão nome_do_template.ejs.t.
Para rodar o gerador e criar novos arquivos a partir dos templates definidos dentro dele, sugiro criar em package.json um script para execução de hygen nome_do_gerador new, segue um exemplo partindo de um gerador com nome_do_gerador igual component:
"scripts": {
(...),
"create-component": "hygen component new"
},
Para execução do gerador seria executar:
yarn create-component
Após executar esse comando, todos os templates dentro de component/new irão gerar novos arquivos.
Além de criação de novos arquivos o Hygen permite a injeção de código dentro de arquivos já existentes, para isso o to: tem que estar definido com o caminho de um arquivo já existente dentro da app, dentro do template tem que definir inject: true e para especificar o lugar para injeção uma das formas é definir a linha a ser incluída a adição de código at_line:, seguindo a estrutura abaixo:
---
inject: true
to: caminho_de_arquivo_existente
at_line: 0
---
Também é possível passar um valor dinâmico dentro dos templates colocando <%=name%>, tanto na definição do código a ser gerado quanto na definição do lugar do arquivo. Segue um exemplo abaixo de uso na definição do lugar do arquivo:
---
to: src/components/<%=name%>.js
---
Partindo do exemplo de um gerador com nome component, ao executar o comando yarn create-component Input, o <%=name%> do template acima vai ser substituído por Input e o arquivo desse template será gerado em src/components/Input.js.
Exemplo de execução
Agora vou apresentar um exemplo de execução do Hygen para gerar um novo componente, a ideia é mostrar o funcionamento de criação de arquivos e injeção de código em arquivo existente. Vamos partir de uma app que tem a seguinte estrutura:
Onde em src/components/Tag/Tag.js tem-se a definição do componente:
import React from "react";
const Tag = ({(...)}) => (
<div>
(...)
</div>
);
export default Tag;
Em src/components/Tag/Tag.test.js os testes:
import React from "react";
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import Tag from "./Tag";
describe("<Tag />", () => {
(...)
});
Em src/components/Tag/index.js o export dentro da pasta do componente:
export { default } from "./Tag";
Em src/components/index.js o export dentro da pasta components:
export { default as Tag } from "./Tag";
O primeiro passo é criar o gerador de código, o qual por ser de criação de componente vou chamar de component. Executando no terminal:
npx hygen generator new component
Dessa forma será criada a estrutura de pastas _templates/component/new e um arquivo de exemplo:
Como o arquivo hello.ejs.t não será utilizado, ele será removido e dentro da pasta new serão adicionados os templates.
Para a criação do componente, será criado o template component.ejs.t:
---
to: src/components/<%=name%>/<%=name%>.js
---
import React from "react";
const <%=name%> = ({}) => (
);
export default <%=name%>;
Para os testes o template test.ejs.t:
---
to: src/components/<%=name%>/<%=name%>.test.js
---
import React from "react";
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import <%=name%> from "./<%=name%>";
describe("<<%=name%> />", () => {
});
Para o export dentro da pasta do componente o template index.ejs.t:
---
to: src/components/<%=name%>/index.js
---
export { default } from "./<%=name%>";
Para o export dentro da pasta de componentes, uma vez que o arquivo já existe e tem o export do componente Tag dentro dele, será feito o inject de código com o template componentsIndex.ejs.t:
---
inject: true
to: src/components/index.js
at_line: 0
---
export { default as <%=name%> } from "./<%=name%>";
O <%=name%> vai ser o nome do componente a ser criado, que será definido quando rodar o comando para usar o gerador component.
Vai ficar da seguinte forma os templates definidos:
Para executar o gerador de componentes, vai ser adicionado em package.json:
"scripts": {
"create-component": "hygen component new"
},
Nesse exemplo vai ser criado um componente de botão chamado de Button, para isso ao executar o comando para rodar o gerador será necessário adicionar Button no final, para que todos os templates substituam o <%=name%> por Button:
yarn create-component Button
Mostrando no terminal os três arquivos gerados e o arquivo existente que teve código adicionado dentro dele.
Ficando a estrutura de pastas, arquivos e código da forma definida nos templates.
Conclusão
Por fim, a ideia desse artigo é mostrar uma forma de reduzir trabalho manual no desenvolvimento em React, automatizando parte do processo. Passei um exemplo referente a criação de componentes para ilustrar o funcionamento, mas já me deparei com o uso do Hygen para geração de módulos, que compartilham a mesma estrutura de pastas, tipos de arquivos, configuração de Babel, typescript, dentre outras, acelerando o processo de criação deles utilizando a lib.
Top comments (0)