Diagonal Architecture

This small extension adds folder colors and icons to support Diagonal Architecture. In this architecture, the code in src/domain does not depend on external libraries (except for a state management library like tilia). This helps decouple core business functionality from external services, making the app easier to test and more resilient to change.

After installing, set the icon theme to "Diagonal Architecture Icons (Dark)" or "Diagonal Architecture Icons (Light)". You can also use the command "Activate Diagonal Architecture Dark Icon Theme" or "Activate Diagonal Architecture Light Icon Theme" respectively.

Features

• Command to create the folder structure
• Colors for the folders
• Icons for the folders and files
• Files with .type.ts have a special icon (easier to differentiate from implementation)

Here are the folders that have some special meaning in the Diagonal Architecture, by order of dependency (lower layers depend on higher layers only):

Extension Settings

You can configure the colors to use for each special folder:

settings.json (User or Workspace)

{
  "workbench.colorCustomizations": {
    "diagonalArchitecture.api": "#3bf8f8",
    "diagonalArchitecture.feature": "#ff70ff",
    "diagonalArchitecture.service": "#a76844",
    "diagonalArchitecture.view": "#51b837"
  },
  "diagonalArchitecture.badges": {
    "api": "@",
    "feature": ">",
    "service": "~",
    "view": "#"
  }
}

Known Issues

None.

Related

• We also built tilia, an open-source state management library for TypeScript and Rescript with hooks for React.
• We also built vitest-bdd, a test-runner for Gherkin in Vitest.

Release Notes

Full changelog.

0.1.x

• Rename 'model' to 'entity', add domain icon, add command to create folder structure, single theme file.
• Small fixes to icons and colors.

0.0.x

Initial release, colors for "api", "feature", "service", and "view".