Dependency cruiser

[MatoKnap]

Dependency Cruiser Manual

Dependency Cruiser is a powerful tool for analyzing and visualizing dependencies in source code. It is designed primarily for JavaScript and TypeScript projects. This tool helps identify and understand the structure of dependencies between modules in your project, making it easier to:

• Detect issues such as cyclic dependencies
• Identify violations of architectural rules
• Anticipate potential difficulties in code maintenance

Additionally, Dependency Cruiser allows you to:

• Define custom rules to ensure compliance with established standards
• Generate clear, visual diagrams to analyze the project's structure

Usage Commands

Dependency Cruiser provides the following commands for quick usage:

• npm run depcruise:high: Generates a high-level dependency diagram.
• npm run depcruise:low: Generates a low-level dependency diagram.

Outputs

Both commands generate the following outputs:

1. Interactive HTML file: Open this file using Live Server for an interactive view.
2. SVG file: A static, scalable graphic file.

Optional VSCode Setup

If you are using VSCode, consider installing the SVG Preview plugin. This plugin allows you to:

• Preview the generated SVG files directly in VSCode.
• Export the graph as a PNG file for easy sharing or documentation.

Configuration

To modify Dependency Cruiser’s behavior, edit the configuration file located in the dependency-cruiser folder. The configuration file is a JavaScript file that defines the rules and settings for your project.

Sample Configuration File

A detailed description of all available options can be found in the .dependency-cruiser.js sample configuration file, which can be generated by the tool. This file provides a comprehensive overview of the customization options available.

Key Configuration Variables

Here are some of the most important configuration variables you can use:

Inclusion and Exclusion

• includeOnly: Specify which modules to include. This is an array of regular expressions (in string format). Dependency Cruiser will skip everything not matching this pattern.
• exclude: Specify which modules to exclude. This is an array of regular expressions (in string format) to match against paths.
• doNotFollow: Define modules to ignore during further analysis. This is an array of regular expressions (in string format) to match against paths.

Graphical Representation

• collapsePattern: Pattern of modules to consolidate in high-level dependency graphs. If you use the high-level graphical dependency graph reporter (archi), tweaking this pattern can optimize the visualization.

Graph Layout

• splines: Controls the style of graph edges. For example:
  • "ortho": Produces straight lines but can be slow for large graphs.
• rankdir: Sets the graph's direction. Common values:
  • "TB": Top-to-bottom (default).
  • "LR": Left-to-right.
• ranksep: Adjusts the separation between graph ranks for better clarity.
• nodesep: Adjusts the separation between nodes for better clarity.

Further Development

The current configuration files used by the commands are very simplified. In the future, they should be replaced with an edited default configuration that is generated by Dependency Cruiser. This enhanced configuration will provide a more comprehensive setup, enabling better analysis and compliance with architectural standards.

Keep up with the latest best practices and advanced configurations by regularly consulting Dependency Cruiser’s documentation and engaging with its user community.

[grzanka]

Is it LLM generated description of PR ?

[grzanka]

I don't like the idea of putting large SVG files with generated stuff here.
They should rather go here:
https://github.com/yaptide/for_developers/tree/main/docs/frontend

then if properly digested by mkdocs this should be visible here:
https://yaptide.github.io/for_developers/frontend/

[grzanka]

@jagodek what do you think of for_developers part based on dependency cruiser ?
shouldn't go fully into for_developers, like you extracted code coverage for backend ?

[MatoKnap]

The PR description is taken from the manual I created. The first section of the manual is LLM-generated, as the Dependency Cruiser website lacked a satisfactory general description. The remaining sections were either written by me or sourced from Dependency Cruiser instructions and examples. I also used an LLM to check for errors and improve readability.

[grzanka]

The PR description is taken from the manual I created. The first section of the manual is LLM-generated, as the Dependency Cruiser website lacked a satisfactory general description. The remaining sections were either written by me or sourced from Dependency Cruiser instructions and examples. I also used an LLM to check for errors and improve readability.

I was just curious - it looks like very good and quite complex description :)

[jagodek]

@jagodek what do you think of for_developers part based on dependency cruiser ? shouldn't go fully into for_developers, like you extracted code coverage for backend ?

Personally I don't think the code reference should go to docs like in case of backend unless it'll be easy to implement then yes. Test coverage - yes, some meaningful analysis - yes.

[grzanka]

remove autogenerated files !

[jagodek]

I had to run sudo apt-get install graphviz for it to work. Maybe add this command to doc?

[grzanka]

Looks OK to me but I leave final review to @jagodek