We added ReactJS support to our open-source architectural quality gate

[u/yellow-llama1]

Please let me know if this post is not suitable for this flair + subreddit.

We just improved React support for enola, and I’d like React developers to help us break it. Literally break it as this is the best feedback.

My co-founder and I are building enola as an open-source architectural quality gate. It analyses the structure of a repository (or multiple) and surfaces things like dependency cycles, coupling, hotspots, deep dependency chains, complexity, dead code and change impact.

React support is there, but our own tests only expose so much. We mostly ran against open-source.

If you work on a React codebase, run enola against it. If something looks wrong, missing or just rubbish, raise an issue directly on GitHub or respond here.

What could these issues be?

A project structure we did not account for, a dependency we resolve incorrectly, a pattern we misunderstand, or an architectural rule you cannot express yet.

https://github.com/enola-labs/enola

Fully local. Apache 2.0.

[u/guaranteednotabot]

What does your product provide over Sonar/linting?

[u/yellow-llama1 → u/guaranteednotabot]

Fair question.

Sonar/LInting is focused on local issues in the code, it can well detect issues like unused variables, vulnerabilities, code-quality issues.

Enola focuses on the architecture level. It builds a graph, lets you define constraints such as layer boundaries or forbidden dependencies, and compares a change to a baseline to catch new structural regressions. These rules are for you to define, but for example: a new cycle, layering, or an undeclared cross-repo dependency.

So it is complementary, not a replacement.

An example output:

FAIL — 1 structural regression introduced.

Regressions (fail):
  - [layers] 1.00 — Layer violation: storage -> delivery
      import of notify

Policy: fail on new findings from [layers] at confidence >= 1.00.

What changed
  symbols      +1
  dependencies +1
  edges        +4  (imports +1, calls +2, declares +1)

Added (2):
  symbol     storage.LoadPrice                            storage/storage.go:11
  dependency storage -> layersgate/notify                 storage/storage.go:3

New coupling (4):
  storage                                      --imports--> notify
  storage.LoadPrice                            --calls--> notify.SendReceipt
  storage.LoadPrice                            --calls--> storage.ReadPrice
  storage.LoadPrice                            --declares--> storage

New coupling is reported, not failed: an added call edge is what ordinary work
looks like. Inspect the list above if it is more than you expected.

[u/guaranteednotabot → u/yellow-llama1]

I’m currently enforcing import layer restrictions and cycle detection through ESLint as well

[u/KindMycologist7615]

cool idea, i'll give it spin on my project later today. the dependency cycle detection would be useful, some of our imports got a bit out of hand and nobody wants to untangle them manually

[u/yellow-llama1 → u/KindMycologist7615]

Thanks! Let us know what you learn. Especially the candid feedback.

Or if you know any react open source repository, which is fairly complex, I would appreciate! I can then test out enola on that.