Scaffolding for existing frontend projects — Part 1: casex — a library for matching cases

April 05, 2018 0 Comments

Scaffolding for existing frontend projects — Part 1: casex — a library for matching cases



I've been thinking about creating a scaffolding tool for existing projects for a while. Something like rails has, such as rails g model user name age:number role:references , but for the frontend, that works well with ReactJS, which I've been working with quite a lot.

To be honest, I'm trying to "railsify" the frontend toolkit so that it can be more productive. Type less, do more. This has been the center of all the libraries I've published in the last two years, such as Premiere and Form-for.

On this post, I'll talk about my most recent library, designed to be one of the steps towards a package of libraries that combined aims to put React development on the fast lane.

All in one function for transforming word casings

I wanted to create a command that looks like: generate controller john-doe and this command would create a folder called john-doe , and inside this folder the following files:

  • index.js
  • john-doe-controller.js
  • john-doe-controller.test.js

If you're creating this manually it would be pretty easy to do a .toSpinalCase using some library and just make it work. But that's not what I'm aiming for. Javascript projects tend to have very different patterns among themselves. While some may name files like we did above, others may do JohnDoeController and others johndoecontroller .

Creating a tool that only works for one project is definitely not what I'm looking for. So, I want the project to have a set of definitions that can be easily replicated. Let's assume there's a templates folder and inside this folder we'll have another folder called name ; inside of it we'll have:

  • index.js
  • na-mecontroller.js
  • na-mecontroller.js

I think that's simple enough, don't you? If you want to do camelCase instead, you could call them naMeController.js instead. The same would be true for class names inside the file and anywhere else you want to have names.

I created a demo to show the most common patterns applied using casex

The code and documentation are available at

This library by itself is pretty cool, but I believe it will be even nicer as part of the scaffolding tool that's coming.

Tag cloud