Clingon: A Ferramenta CLI para Geração de Recursos

Version for native English speakers

Site oficial: clingon.dev

Nós, desenvolvedores, sempre buscamos simplificar as coisas e evitar ao máximo o trabalho chato e repetitivo. Fazemos isso em nossos projetos usando recursos globais, criando bibliotecas internas e externas, ferramentas, e qualquer coisa necessária para tornar nossas vidas mais fáceis.

Hoje, quero falar um pouco sobre esse assunto e como esse espírito me levou a criar uma ferramenta para nos ajudar no dia a dia.

Breve História

Quando comecei a trabalhar com Frontend, tive contato com alguns frameworks. No Vue, achei incrível a CLI para criar projetos, que oferecia muitos recursos prontos. Era só gerar o projeto e começar a codificar. Na CLI do Angular, você podia criar serviços, componentes, pipes, módulos e muito mais com poucos comandos. Eles já vinham com testes, arquivos de estilo, imports nos módulos, etc.

Quando comecei a trabalhar com React alguns anos depois, senti falta de uma ferramenta que facilitasse essas tarefas, especialmente quando temos muitos arquivos para um único componente.

Na época, até procurei algumas ferramentas, mas eram poucas e a experiência de uso não era boa. Acabei não usando-as no meu dia a dia.
Em conversas com amigos, por volta de 2020 ou 2021, discutimos a ideia de criar algo assim, cheguei a começar a criar algumas coisas, mas o projeto não avançou.

O Começo de Tudo

Inspirado por simplificar tarefas do dia a dia, em um projeto no trabalho que iniciamos no ano passado, criei alguns snippets para o VS Code. Foi um começo, mas ainda era necessário criar muitos arquivos manualmente.

Então tive a ideia de criar um shell script que simplificasse a criação de recursos no projeto. Ele gerava os arquivos necessários, já com o código básico pronto para começar a programar. O projeto usava Next.js, e o script permitia criar páginas dentro da estrutura do Next, componentes com seus testes, stories e arquivo index. Também era possível criar hooks com a estrutura adequada.

Depois disso, um colega de trabalho me perguntou: por que não criar algo em JavaScript que fosse extensível e pudesse ser usado em outros projetos sem muito esforço?

Essa era uma vontade que eu tinha há anos. A partir daí, comecei a projetar uma ferramenta nova para alcançar esse objetivo.

Assim nasceu o Clingon.

Mas O Que é o Clingon?

O Clingon é uma biblioteca CLI (Command Line Interface) que auxilia na criação de recursos em um projeto. Ao invocar a ferramenta, você tem a opção de criar vários elementos (inicialmente limitado a Funções, Componentes e Páginas, mas será expandido ao longo do tempo), tudo pronto para começar a desenvolver, economizando tempo e evitando ter que copiar conteúdo de outros arquivos ou usar snippets de terceiros (caso você não tenha os seus próprios), e mesmo que tenha seus próprios, não precisa se preocupar com os arquivos.

Como Usar

Você pode executar a biblioteca usando o NPX do Node.js e invocar o comando gen da seguinte forma: npx clingon@latest gen. Ou você pode instalá-la globalmente via npm: npm i -g clingon.

Por enquanto, apenas o comando gen está disponível. Futuramente, mais opções serão adicionadas.

Nota: Ao instalar globalmente, certifique-se de que seu sistema operacional permite a execução de scripts npm com privilégios. Caso contrário, poderá ocorrer um erro. Se isso acontecer, use o NPX, que funcionará.

Observações

Devemos nos atentar ao fato de que a ferramenta ainda está em estado beta, em desenvolvimento, portanto, podem surgir bugs, falta de funcionalidades ou comportamentos inesperados. Se você identificar algum desses problemas, por favor, abra uma issue e me ajude a corrigir. Contribuições são bem-vindas (seguindo as diretrizes de contribuição; caso contrário, os Pull Requests não serão aprovados).

Os recursos disponíveis no momento incluem:

• Criação de componentes e páginas para Vue e React
• Criação de funções com JavaScript ou TypeScript
• Escolha da abordagem de CSS
  • SCSS
  • Tailwind com @apply ou direto nas classes
  • CSS Modules
  • CSS padrão
• Geração de arquivos de teste:
  • Escolha do sufixo .spec ou .test
  • Adição da Testing Library nos testes (para componentes ou páginas)
  • Escolha do framework de teste: Jest ou Vitest

Considerações Finais

Espero que o Clingon seja útil no seu dia a dia e que simplifique seu fluxo de trabalho e sua experiência de desenvolvimento. Peço que, se possível, publiquem issues com bugs encontrados, sugestões de melhorias ou contribuições para a ferramenta.

Preview

Exemplo do fluxo de criação de um componente Vue com tailwind e testes