@yoo-digital/eslint-plugin-angular 1.2.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -80
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,32 +6,17 @@ Here should live all custom Angular lint rules that eslint does not already prov
|
|
|
6
6
|
|
|
7
7
|
## Linting
|
|
8
8
|
|
|
9
|
-
Wrong code is yellow underlined in VScode, it can also be raises running : `npm run lint`
|
|
9
|
+
Wrong code is yellow/red underlined in VScode, it can also be raises running : `npm run lint`
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## Rule 1 : boolean input conversion
|
|
12
14
|
|
|
13
15
|
`booleanAttribute @angular/core`
|
|
14
16
|
|
|
15
17
|
`BooleanInput @angular/cdk/coercion`
|
|
16
18
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
**Current Implementation:** This rule enforces shorthand syntax (`<x a />` instead of `<x [a]="true" />`) but **cannot automatically verify**:
|
|
20
|
-
- Whether an input has `transform: booleanAttribute`
|
|
21
|
-
- What the default value of an input is
|
|
22
|
-
|
|
23
|
-
This is a technical limitation of Angular ESLint - template rules cannot access the component's TypeScript code.
|
|
24
|
-
|
|
25
|
-
### Recommended Usage
|
|
26
|
-
|
|
27
|
-
This rule works best when:
|
|
28
|
-
1. **All boolean inputs** in your project use `booleanAttribute` transform
|
|
29
|
-
2. **Most boolean inputs** have `default = false` or no default
|
|
30
|
-
3. You treat this as a **style guide enforcer** rather than a safety checker
|
|
31
|
-
|
|
32
|
-
### Configuration
|
|
33
|
-
|
|
34
|
-
By default, the rule only flags `[attr]="true"` bindings (safe default):
|
|
19
|
+
The rule only flags components inputs `[isVegan]="true"` bindings and ignores `[isVegan]="false"` bindings:
|
|
35
20
|
|
|
36
21
|
```json
|
|
37
22
|
{
|
|
@@ -41,73 +26,24 @@ By default, the rule only flags `[attr]="true"` bindings (safe default):
|
|
|
41
26
|
}
|
|
42
27
|
```
|
|
43
28
|
|
|
44
|
-
To also enforce removal of `[attr]="false"` bindings:
|
|
45
|
-
|
|
46
|
-
```json
|
|
47
|
-
{
|
|
48
|
-
"rules": {
|
|
49
|
-
"@yoo-digital/eslint-plugin-angular/prefer-boolean-attribute-shorthand": [
|
|
50
|
-
"error",
|
|
51
|
-
{ "allowFalseLiteral": false }
|
|
52
|
-
]
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
```
|
|
56
|
-
|
|
57
29
|
### Examples
|
|
58
30
|
|
|
59
|
-
#### ✅ Recommended Pattern (Default false or no default)
|
|
60
|
-
|
|
61
|
-
```typescript
|
|
62
|
-
// Component
|
|
63
|
-
@Input({ transform: booleanAttribute }) disabled: boolean = false;
|
|
64
|
-
// OR
|
|
65
|
-
disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
**Template:**
|
|
69
|
-
- ❌ `<button [disabled]="true">` → Should be `<button disabled>`
|
|
70
|
-
- ✅ `<button disabled>` (shorthand for true)
|
|
71
|
-
- ✅ `<button>` (omit for false)
|
|
72
|
-
- ✅ `<button [disabled]="isLoading">` (expressions are allowed)
|
|
73
|
-
|
|
74
|
-
#### ⚠️ Special Case: Default true (Disable rule if needed)
|
|
75
|
-
|
|
76
|
-
```typescript
|
|
77
|
-
// Component
|
|
78
|
-
@Input({ transform: booleanAttribute }) enabled: boolean = true;
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
**Template:**
|
|
82
31
|
```html
|
|
83
|
-
<!--
|
|
84
|
-
<
|
|
32
|
+
<!-- this will raise lint issue -->
|
|
33
|
+
<myMealComponent [isVegan]="true" />
|
|
34
|
+
<!-- false value raises no lint issue (ignored) -->
|
|
35
|
+
<myMealComponent [isVegan]="false" />
|
|
85
36
|
```
|
|
86
37
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
#### ❌ Without booleanAttribute (Won't work!)
|
|
38
|
+
Lint enforces use of boolean attribute :
|
|
90
39
|
|
|
91
40
|
```typescript
|
|
92
|
-
//
|
|
93
|
-
|
|
41
|
+
// Modern signal way
|
|
42
|
+
isVegan = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
|
|
43
|
+
// Old decorator way
|
|
44
|
+
@Input({ transform: booleanAttribute }) isVegan: boolean = false;
|
|
94
45
|
```
|
|
95
46
|
|
|
96
|
-
|
|
97
|
-
- ❌ `<input checked>` → Will pass `""` (empty string), NOT boolean!
|
|
98
|
-
- ✅ `<input [checked]="true">` (must use property binding)
|
|
99
|
-
|
|
100
|
-
### Decorator Syntax
|
|
101
|
-
|
|
102
|
-
`@Input({ transform: booleanAttribute }) myInput: boolean = false;`
|
|
103
|
-
|
|
104
|
-
### Signal Input Syntax
|
|
105
|
-
|
|
106
|
-
`myInput = input<boolean, BooleanInput>(false, { transform: booleanAttribute });`
|
|
107
|
-
|
|
108
|
-
### Summary
|
|
47
|
+
---
|
|
109
48
|
|
|
110
|
-
|
|
111
|
-
- **Rule assumes**: Inputs have `booleanAttribute` and `default ≠ true`
|
|
112
|
-
- **Manual override**: Use eslint-disable comments for special cases
|
|
113
|
-
- **Best practice**: Ensure all boolean inputs use `booleanAttribute`
|
|
49
|
+
## Rule 2 : ...
|
package/package.json
CHANGED