@yoo-digital/eslint-plugin-angular 1.3.0 → 1.4.0

package/README.md

@@ -1,4 +1,4 @@
-# eslint-plugin-angular
+# YOO ESLint plugin Angular
 
 ## Custom lint purpose
 
@@ -6,44 +6,98 @@ Here should live all custom Angular lint rules that eslint does not already prov
 
 ## Linting
 
-Wrong code is yellow/red underlined in VScode, it can also be raises running : `npm run lint`
+Wrong code is yellow/red underlined in VScode, it can also be raised running : `npm run lint`, autofixing them with : `npm run lint:fix`
 
----
+## 1️⃣ Boolean input conversion
 
-## Rule 1 : boolean input conversion
+This feature consists of **two complementary rules**:
 
-`booleanAttribute @angular/core`
-
-`BooleanInput @angular/cdk/coercion`
-
-The rule only flags components inputs `[isVegan]="true"` bindings and ignores `[isVegan]="false"` bindings:
+1. **`require-boolean-attribute-transform`** - TypeScript rule that enforces `booleanAttribute` transform on boolean inputs
+2. **`prefer-boolean-attribute-shorthand`** - Template rule that enforces shorthand syntax for `[attr]="true"` bindings
 
+### Setting 
 ```json
 {
   "rules": {
+    "@yoo-digital/eslint-plugin-angular/require-boolean-attribute-transform": "error",
     "@yoo-digital/eslint-plugin-angular/prefer-boolean-attribute-shorthand": "error"
   }
 }
 ```
 
-### Examples
+### HTML 
 
+#### True value 
 ```html
-<!-- this will raise lint issue -->
-<myMealComponent [isVegan]="true" />
-<!-- false value raises no lint issue (ignored) -->
-<myMealComponent [isVegan]="false" />
+<mealComponent [isVegan]="true" />
+<!-- Lint issue enforcing to be :  --> 
+<mealComponent isVegan />
 ```
 
-Lint enforces use of boolean attribute : 
+#### False value (bypassed)
+```html
+<mealComponent [isVegan]="false" />
+<!-- No lint issue, to be able to address false value for a default true input -->
+```
 
+### Typescript
+
+#### Imports
+`booleanAttribute @angular/core`
+
+`BooleanInput @angular/cdk/coercion`
+
+#### Modern signal way
 ```typescript
-// Modern signal way
+isVegan = input<boolean>();
+// Lint issue, must become : 
+isVegan = input<boolean, BooleanInput>(true|false, { transform: booleanAttribute });
+```
+
+#### Old decorator way
+```typescript
+@Input() isVegan?: boolean;
+// Lint issue, must become : 
+@Input({ transform: booleanAttribute }) isVegan: boolean = true|false;
+```
+
+### Default value 
+#### Default true 
+
+If boolean input is by default **true**
+```typescript
+// Modern signal way : 
+isVegan = input<boolean, BooleanInput>(true, { transform: booleanAttribute });
+// Old decorator way : 
+@Input({ transform: booleanAttribute }) isVegan: boolean = true;
+```
+
+HTML set it true or false this way : 
+
+```html
+<!-- True value  -->
+<mealComponent />
+<!-- False value  -->
+<mealComponent [isVegan]="false" />
+```
+
+#### Default false 
+
+If boolean input is by default **false**
+```typescript
+// Modern signal way : 
 isVegan = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
-// Old decorator way
+// Old decorator way : 
 @Input({ transform: booleanAttribute }) isVegan: boolean = false;
 ```
 
----
+HTML set it true or false this way : 
+
+```html
+<!-- True value  -->
+<mealComponent isVegan />
+<!-- False value  -->
+<mealComponent />
+```
 
-## Rule 2 : ...
+## 2️⃣ ...

package/dist/index.d.ts

@@ -4,12 +4,14 @@ export declare const configs: {
         plugins: string[];
         rules: {
             '@yoo-digital/angular/prefer-boolean-attribute-shorthand': string;
+            '@yoo-digital/angular/require-boolean-attribute-transform': string;
         };
     };
     recommended: {
         plugins: string[];
         rules: {
             '@yoo-digital/angular/prefer-boolean-attribute-shorthand': string;
+            '@yoo-digital/angular/require-boolean-attribute-transform': string;
         };
     };
 };

