DEV Community: Isac Petinate

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

Isac Petinate — Mon, 29 Apr 2024 11:56:47 +0000

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

Clingon: The CLI Tool for Resource Generation

Isac Petinate — Mon, 29 Apr 2024 11:54:48 +0000

Versão em Português do Brasil

Official website: clingon.dev

We, developers, always strive to simplify things and avoid as much tedious and repetitive work as possible. We do this in our projects by using global resources, creating internal and external libraries, tools, and anything necessary to make our lives easier.

Today, I want to talk a bit about this topic and how this spirit led me to create a tool to help us in our day-to-day work.

Brief History

When I started working with Frontend, I had contact with some frameworks. With Vue, I found the CLI for creating projects amazing, offering many ready-made resources. It was just a matter of generating the project and starting to code. In Angular's CLI, you could create services, components, pipes, modules, and much more with a few commands. They already came with tests, style files, module imports, etc.

When I started working with React a few years later, I felt the lack of a tool that made these tasks easier, especially when we have many files for a single component.

At the time, I even looked for some tools, but there were few and the user experience wasn't great. I ended up not using them in my day-to-day work.
In conversations with friends, around 2020 or 2021, we discussed the idea of creating something like this, and I even started to create a few things, but the project didn't progress.

The Beginning of It All

Inspired by simplifying day-to-day tasks, in a work project that we started last year, I created some snippets for VS Code. It was a start, but it still required manually creating many files.

Then I had the idea of creating a shell script that would simplify the creation of resources in the project. It generated the necessary files, already with basic code ready to start programming. The project used Next.js, and the script allowed creating pages within the Next structure, components with their tests, stories, and index file. It was also possible to create hooks with the proper structure.

After that, a colleague at work asked me: why not create something in JavaScript that would be extensible and could be used in other projects without much effort?

This was something I had wanted to do for years. From there, I started designing a new tool to achieve this goal.

Thus was born Clingon.

But What is Clingon?

Clingon is a CLI (Command Line Interface) library that helps create resources in a project. When invoking the tool, you have the option to create various elements (initially limited to Functions, Components, and Pages, but it will be expanded over time), all ready to start developing, saving time and avoiding having to copy content from other files or use third-party snippets (in case you don't have your own), and even if you have your own, you don't need to worry about the files.

How to Use

You can run the library using Node.js's NPX and invoke the gen command as follows: npx clingon@latest gen. Or you can install it globally via npm: npm i -g clingon.

For now, only the gen command is available. In the future, more options will be added.

Note: When installing globally, make sure your operating system allows npm scripts to run with privileges. Otherwise, an error may occur. If this happens, use NPX, which will work.

Observations

We should be aware that the tool is still in beta, in development, so bugs, missing functionalities, or unexpected behavior may occur. If you identify any of these problems, please open an issue and help me fix it. Contributions are welcome (following the contribution guidelines; otherwise, Pull Requests will not be approved).

The available resources at the moment include:

Creation of components and pages for Vue and React
Creation of functions with JavaScript or TypeScript
Choice of CSS approach
- SCSS
- Tailwind with @apply or directly in classes
- CSS Modules
- Standard CSS
Generation of test files:
- Choice of suffix .spec or .test
- Addition of the Testing Library in tests (for components or pages)
- Choice of testing framework: Jest or Vitest

Final Thoughts

I hope Clingon is useful in your day-to-day work and that it simplifies your workflow and development experience. I ask that, if possible, you publish issues with found bugs, suggestions for improvements, or contributions to the tool.

Preview

Example of creating a Vue component with Tailwind and tests