diff --git a/docs/1_CodeConventions.md b/docs/1_CodeConventions.md index 6384014fdd..25323e1a95 100644 --- a/docs/1_CodeConventions.md +++ b/docs/1_CodeConventions.md @@ -1,11 +1,11 @@ # Code Conventions -* [filenames](#filenames) -* [directory structure](#directorystructure) -* [data-testid(s)](#data-testids) -* [ts-ignore comments](#ts-ignorecomments) -* [Composables](#Composables) +- [Code Conventions](#code-conventions) + - [filenames](#filenames) + - [data-testid(s)](#data-testids) + - [ts-ignore comments](#ts-ignore-comments) + - [Composables](#composables) B[Imagine the different requirements of the Task] + B --> C{Do I need a new subpage} + C -->|Yes| D(type: page) + C -->|No| E{Do I need UI?} + E --> |No| F{Do I need State?} + E --> |Yes| G{Do I need State?} + F -->|Yes| H(type: data) + F -->|No| I(type: util) + G -->|Yes| J(type: feature) + G -->|No| K(type: ui) + H --> L[Are all requirements of your task placed in a building-block?] + I --> L + J --> L + K --> L + D --> L + L -->|Yes| M[Happy Coding!] + L -->|No| O[You need an additional building-block] + O --> B + M -.-> P[Evaluate your choices as a part of your review and refactor when neccessary] + +``` + +# Matrix of allowed imports + +| Allowed to Import ➡
It is ⬇ | page | feature | data | ui | util | +| ------------------------------- | ---- | ------- | ---- | --- | ---- | +| page | | ✔ | ✔ | ✔ | ✔ | +| feature | | ✔ | ✔ | ✔ | ✔ | +| data | | | ✔ | | ✔ | +| ui | | | | ✔ | ✔ | +| util | | | | | ✔ | diff --git a/docs/2_GitConventions.md b/docs/3_GitConventions.md similarity index 100% rename from docs/2_GitConventions.md rename to docs/3_GitConventions.md diff --git a/docs/3_HowTo.md b/docs/4_HowTo.md similarity index 100% rename from docs/3_HowTo.md rename to docs/4_HowTo.md diff --git a/docs/4_WritingTests.md b/docs/5_WritingTests.md similarity index 100% rename from docs/4_WritingTests.md rename to docs/5_WritingTests.md diff --git a/docs/5_Accessibility.md b/docs/6_Accessibility.md similarity index 100% rename from docs/5_Accessibility.md rename to docs/6_Accessibility.md diff --git a/docs/6_Colors.md b/docs/7_Colors.md similarity index 100% rename from docs/6_Colors.md rename to docs/7_Colors.md diff --git a/docs/8_IdentifyingAndResolvingCircularDependencies.md b/docs/8_IdentifyingAndResolvingCircularDependencies.md new file mode 100644 index 0000000000..17b316ad8d --- /dev/null +++ b/docs/8_IdentifyingAndResolvingCircularDependencies.md @@ -0,0 +1,40 @@ +# Identifying and Resolving Circular Dependencies + +## What is a circular dependency? +Circular depencies are a common issue when working with barrel-files (index.ts). + +Let's look at a common dependency pattern: + +![Circular Import](./assets/circular_dependency_1.png) + + +In this example there are two **Building-Blocks** (e.g. folders that have a barrel file) which depend on each other. Using the SharedComponent in both Building-Blocks will result in a circular dependency. + +That basically means that the compiler can not resolve the order to load the Building-Blocks which causes an error. + + + +## Resolving Circular Dependencies + +The basic gist is: **break the circle** and separate the shared dependency in a separate module. + +![Fixed Circular Import](./assets/circular_dependency_2.png) + +In this configuration the compiler can find an order to resolve the building-blocks correctly. + + + +## How to identify Circular Dependencies in Vue + +I recreated the first example error in Vue. When Vue tries to render ComponentA I see the following Error in the console: + +![Error Message](./assets/circular_dependency_3.png) + +This can be quite hard to decipher on a first glance but it contains all the info we need to identify the root cause of the circular dependency. + +![Error Message Explained](./assets/circular_dependency_4.png) + +Based on the info from the message we can learn that ComponentB "closed the circle" by importing SharedComponent. From there we can trace back to see where SharedComponent is exposed and why it depends on ComponentB. In this case it is because they are both imported in ComponentA. + +Keep in mind that the circular dependency can involve multiple building-blocks. + diff --git a/docs/assets/circular_dependency_1.png b/docs/assets/circular_dependency_1.png new file mode 100644 index 0000000000..caeb688d56 Binary files /dev/null and b/docs/assets/circular_dependency_1.png differ diff --git a/docs/assets/circular_dependency_2.png b/docs/assets/circular_dependency_2.png new file mode 100644 index 0000000000..ad6a68bfa3 Binary files /dev/null and b/docs/assets/circular_dependency_2.png differ diff --git a/docs/assets/circular_dependency_3.png b/docs/assets/circular_dependency_3.png new file mode 100644 index 0000000000..9ed7a8aa09 Binary files /dev/null and b/docs/assets/circular_dependency_3.png differ diff --git a/docs/assets/circular_dependency_4.png b/docs/assets/circular_dependency_4.png new file mode 100644 index 0000000000..9957c4033f Binary files /dev/null and b/docs/assets/circular_dependency_4.png differ