How and why I built react-project-graph - A tool for mapping out component relationships

About me

My name is Hendrik,
and I've been a front end developer for the last 7 years. Starting out in the casino industry by creating
games and other stuff around it. I recently ventured into the world of web based front ends. Mostly with React so I am still learning a lot, and I try to do my best to keep up with all the crazy stuff the JavaScript world has to offer.

The problem I wanted to solve

While on my current project and on this quarters OKR which is to speed up the performance of the front end. I got curious to see how tangled our components have gotten over time. So I started looking for a tool that could generate one of those nice dependency graphs or scene graphs I am so used to from making games. You know those where you see which Class is importing stuff from where and then mapping everything nicely to find out if you have any duplicates or anything that needs to go somewhere else.
It also helps to understand the sheer size of a project, that might not occur if you just stare and that neat
folder structure.

What is react-project-graph - A tool for mapping out component relationships?

This tool although right now in a pretty basic state, will generate a so called DOT-String that resembles the relationship between your react components. It will generate these relationships by parsing the import statements at the top of each file. And then generating a string based on the imports in the following format Class -> Imported Class this will show the dependency from the current read file with a class towards another class/file. If there is no class exported in the current file it will use it's file name.
Which is not perfect and I am working on it

In it's current CLI-state it will save that result into a text file and you can use it in whatever program supports DOT-Syntax to show dependencies.

Given that it's not 100% perfect yet, but I am still pretty happy that it worked on my current projects.

Tech stack

Node.js - Because it's very easy to develop something in it, and by now it's pretty fast
Regular Expressions - In order to parse the import statements efficiently
VISjs - To visualize the generated dependency graph in a later stage
ReactJS - To create a usable interface for the whole thing, so that it can be hosted on a server
VanillaJS - Why not?

The process of building react-project-graph - A tool for mapping out component relationships

Well it all started out as a challenge for my lunch break, I was like 'Ok what can I actually create within a one hour lunch break'.
I started of by creating some RegEx to get me the bits of the import statement that are of interest for this tool ( Imported Class and from where). The next step was to make sure that the file tree is traversed until the end. For this purpose I made some helper JavaScript classes that deal with deciding if something is a file or a folder.
If it's a folder it got shoved into a new Class instance which does the same thing again, if it was a file well then it got parsed and the results stored inside an array of objects.
The final part was to stitch everything together as a DOT valid string. For that purpose I equipped the classes that are holding the file information with a function to return their dependencies as a DOT string in the format of: Class -> Import.

And the folder classes had the same logic, but theirs was basically just to concatenate the strings of the files together into one larger version of a DOT-String.

At the end everything is bundled and saved to a .txt-File inside the project folder.

Challenges I faced

Relearning how to write proper RegEx was properly the most time consuming task about this tool.
And also on how to organize the structure of the folder and files to be able to generate this string nice and easy, while still have a high performance.

Key learnings

Since I am still working on it, and I don't consider any project to be ever done (Only obsolete). I would say for me it's that it's actually impressive what you can create in one hour give or take 10 minutes. When you really focus your mind onto something. And I will do that more at work from now on.

Tips and advice

Keep your RegEx KungFu stable, and relearn that once in a while. Even though we feel it's complicated and useless. It's actually pretty useful and I already know a few places in other projects where I can put my relearned skills to the test.

Final thoughts and next steps

I want to release this small thing as an npm pckage at some point, so that other people can use it to create component maps of their apps. Either for fun, or out of the same reason that I wanted to do it.
I also plan on hosting it on some AWS server in the future so that it can be run on demand by everyone.
I definitely had a blast creating this, and I will continue to work on it until I am completely satisfied with what it can do.
Find it here: react-project-graph