package/dist/index.js

@@ -4,18 +4,21 @@ exports.configs = exports.rules = void 0;
 const rules_1 = require("./rules");
 exports.rules = {
     'prefer-boolean-attribute-shorthand': rules_1.preferBooleanAttributeShorthandRule,
+    'require-boolean-attribute-transform': rules_1.requireBooleanAttributeTransformRule,
 };
 exports.configs = {
     default: {
         plugins: ['@yoo-digital/eslint-plugin-angular'],
         rules: {
             '@yoo-digital/angular/prefer-boolean-attribute-shorthand': 'warn',
+            '@yoo-digital/angular/require-boolean-attribute-transform': 'warn',
         },
     },
     recommended: {
         plugins: ['@yoo-digital/eslint-plugin-angular'],
         rules: {
             '@yoo-digital/angular/prefer-boolean-attribute-shorthand': 'error',
+            '@yoo-digital/angular/require-boolean-attribute-transform': 'error',
         },
     },
 };

package/dist/rules/index.d.ts

@@ -1 +1,2 @@
-export { preferBooleanAttributeShorthandRule, RULE_NAME } from './prefer-boolean-attribute-shorthand';
+export { preferBooleanAttributeShorthandRule, RULE_NAME as PREFER_BOOLEAN_ATTRIBUTE_SHORTHAND_RULE_NAME } from './prefer-boolean-attribute-shorthand';
+export { requireBooleanAttributeTransformRule, RULE_NAME as REQUIRE_BOOLEAN_ATTRIBUTE_TRANSFORM_RULE_NAME } from './require-boolean-attribute-transform';

package/dist/rules/index.js

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RULE_NAME = exports.preferBooleanAttributeShorthandRule = void 0;
+exports.REQUIRE_BOOLEAN_ATTRIBUTE_TRANSFORM_RULE_NAME = exports.requireBooleanAttributeTransformRule = exports.PREFER_BOOLEAN_ATTRIBUTE_SHORTHAND_RULE_NAME = exports.preferBooleanAttributeShorthandRule = void 0;
 var prefer_boolean_attribute_shorthand_1 = require("./prefer-boolean-attribute-shorthand");
 Object.defineProperty(exports, "preferBooleanAttributeShorthandRule", { enumerable: true, get: function () { return prefer_boolean_attribute_shorthand_1.preferBooleanAttributeShorthandRule; } });
-Object.defineProperty(exports, "RULE_NAME", { enumerable: true, get: function () { return prefer_boolean_attribute_shorthand_1.RULE_NAME; } });
+Object.defineProperty(exports, "PREFER_BOOLEAN_ATTRIBUTE_SHORTHAND_RULE_NAME", { enumerable: true, get: function () { return prefer_boolean_attribute_shorthand_1.RULE_NAME; } });
+var require_boolean_attribute_transform_1 = require("./require-boolean-attribute-transform");
+Object.defineProperty(exports, "requireBooleanAttributeTransformRule", { enumerable: true, get: function () { return require_boolean_attribute_transform_1.requireBooleanAttributeTransformRule; } });
+Object.defineProperty(exports, "REQUIRE_BOOLEAN_ATTRIBUTE_TRANSFORM_RULE_NAME", { enumerable: true, get: function () { return require_boolean_attribute_transform_1.RULE_NAME; } });

package/dist/rules/prefer-boolean-attribute-shorthand.js

@@ -29,7 +29,7 @@ exports.preferBooleanAttributeShorthandRule = {
         docs: {
             description: 'Prefer boolean input attribute shorthand when binding to true (e.g., use "disabled" instead of [disabled]="true").',
         },
-        hasSuggestions: true,
+        fixable: 'code',
         schema: [],
         messages: {
             preferTrue: 'Use attribute shorthand "{{attr}}" instead of [{{attr}}]="true".',
@@ -57,13 +57,7 @@ exports.preferBooleanAttributeShorthandRule = {
                             loc,
                             messageId: 'preferTrue',
                             data: { attr: attrName },
-                            suggest: [
-                                {
-                                    messageId: 'suggestTrue',
-                                    data: { attr: attrName },
-                                    fix: (fixer) => fixer.replaceTextRange([start, end], attrName),
-                                },
-                            ],
+                            fix: (fixer) => fixer.replaceTextRange([start, end], attrName),
                         });
                     }
                     // [attr]="false" is explicitly ignored - no warning

