callgraph

TypeScript, JavaScript and Vue call graph

callgraph parses JavaScript, TypeScript and Vue single-file components with oxc and gives your agent modules, functions, classes, component props and emits, template usage and every call by category — plus who uses a function, component, route or translation key across the project.

Install Use it over MCP

What callgraph extracts

Files: .js .mjs .cjs .jsx .ts .tsx .vue.

  • Modules, functions and classes; TS interfaces and the implements of classes.
  • Imports with alias resolution from jsconfig.json / tsconfig.json (the @/ alias too).
  • Functions inside object literals as their own methods: const api = { fetch() {} } → api.fetch.
  • if / switch branches, string literals and template literals.

Vue single-file components

A .vue file is a component. Its "methods" are what an agent needs to navigate it:

  • setup — the top-level code of <script setup>.
  • template — the components used, event handlers, $t() and route() calls.
  • Functions, computed, watch@L<n> / onMounted@L<n> hooks, a composable's inner functions (useX.inner), and the Options API methods / computed.x.
  • Props are listed as properties, emits as emit:<name>.

Calls carry categories such as vue_api, composable_use, component_use, vue_emit, inertia, i18n_helper, route_helper (Ziggy), http_call (axios), module_use and package_use.

Who uses this function, component or key?

The same --grep switch understands frontend-specific keys:

CG=~/.claude/skills/callgraph/callgraph.sh
bash $CG --project myapp resources/js --grep 'useForm.js::submit'     # <file>::<export>, with import resolution and the @/ alias
bash $CG --project myapp resources/js --grep 'route::orders.show'     # route usage
bash $CG --project myapp resources/js --grep 'i18n::orders.title'     # where a translation key is used
bash $CG --project myapp resources/js --grep 'vue::emit:save'         # who emits 'save'
bash $CG --project myapp resources/js --grep 'Atoms/AtomButton.vue'   # where the component is used
bash $CG --project myapp resources/js --grep 'api.fetch'              # object-literal method

--strings also finds texts inside Vue template expressions ({{ … }}, :title="…", @click="…").

TypeScript: calls through typed objects

When the type is written down, callgraph works out which class a method call goes to: a typed parameter (repo: Repo), a typed class property (private repo: Repo, also constructor(private repo: Repo)), this.repo = new Repo() or const x = new Repo(). So this.repo.find() shows up as Repo::find, and --grep 'Repo::find' finds it. Calls made through an interface are marked via Resolver.

bash $CG --project myapp resources/js --grep 'PlaylistResolver::getPlayables'

When the type is unclear — no type, any, a union like Repo | null, a generic T — the call stays unresolved; search those by name: --grep '(^|::|\.|->)find$'.

Limits

  • Dynamic calls such as obj[key]() and components registered at runtime cannot be resolved statically.
  • defineProps<Props>() with a referenced type name lists no props (the type is not resolved).