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)
Wow, this is amazing stuff, Jack 😮
May I ask how you were able to find the dependencies between codes and files?
I get the dependencies with "dependency-cruiser" which uses the parser "acorn" to infer dependencies. Essentially it comes from the analysis of AST.
Thank you, Jack.