Skip to content

🧩 Debug Tool: a Dependency Graph, visualizing module dependencies in js, jsx, ts, tsx projects.

License

Notifications You must be signed in to change notification settings

kjinengineer/decode-deps

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

banner

DecodeDeps is a dev-tool that analyzes and visualizes module dependencies in js, jsx, ts, tsx projects. It identifies modules using import and require statements and generates a graph to illustrate these relationships. By providing a visualization of module dependencies, it offers insights for building a more structured codebase.

πŸš€ Last Update v.1.2.0 (November 13, 2024)

  • Add functionality to distinguish and display external and internal modules
  • Update UI for the side menu

🌟 Key Features

  • For js, jsx, ts and tsx files: Visualizes module dependencies by analyzing import and require statements, providing a graph view.
  • Multiple folders: Make it easy to analyze entire projects or specific subfolders.
  • Detect circular dependencies: Automatically identifies circular dependencies within your modules.
  • Various Node Color: Node colors vary based on module size, offering a quick visual indication.
  • Interactive Graph: Navigate and explore the dependency graph with zoom and pan features, as well as adjustable node sizes and link distances, providing a fully interactive visualization

πŸ‘€ Preview

Prepare your project.

project

Enter the command.

command

Check the results on port 5001.

result

πŸ“₯ Installation

npm install decode-deps

or

yarn add decode-deps

πŸ’‘ How to use

Step 1. Install decode-deps.

Step 2. Run the command, npx decode-deps with input array. You can put folder names that you want to scan. For example, to analyze files within the ./src folder, use:

npx decode-deps '["./src"]'

To explore multiple folders, specify them as follows:

npx decode-deps '["./src", "./dist"]'

Step 3. After running the command, you can see the results at localhost:5001.

πŸ” Who Should Use This Library?

  • Refactoring Teams. Easily identify optimization points during routine refactoring.
  • Large Codebase Managers. Efficiently handle complex module dependencies.
  • Junior Developers. Quickly understand the overall code structure.
  • Performance-Critical Project Teams. Optimize build performance with improved bundling.

πŸ’¬ Contributing

If you'd like to contribute, feel free to submit a pull request or open an issue. Feedback to improve the project is always welcome!

πŸ“š Docs

Find detailed documentation and updates in the Docs.

πŸ“ License

This project is licensed under the MIT License.