antoine-coulon / skott

All-in-one devtool to automatically analyze, search and visualize project modules and dependencies from JavaScript, TypeScript (JSX/TSX) and Node.js (ES6, CommonJS)
MIT License
624 stars 24 forks source link

Feature request: call graph #132

Open Klemensas opened 7 months ago

Klemensas commented 7 months ago

Hello, nice tool, thank you for that ๐Ÿš€

Summary

Would you consider extending the library to support call graph visualizations for specified entry points?

Details

Would you be for making this tool a more generalized one, to cover a broader range of use cases?

I understand that currently, the emphasis is on dependency handling, which works great (besides marking TS type imports as cyclical). For my use case, I also need an advanced tool for visualizing call graphs, ideally with dynamically configurable entry points. A cursory search for what's available didn't show anything promising, and I'm thinking of building something for myself, using largely similar things that are used here - estree and mermaid. But maybe it could be a feature of skott.

Standard questions

Please answer these questions to help us investigate your issue more quickly:

Question Answer
Would you consider contributing a PR? Potentially (I would like to contribute but have limited capacity)
antoine-coulon commented 7 months ago

Hello @Klemensas, thanks for the feedback.

Would you be for making this tool a more generalized one, to cover a broader range of use cases?

Yes, sure thing but it depends on the use case. Many things could be exposed by skott to hook into the core and extend its range of features, but skott was thought to be centered around dependencies and for now there is no further static analysis within the script to know how dependencies are used, at least in the core, but that could be done through plugins.

Would you consider extending the library to support call graph visualizations for specified entry points?

Could you please provide me examples of static call graphs and how this would be useful? I'm aware of call graphs but mostly dynamic ones, that could be done at the runtime level. Statically this would be hard as you would need to trace all branches of code and all that, I'm not sure what type of information we could extract from it.

For now, skott only keeps the information of the module Import Literal (the imported module) to establish relationships, but does not keep what is imported from the module that is all the Imports Specifiers (import {ย identifiers } from "./module"). Then another problem arises which is determining if the identifier is used within the imported module. All that depends on how far we would want to go. To be honest, even outside of the scope of static call graphs I feel like it would make sense to add additional information of what is imported and not only keep the information of "from where" its imported.

Let's take a small example

a.js

import { someFunction } from "./b.js";

For now, skott only keeps the information of "a.js" importing "b.js" hence creating a->b dependency. When walking the AST we could also capture associated identifiers. But from that you won't be able to determine a precise call graph, as I said for now there is only an analysis around Import Declarations, but they are not followed. Consequently this is the only thing that would make sense within the core itself.

For your specific use case we could discuss is providing inversion of control for the entire script in addition to the module resolution part that can be already done. That way, skott would help you traverse all the module tree starting from the entrypoints and then you would have to do the work on your own using your own plugin that would have access to the entire graph context.