React-Project-Graph
Hobby project to create a VISNetwork compatible map of react imported components and files used inside the application.
Current Version
The current version is very basic, so use with caution. It's possible to specify a root folder and get a .txt file with the DOT String in it.
The DOT string can then be imported into whatever mapping tool your have laying around, I prefer VisJS to load up the file and display it inside the browser.
Based on the project size that is scanned, the file might take a while to load in the current version.
Upcoming Ideas
A few ideas I have at the moment is adding support to detect:
- Mark unused imports with a red line
- Mark completly unused files, even when imported with a red node
- Nodes that are imported more than 5 times should be blue
- Nodes that have more than 10 imports should be green
- Mark nodes pink that have mismatching exports/filesnames
How to use
node index.js -p <path to src in your react app>
The dot string will the written to dotstring.txt There is an index.html that has visjs-network setup to load the dotstring by default. I use it with
python -m SimpleHTTPServer