mkRComponent...the React Component Template CLI tool

Hey bud bud, I hope you are keeping well. I have been working on a project for the past wee while, and I would like to share it with you.

TLDR: I have made a small cli tool that builds out react component templates that you can then just dive into and start coding away... Also I ran the numbers, and you would be amazed at how many ex-presidents I can save you...

The Preamble

I was merrily making my way through learning about the React framework, when I got really frustrated, at the most basic of all things. Making React Components.

What was happening was I kept making basic spelling mistakes and I was getting confused with the different types of react components I was coming into, not only that it took me a good few minutes everytime I wanted to have a new component, to write one up.

Basically the lazy in me got pissed off that I was doing the same thing over and over again. See we bears have certain rules, one of them being: we try not to sweat to much when doing work. This labourious and time consuming process was starting to, and I'm only really learning about it atm, annoy me...

That is something that makes a fuzzy bear turn a bit grizzly.

So in wanting to keep with the way of the fuzz began pontificating over it, and that is where the lightbulb went, 'Why not just automate the **ing thing,' my apologies, alot of my appliances have learnt to swear back to me.

Having no real idea other than an upset lightbuld telling me to automate a process that; 1) Im not to really comfortable with, (2) how would I even, automate automate something.

Ideally, and most practically would be through a cli, all you do is bob in the command and bap in the name and bobs your monekys uncle, you've got the component, in its own wee folder with its own wee stylesheet, all ready written out for you, ready to go.

So this idea of how it would work, in theory, if that fantasy could even be suggested as such. Kinda gave me a small inkling on where to best proceed. After all at this point and every point onwards I am not just clueless and lost, but now Im way beyond the comfort of the woods.

Painpoints

I do want to write more about the process that I went through, not only to help therapeutically and stave of some of the trauma that I have gathered from the experience, but to share some of the cool little tricks and tidbits that I have picked up on my way. Things like Dynamic imports over Static, making a npm package etc. So I will save all that write up for another time.

I will instead share some painpoints that I did come into. One was when I was trying to get strings to interpolate with a value. And that is where I came into a reminder of the most basic lesson of all, the difference between execution and contextual phases. My pig-headed approach was to use researched and prewritten strings that I would interpolate with the name value that is passed in.

That would be half the job right there if I could do that. Turns out, string interpolation happens at the execution phase, and when you go to say save that string to a file, it doesnt get filled in with the value. This is where the blessed stackoverflow comes in. After many a while, I found a very clear expaination to my problem, and a very simple and elegant solution. This then became the backbone to my template engine. I was now able to pass in placeholders into the string templates and then have them placed into the text, before the file was saved.

That was a nice goal before half time. By having my template engine, I was then able to structure my templates into standalone files. But then came the next problem, what type of files should I research and writeup?

Searching through the codex, I managed to gather a standardised template for the variety of components out there. It was at this moment, given the amount of research I had in front of me.

I made the decision, that I would make this into a serious application that I could then give back to the community. To help other potential lazy bastereds, the trouble of going through the same old rigour, component after component.

So I made them all, I wrote files for both React Class based Components and Functional Components in both JSX and TSX, I even added links to stylesheets, added React Test files. Was told about storybookjs, and how important that is becoming in making up components. Then being a big fan of JSDoc's, I thought then maybe some people wouldnt want to have comments on their documents. Then I made up comment free templates.

Half-time was a lot of work.

Now the last painpoint I wish to discuss, but again its one that I will like to rant about on in full, but in another post. Its the way general documentation is written. I spent 3 days with a migrane after staring at the nodejs documentation. I mean at this point I was doing everything, squint eyes, handstands, glancing at it and quickly turning away from it, googling which dei ty to pray to.

If I was to say the problem of being extremely hard to read, and even more difficult to digest than a tolstoy novel was a feature that only applied to the nodejs docs, I would be sorely misleading you my friend. It is more prevailent than the common cold. Like I said, I can rant on this one subject for a while.

But I would suggest, try not writting them as if the reader also maintains 3 masters 2 phd's and is a preeminent nobel lauret in computer science. Because the truth is, these woods are filled with alot of simple and easy going critters, some are as thick as the trees themselves and some are even thicker still.

See we bears get it, to have an easy life sometimes you need to suffer a bit. By this point I had managed to achieve most of my ambitions of this small little application.

The lightbulb and other appliances were also happy. I had managed to cobble and piece together an application that did automate the labourious, tedious effort away.

Ladies and Gentle Bears, I present to you:

npm install mkrcomponent --save-dev

This cli utility application can be found on npm. It lives over in a repo in github.

How it works

First install the package to your dev dependency. Then run:

npm run mkrinit

This then runs a setup, where it would gather your user preferences. Remember how I mentioned that I had created a various number of different templates, this is really the reason why. Given the different types of ways you can write these I wanted the user to be able to also change their preferences as they go. Trying to make the application flexible, to do this I had it create a configuration file in the root of your project, that contains your saved preferences.

From this file the prgram will then automatically make the files that you want with your component file.

For more information, visit the repo's readme page where I have explained in some more detail the in's and out's of using and configuring the setup.

Here comes the Fuzz

Now to see the magic happening, enter:

npm run mkrcomp <name>

Here the <name> argument can take many many many terms. I again, didnt wish to restrict you on what you want to name your component. This input is sanatised and then convereted to PascalCase. It is then injected into the templates and then saved to disk.

Notice in this example that it took 32ms to create the 5 files within its directory. This is typical, the most it takes is just over a tenth of a second, to make a possible 7 files for a single component.

Inadeverntly I had acheived some exceptional time preformances. This then lead me to running the numbers.

Lets say you average a very impressive full minute to create a single component file. Being very generous with ones ability, and assuming that you are paid with an old mans head on the note, for the sum we would be assuming an average hourly wage of $15ph which is an arbitray number, ( I have done no real research into this at this point, it was a bernie guess). Save for the time it took you to make the five files in the example above it would of cost you $1.25, for your 5 minutes of repetaitive labour.

Now that doesnt seem much, however, one could then make say 100 components in their working day, if they spent a ful 8 and a half man-hours doing that only that, would be $127 dollars a day of effort, just spent writing out react components.

Lets take a comparison with mkrComp, using a more lenient average time of operation to be 0.1secs or 100 ms, (which it really doesnt take but still, when your tossing a bone) it would effectively cost a staggering $0.25 to make the same number of files, saving you a full dollar, over the course of a 100 components, which it could make in under 2 mins if it was stuck on a loop, a bit longer if it was manually entered. This is a grand total of $2.50 per 100 components, compared to $127 of your energy being wasted.

Imagine saving over the course of making 100 components you saved yourself $125. That arbitrary representation of your wealth and time and how much it costs when you waste it. So if you feel like trying out my little cli tool, it will save you time and money, like I said my friend, I had a gift for you.

Now if you have any problems, questions or queries. Please dont hesitate to get in touch with me directly. I do hope you use it and it does bring you some benefit to your daily developer experience, when you are working with react.

Kindest wishes