All-in-one devtool to automatically analyze, search and visualize project modules and dependencies from JavaScript, TypeScript (JSX/TSX) and Node.js (ES6, CommonJS)
The goal is to rebuild the application from scratch to add a lot of features and DX improvements, but also enhance maintainability and reduce complexity.
The Graph network would still remain the central piece of the application, but a lot of data collected by skott is still not leveraged.
Currently, I'm thinking of adding 6 sections:
[X] Summary section: visualize global stats (as it was done in the previous version but in a better way) + listing npm (+ show unused dependencies) & node.js dependencies (if flags were enabled)
[X] File Explorer section: visualize files à la VS Code using a file explorer that would allow you to browse files, filter files and interact with them (focus on file, isolate file, etc)
[X] Graph Configuration section: configuring the graph, changing the layout mode allowing to draw graphs differently based on user choice (hexagonal architecture -> hierarchical layout) as it's too complex to do it automatically. But also changing nodes colors, nodes spacing, etc.
[X] Dependencies Explorer section: section focused on displaying dependencies of the graph either they are internal (cycles), external (third-party) or builtin (native to the Node.js platform).
[ ] Cycles Explorer section: section focused on cyclic dependencies that allows you to filter out cycles and better see what's the composition of each cycle, using the Network only we can't distinguish sub-cycles
[ ] Interactive Playground section: focused on graph traversal, filtering dependencies starting from nodes, etc. This would allow a user to say isolate one file and draw me all it's deep dependencies or isolate one file and draw me all files that depend on it.
Revamp has released in skott-webapp@2.0.0 (shipped with skott@0.31.0).
Missing features still to be implemented are:
[ ] Cycles Explorer section: section focused on cyclic dependencies that allows you to filter out cycles and better see what's the composition of each cycle, using the Network only we can't distinguish sub-cycles
[ ] Interactive Playground section: focused on graph traversal, filtering dependencies starting from nodes, etc. This would allow a user to say isolate one file and draw me all it's deep dependencies or isolate one file and draw me all files that depend on it.
Started in #72
The goal is to rebuild the application from scratch to add a lot of features and DX improvements, but also enhance maintainability and reduce complexity.
The Graph network would still remain the central piece of the application, but a lot of data collected by skott is still not leveraged.
Currently, I'm thinking of adding 6 sections:
isolate one file and draw me all it's deep dependencies
orisolate one file and draw me all files that depend on it
.Here is a preview of the UI: