dev-resources.site

for different kinds of informations.

Clingon: The CLI Tool for Resource Generation

Published at

4/29/2024

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

generator Article's

30 articles in total