`Themed*` components should be used in the actual codebase to ensure we retain theme support.
However, in unit tests these components won't work without a fully-functional `ThemeService` & `Store`.
For this reason, the lint plugin allows `ds-base-*` selectors in unit test templates.
The automatic migration made it so HTML always uses the `Themed*` component, and it must therefore be imported in all standalone components that use it.
Afterwards, many unit tests fail because the removed imports no longer match up (can't inject `ThemeService`).
While we could try to support this as part of the automatic migration, there are too many edge cases for this to be consistent.
Fixes compile-time errors due to out-of-sync inputs and outputs between ThemedConfigurationSearchPageComponent and SearchComponent
(note that this is was an existing problem in the source code that flew under the radar until we flipped the selector convention!)
- ThemedComponent wrappers should always import their base component. This ensures that it's always enough to only import the wrapper when we use it.
- This implies that all themeable components must be standalone
→ added rules to enforce this
→ updated usage rule to improve declaration/import handling
The following cases are covered:
- ThemedComponent wrapper selectors must not start with ds-themed-
- Base component selectors must start with ds-base-
- Themed component selectors must start with ds-themed-
- The ThemedComponent wrapper must always be used in HTML
- The ThemedComponent wrapper must be used in TypeScript _where appropriate_:
- Required
- Explicit usages (e.g. modal instantiation, routing modules, ...)
- By.css selector queries (in order to align with the HTML rule)
- Unchecked
- Non-routing modules (to ensure the components can be declared)
- ViewChild hooks (since they need to attach to the underlying component)
All rules work with --fix to automatically migrate to the new convention
This covers most of the codebase, but minor manual adjustment are needed afterwards
