🔍Visualizing the Calling Hierarchy of React Components in the Browser😊

#react #typescript #plugin #diagram

Introduce

It is very difficult to grasp the whole picture of a component just by looking at the code such as vscode. We often use tools such as Figma to create diagrams and sequences, but this is a very costly process. In order to solve this problem, we have created and released a library to visualize react components as diagrams in a browser. It is still a work in progress, so many considerations may be missing.

Demo

react-component-analyzer is a library that is useful when exchanging PR or design discussions with friends, as it allows you to visualize the component tree as a diagram and discuss it based on a common understanding. It will also help you to understand the scope of impact when you modify the implementation.
I hope it helps you to design better components.

Point

Using the popular library, @typescript-eslint/typescript-estree AST to do the analysis.
By using VSCode's schema in the Browser, you can quickly check the implementation of components you are interested in.
If you are using vite without setting it in the config file, you can resolve the alias from vite.config.ts.
It uses prismjs, which allows for code reading that is more like an IDE.