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
Top comments (0)