is there some treesitter or code analysis tool that gives me a graph of my react codebase with which components render which other components? i'm thinking like - finding component fns, looking at their jsx elements ast nodes, connecting it all in a graph. maybe this exists? - ThreadSky

About ThreadSky

macwright.com • 28 days ago

is there some treesitter or code analysis tool that gives me a graph of my react codebase with which components render which other components?

i'm thinking like - finding component fns, looking at their jsx elements ast nodes, connecting it all in a graph. maybe this exists?

Comments

davidcrespo.bsky.social•28 days ago

problem is it can change at runtime. but I suppose the tool could assume a non-evil codebase

davidcrespo.bsky.social•28 days ago

I almost want to say you’d have an easier time spamming UI interactions and analyzing the component tree in the browser at runtime than analyzing the code

just-be.dev•28 days ago

You could still get pretty far w/ import analysis. Doesn't really tell you if it's used, but it at least tells you if it's accessed.

davidcrespo.bsky.social•28 days ago

that's true. though it doesn't tell you which of multiple components in a file uses the import

stevage.bsky.social•27 days ago

I keep wanting something like this built into VS Code just as an easier way to navigate codebases. I'd love to be able to see the component I'm working on, and the context around it: its parent, its grandparent, its siblings...
Even worse with Svelte and near identical filenames.

macwright.com•26 days ago

https://github.com/tmcw/ctree

made a crappy prototype. uses oxc, so it's ultra-fast, but it's also fairly dumb - is relying on unique component naming, and i am pretty sure it'll break with memoized components, and also i want it to differentiate between modules in npm deps vs not

Posting Rules

Be respectful to others
No spam or self-promotion
Stay on topic
Follow Bluesky's terms of service

Comments

Posting Rules

Reply