package/dist/rules/require-boolean-attribute-transform.d.ts

@@ -0,0 +1,16 @@
+import type { TSESLint } from '@typescript-eslint/utils';
+type MessageIds = 'requireTransformDecorator' | 'requireTransformSignal';
+export declare const RULE_NAME = "require-boolean-attribute-transform";
+/**
+ * This rule enforces that boolean @Input() properties and input() signals
+ * use the booleanAttribute transform.
+ *
+ * BEHAVIOR:
+ * - @Input() foo: boolean = true/false  → Requires @Input({ transform: booleanAttribute })
+ * - input<boolean>(true/false)          → Requires input<boolean, BooleanInput>(..., { transform: booleanAttribute })
+ *
+ * This ensures consistency across the codebase and enables the shorthand syntax
+ * in templates (e.g., <comp disabled /> instead of <comp [disabled]="true" />).
+ */
+export declare const requireBooleanAttributeTransformRule: TSESLint.RuleModule<MessageIds, []>;
+export {};

package/dist/rules/require-boolean-attribute-transform.js

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.requireBooleanAttributeTransformRule = exports.RULE_NAME = void 0;
+exports.RULE_NAME = 'require-boolean-attribute-transform';
+/**
+ * This rule enforces that boolean @Input() properties and input() signals
+ * use the booleanAttribute transform.
+ *
+ * BEHAVIOR:
+ * - @Input() foo: boolean = true/false  → Requires @Input({ transform: booleanAttribute })
+ * - input<boolean>(true/false)          → Requires input<boolean, BooleanInput>(..., { transform: booleanAttribute })
+ *
+ * This ensures consistency across the codebase and enables the shorthand syntax
+ * in templates (e.g., <comp disabled /> instead of <comp [disabled]="true" />).
+ */
+exports.requireBooleanAttributeTransformRule = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Require booleanAttribute transform on boolean @Input() properties and input() signals.',
+        },
+        fixable: 'code',
+        schema: [],
+        messages: {
+            requireTransformDecorator: 'Boolean @Input() "{{name}}" must use transform: booleanAttribute',
+            requireTransformSignal: 'Boolean input() signal "{{name}}" must use transform: booleanAttribute and BooleanInput type',
+        },
+    },
+    defaultOptions: [],
+    create(context) {
+        const sourceCode = context.sourceCode || context.getSourceCode();
+        return {
+            // Handle @Input() decorator syntax
+            PropertyDefinition(node) {
+                // Check if it's a boolean property with @Input() decorator
+                if (!node.typeAnnotation || node.typeAnnotation.typeAnnotation.type !== 'TSBooleanKeyword') {
+                    return;
+                }
+                const hasInputDecorator = node.decorators?.some((decorator) => decorator.expression.type === 'CallExpression' &&
+                    decorator.expression.callee.type === 'Identifier' &&
+                    decorator.expression.callee.name === 'Input');
+                if (!hasInputDecorator) {
+                    return;
+                }
+                // Check if it already has transform: booleanAttribute
+                const inputDecorator = node.decorators?.find((decorator) => decorator.expression.type === 'CallExpression' &&
+                    decorator.expression.callee.type === 'Identifier' &&
+                    decorator.expression.callee.name === 'Input');
+                if (inputDecorator?.expression.type === 'CallExpression') {
+                    const args = inputDecorator.expression.arguments;
+                    if (args.length > 0 && args[0].type === 'ObjectExpression') {
+                        const hasTransform = args[0].properties.some((prop) => prop.type === 'Property' &&
+                            prop.key.type === 'Identifier' &&
+                            prop.key.name === 'transform' &&
+                            prop.value.type === 'Identifier' &&
+                            prop.value.name === 'booleanAttribute');
+                        if (hasTransform) {
+                            return; // Already has transform
+                        }
+                    }
+                }
+                // Report the issue
+                const propertyName = node.key.type === 'Identifier' ? node.key.name : 'unknown';
+                context.report({
+                    node: node.key,
+                    messageId: 'requireTransformDecorator',
+                    data: { name: propertyName },
+                    fix(fixer) {
+                        const decoratorNode = inputDecorator?.expression;
+                        if (!decoratorNode || decoratorNode.type !== 'CallExpression') {
+                            return null;
+                        }
+                        const decoratorStart = decoratorNode.range[0];
+                        const decoratorEnd = decoratorNode.range[1];
+                        const decoratorText = sourceCode.getText(decoratorNode);
+                        // Generate the fixed decorator
+                        let newDecorator;
+                        if (decoratorNode.arguments.length === 0) {
+                            // @Input() → @Input({ transform: booleanAttribute })
+                            newDecorator = '@Input({ transform: booleanAttribute })';
+                        }
+                        else if (decoratorNode.arguments[0].type === 'ObjectExpression') {
+                            // @Input({ ... }) → @Input({ ..., transform: booleanAttribute })
+                            const objExpr = decoratorNode.arguments[0];
+                            const objText = sourceCode.getText(objExpr);
+                            const closingBrace = objText.lastIndexOf('}');
+                            const existingProps = objText.substring(1, closingBrace).trim();
+                            const separator = existingProps ? ', ' : '';
+                            newDecorator = `@Input({ ${existingProps}${separator}transform: booleanAttribute })`;
+                        }
+                        else {
+                            // @Input('alias') → @Input({ alias: 'alias', transform: booleanAttribute })
+                            const aliasArg = sourceCode.getText(decoratorNode.arguments[0]);
+                            newDecorator = `@Input({ alias: ${aliasArg}, transform: booleanAttribute })`;
+                        }
+                        return fixer.replaceTextRange([decoratorStart, decoratorEnd], newDecorator);
+                    },
+                });
+            },
+            // Handle input() signal syntax
+            VariableDeclarator(node) {
+                if (node.init?.type !== 'CallExpression' ||
+                    node.init.callee.type !== 'Identifier' ||
+                    node.init.callee.name !== 'input') {
+                    return;
+                }
+                const callExpr = node.init;
+                // Check if it's a boolean input
+                if (!callExpr.typeArguments || callExpr.typeArguments.params.length === 0) {
+                    return;
+                }
+                const firstTypeParam = callExpr.typeArguments.params[0];
+                if (firstTypeParam.type !== 'TSBooleanKeyword') {
+                    return;
+                }
+                // Check if it already has BooleanInput as second type parameter
+                const hasBooleanInput = callExpr.typeArguments.params.length > 1 &&
+                    callExpr.typeArguments.params[1].type === 'TSTypeReference' &&
+                    callExpr.typeArguments.params[1].typeName.type === 'Identifier' &&
+                    callExpr.typeArguments.params[1].typeName.name === 'BooleanInput';
+                // Check if it already has transform in options
+                const hasTransformOption = callExpr.arguments.length > 1 &&
+                    callExpr.arguments[1].type === 'ObjectExpression' &&
+                    callExpr.arguments[1].properties.some((prop) => prop.type === 'Property' &&
+                        prop.key.type === 'Identifier' &&
+                        prop.key.name === 'transform' &&
+                        prop.value.type === 'Identifier' &&
+                        prop.value.name === 'booleanAttribute');
+                if (hasBooleanInput && hasTransformOption) {
+                    return; // Already correctly configured
+                }
+                // Report the issue
+                const propertyName = node.id.type === 'Identifier' ? node.id.name : 'unknown';
+                context.report({
+                    node: node.id,
+                    messageId: 'requireTransformSignal',
+                    data: { name: propertyName },
+                    fix(fixer) {
+                        const callStart = callExpr.range[0];
+                        const callEnd = callExpr.range[1];
+                        // Get the default value argument
+                        const defaultValue = callExpr.arguments[0] ? sourceCode.getText(callExpr.arguments[0]) : 'false';
+                        // Build the new call expression
+                        const newCall = `input<boolean, BooleanInput>(${defaultValue}, {\n    transform: booleanAttribute,\n  })`;
+                        return fixer.replaceTextRange([callStart, callEnd], newCall);
+                    },
+                });
+            },
+        };
+    },
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yoo-digital/eslint-plugin-angular",
-  "version": "1.3.0",
-  "description": "Yoo Digital custom Angular ESLint plugin providing prefer-boolean-attribute-shorthand rule.",
+  "version": "1.4.0",
+  "description": "Yoo Digital custom Angular ESLint plugin for enforcing boolean attribute best practices.",
   "type": "commonjs",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",