DEV Community

Jack Woods
Jack Woods

Posted on

CodeRoad, make it easier to read code

When I was going to read the source code of vuejs. It made me frustrated because of the complicated dependence relationship. Thus I want to make a tool to solve this, making it easier to read the code, both the structure and the detail.

I found a little of solutions about dependence analysis like madge. However, many of them just produce a graph of the dependence. And the graph will become quite messy when the project is huge. I need an interactive way to optimize this. Then I made this cli tool "coderoad". A preview is below. And there is a live demo here (which is the codebase of the project itself).

I describes it as "A way to view codebase based on dependence analysis". It supports JavaScript, TypeScript, ES6, CommonJS, AMD. It analyzes the dependence relationship with "dependency-cruiser", and draws the graph with "d3". The front-end is built with "react". It now support several basic functions, for example to adjust the depth of the dependency graph and toggle to show the dependencies or dependents. You can try it in the demo.

I'll make further efforts to make it better. Greatly appreciate to the feedbacks.

Find more in the repo

Top comments (3)

Collapse
 
dance2die profile image
Sung M. Kim

Wow, this is amazing stuff, Jack 😮

May I ask how you were able to find the dependencies between codes and files?

Collapse
 
waningflow profile image
Jack Woods

I get the dependencies with "dependency-cruiser" which uses the parser "acorn" to infer dependencies. Essentially it comes from the analysis of AST.

Collapse
 
dance2die profile image
Sung M. Kim

Thank you, Jack.