Commits
Yury Bondarenko authored 08a5443cc20
1 + | [DSpace ESLint plugins](../../../../lint/README.md) > [HTML rules](../index.md) > `dspace-angular-html/themed-component-usages` |
2 + | _______ |
3 + | |
4 + | Themeable components should be used via the selector of their `ThemedComponent` wrapper class |
5 + | |
6 + | This ensures that custom themes can correctly override _all_ instances of this component. |
7 + | The only exception to this rule are unit tests, where we may want to use the base component in order to keep the test setup simple. |
8 + | |
9 + | |
10 + | _______ |
11 + | |
12 + | [Source code](../../../../lint/src/rules/html/themed-component-usages.ts) |
13 + | |
14 + | ### Examples |
15 + | |
16 + | |
17 + | #### Valid code |
18 + | |
19 + | ##### use no-prefix selectors in HTML templates |
20 + | |
21 + | ```html |
22 + | <ds-test-themeable/> |
23 + | <ds-test-themeable></ds-test-themeable> |
24 + | <ds-test-themeable [test]="something"></ds-test-themeable> |
25 + | ``` |
26 + | |
27 + | ##### use no-prefix selectors in TypeScript templates |
28 + | |
29 + | ```html |
30 + | @Component({ |
31 + | template: '<ds-test-themeable></ds-test-themeable>' |
32 + | }) |
33 + | class Test { |
34 + | } |
35 + | ``` |
36 + | |
37 + | ##### use no-prefix selectors in TypeScript test templates |
38 + | |
39 + | Filename: `lint/test/fixture/src/test.spec.ts` |
40 + | |
41 + | ```html |
42 + | @Component({ |
43 + | template: '<ds-test-themeable></ds-test-themeable>' |
44 + | }) |
45 + | class Test { |
46 + | } |
47 + | ``` |
48 + | |
49 + | ##### base selectors are also allowed in TypeScript test templates |
50 + | |
51 + | Filename: `lint/test/fixture/src/test.spec.ts` |
52 + | |
53 + | ```html |
54 + | @Component({ |
55 + | template: '<ds-base-test-themeable></ds-base-test-themeable>' |
56 + | }) |
57 + | class Test { |
58 + | } |
59 + | ``` |
60 + | |
61 + | |
62 + | |
63 + | |
64 + | #### Invalid code & automatic fixes |
65 + | |
66 + | ##### themed override selectors are not allowed in HTML templates |
67 + | |
68 + | ```html |
69 + | <ds-themed-test-themeable/> |
70 + | <ds-themed-test-themeable></ds-themed-test-themeable> |
71 + | <ds-themed-test-themeable [test]="something"></ds-themed-test-themeable> |
72 + | ``` |
73 + | Will produce the following error(s): |
74 + | ``` |
75 + | Themeable components should be used via their ThemedComponent wrapper's selector |
76 + | Themeable components should be used via their ThemedComponent wrapper's selector |
77 + | Themeable components should be used via their ThemedComponent wrapper's selector |
78 + | ``` |
79 + | |
80 + | Result of `yarn lint --fix`: |
81 + | ```html |
82 + | <ds-test-themeable/> |
83 + | <ds-test-themeable></ds-test-themeable> |
84 + | <ds-test-themeable [test]="something"></ds-test-themeable> |
85 + | ``` |
86 + | |
87 + | |
88 + | ##### base selectors are not allowed in HTML templates |
89 + | |
90 + | ```html |
91 + | <ds-base-test-themeable/> |
92 + | <ds-base-test-themeable></ds-base-test-themeable> |
93 + | <ds-base-test-themeable [test]="something"></ds-base-test-themeable> |
94 + | ``` |
95 + | Will produce the following error(s): |
96 + | ``` |
97 + | Themeable components should be used via their ThemedComponent wrapper's selector |
98 + | Themeable components should be used via their ThemedComponent wrapper's selector |
99 + | Themeable components should be used via their ThemedComponent wrapper's selector |
100 + | ``` |
101 + | |
102 + | Result of `yarn lint --fix`: |
103 + | ```html |
104 + | <ds-test-themeable/> |
105 + | <ds-test-themeable></ds-test-themeable> |
106 + | <ds-test-themeable [test]="something"></ds-test-themeable> |
107 + | ``` |
108 + | |
109 + | |
110 + | |