Teleporters

[theKashey]

When the application grows it's become harder and hander to trace connections, and wiring become an issue.

For example, this graph should be simple, as long as the application is really super small

However - what if some group, for a some another group would be represented locally, just next to it?

• easy to trace which dependencies are used by some group
• easier to wire the graph
• less noise

Describe the solution you'd like
A special flag on a group, to indicate that it could be represented on per-other-group basic.

Describe alternatives you've considered
"microservices/frontends", or just separate configs for different groups isolating them could be a better option, however, you will lose observability.

[daniyaldev2k20]

@theKashey hi there, can you please guide me in configuring the arkit.json file in order to get the dependencies folder in the architecture visualization as you have gotten, I tried but it resulted in either #428 or #429.

[theKashey]

Not able to guide, but can share my configuration:

{
  "excludePatterns": ["test", "tests", "dist", "coverage", "**/*.test.*", "**/*.spec.*", "**/*.min.*"],
  "components": [
    {
      "type": "Dependency",
      "patterns": ["node_modules/*"]
    },
    {
      "type": "Component",
      "patterns": ["src/**/*.ts", "src/**/*.js", "src/**/*.jsx", "src/**/*.tsx"]
    },
    {
      "type": "Pages",
      "patterns": ["src/pages/**/*.ts", "src/pages/**/*.tsx"]
    },
    {
      "type": "UI",
      "patterns": ["src/UIKit/**/*.ts", "src/UIKit/**/*.tsx"]
    },
    {
      "type": "Core",
      "patterns": ["src/core/**/*.ts"]
    }
  ],
  "output": [
    {
      "path": ["arkit.client.svg"],
      "groups": [
        {
          "type": "Pages",
          "patterns": ["src/pages/**"]
        },
        {
          "type": "UI",
          "patterns": ["src/UIKit/**"]
        },
        {
          "type": "Core",
          "patterns": ["src/core/**"]
        },
        {
          "first": true,
          "type": "Client",
          "patterns": ["src/**"]
        },
        {
          "type": "Dependencies",
          "components": ["Dependency"]
        }
      ]
    }
  ]
}

[theKashey]

that was "frontend" part, with not much dependencies used.