@angular-eslint/eslint-plugin-template 21.1.1-alpha.3 → 21.1.1-alpha.5

package/README.md

@@ -66,6 +66,7 @@ Please see https://github.com/angular-eslint/angular-eslint for full usage instr
 | [`prefer-at-else`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/prefer-at-else.md) | Prefer using `@else` instead of a second `@if` with the opposite condition to reduce code and make it easier to read. |  | :wrench: |  |  |
 | [`prefer-at-empty`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/prefer-at-empty.md) | Prefer using `@empty` with `@for` loops instead of a separate `@if` or `@else` block to reduce code and make it easier to read. |  | :wrench: |  |  |
 | [`prefer-built-in-pipes`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/prefer-built-in-pipes.md) | Encourages the use of Angular built-in pipes (e.g. lowercase, uppercase, titlecase) instead of certain JavaScript methods in Angular templates. |  |  |  |  |
+| [`prefer-class-binding`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/prefer-class-binding.md) | Suggests using [class] bindings over ngClass where applicable |  |  |  |  |
 | [`prefer-contextual-for-variables`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/prefer-contextual-for-variables.md) | Ensures that contextual variables are used in @for blocks where possible instead of aliasing them. |  | :wrench: |  |  |
 | [`prefer-control-flow`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/prefer-control-flow.md) | Ensures that the built-in control flow is used. | :white_check_mark: |  |  |  |
 | [`prefer-ngsrc`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/prefer-ngsrc.md) | Ensures ngSrc is used instead of src for img elements |  |  | :bulb: |  |

package/dist/configs/all.json

@@ -29,6 +29,7 @@
     "@angular-eslint/template/prefer-at-else": "error",
     "@angular-eslint/template/prefer-at-empty": "error",
     "@angular-eslint/template/prefer-built-in-pipes": "error",
+    "@angular-eslint/template/prefer-class-binding": "error",
     "@angular-eslint/template/prefer-contextual-for-variables": "error",
     "@angular-eslint/template/prefer-control-flow": "error",
     "@angular-eslint/template/prefer-ngsrc": "error",

package/dist/index.d.ts

@@ -31,6 +31,7 @@ declare const _default: {
                 "@angular-eslint/template/prefer-at-else": string;
                 "@angular-eslint/template/prefer-at-empty": string;
                 "@angular-eslint/template/prefer-built-in-pipes": string;
+                "@angular-eslint/template/prefer-class-binding": string;
                 "@angular-eslint/template/prefer-contextual-for-variables": string;
                 "@angular-eslint/template/prefer-control-flow": string;
                 "@angular-eslint/template/prefer-ngsrc": string;
@@ -118,6 +119,7 @@ declare const _default: {
         "no-positive-tabindex": import("@typescript-eslint/utils/ts-eslint").RuleModule<import("./rules/no-positive-tabindex").MessageIds, [], import("./utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
         "prefer-at-else": import("@typescript-eslint/utils/ts-eslint").RuleModule<"preferAtElse", [], import("./utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
         "prefer-at-empty": import("@typescript-eslint/utils/ts-eslint").RuleModule<"preferAtEmpty", [], import("./utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
+        "prefer-class-binding": import("@typescript-eslint/utils/ts-eslint").RuleModule<"preferClassBinding", [], import("./utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
         "prefer-contextual-for-variables": import("@typescript-eslint/utils/ts-eslint").RuleModule<import("./rules/prefer-contextual-for-variables").MessageIds, import("./rules/prefer-contextual-for-variables").Options, import("./utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
         "prefer-control-flow": import("@typescript-eslint/utils/ts-eslint").RuleModule<"preferControlFlow", [], import("./utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
         "prefer-ngsrc": import("@typescript-eslint/utils/ts-eslint").RuleModule<import("./rules/prefer-ngsrc").MessageIds, [], import("./utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2GA,kBA+CE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8GA,kBAgDE"}

package/dist/index.js

@@ -68,6 +68,7 @@ const no_positive_tabindex_1 = __importStar(require("./rules/no-positive-tabinde
 const prefer_ngsrc_1 = __importStar(require("./rules/prefer-ngsrc"));
 const prefer_at_else_1 = __importStar(require("./rules/prefer-at-else"));
 const prefer_at_empty_1 = __importStar(require("./rules/prefer-at-empty"));
+const prefer_class_binding_1 = __importStar(require("./rules/prefer-class-binding"));
 const prefer_contextual_for_variables_1 = __importStar(require("./rules/prefer-contextual-for-variables"));
 const prefer_control_flow_1 = __importStar(require("./rules/prefer-control-flow"));
 const prefer_self_closing_tags_1 = __importStar(require("./rules/prefer-self-closing-tags"));
@@ -113,6 +114,7 @@ module.exports = {
         [no_positive_tabindex_1.RULE_NAME]: no_positive_tabindex_1.default,
         [prefer_at_else_1.RULE_NAME]: prefer_at_else_1.default,
         [prefer_at_empty_1.RULE_NAME]: prefer_at_empty_1.default,
+        [prefer_class_binding_1.RULE_NAME]: prefer_class_binding_1.default,
         [prefer_contextual_for_variables_1.RULE_NAME]: prefer_contextual_for_variables_1.default,
         [prefer_control_flow_1.RULE_NAME]: prefer_control_flow_1.default,
         [prefer_ngsrc_1.RULE_NAME]: prefer_ngsrc_1.default,

package/dist/rules/prefer-class-binding.d.ts

@@ -0,0 +1,8 @@
+export type MessageIds = 'preferClassBinding';
+export declare const RULE_NAME = "prefer-class-binding";
+declare const _default: import("@typescript-eslint/utils/ts-eslint").RuleModule<"preferClassBinding", [], import("../utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
+export default _default;
+export declare const RULE_DOCS_EXTENSION: {
+    rationale: string;
+};
+//# sourceMappingURL=prefer-class-binding.d.ts.map

package/dist/rules/prefer-class-binding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prefer-class-binding.d.ts","sourceRoot":"","sources":["../../src/rules/prefer-class-binding.ts"],"names":[],"mappings":"AAYA,MAAM,MAAM,UAAU,GAAG,oBAAoB,CAAC;AAC9C,eAAO,MAAM,SAAS,yBAAyB,CAAC;;AAEhD,wBAmCG;AAoDH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}

package/dist/rules/prefer-class-binding.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RULE_DOCS_EXTENSION = exports.RULE_NAME = void 0;
+const bundled_angular_compiler_1 = require("@angular-eslint/bundled-angular-compiler");
+const utils_1 = require("@angular-eslint/utils");
+const create_eslint_rule_1 = require("../utils/create-eslint-rule");
+exports.RULE_NAME = 'prefer-class-binding';
+exports.default = (0, create_eslint_rule_1.createESLintRule)({
+    name: exports.RULE_NAME,
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Suggests using [class] bindings over ngClass where applicable',
+        },
+        schema: [],
+        messages: {
+            preferClassBinding: 'Consider using [class] bindings instead of [ngClass] where applicable.',
+        },
+    },
+    defaultOptions: [],
+    create(context) {
+        const parserServices = (0, utils_1.getTemplateParserServices)(context);
+        return {
+            'BoundAttribute[name="ngClass"]'(node) {
+                // Skip if ngClass is necessary (e.g., uses space-separated class names)
+                if (requiresNgClass(node)) {
+                    return;
+                }
+                const loc = parserServices.convertNodeSourceSpanToLoc(node.sourceSpan);
+                context.report({
+                    messageId: 'preferClassBinding',
+                    loc,
+                });
+            },
+        };
+    },
+});
+let parser = null;
+/**
+ * Instantiate the `Parser` class lazily only when this rule is applied.
+ */
+function getParser() {
+    return parser || (parser = new bundled_angular_compiler_1.Parser(new bundled_angular_compiler_1.Lexer()));
+}
+/**
+ * Checks if a string contains space-separated class names
+ */
+function hasSpaceSeparatedClasses(str) {
+    return /\s/.test(str.trim());
+}
+/**
+ * Checks if the ngClass binding uses features that class bindings don't support:
+ * - Object keys with space-separated class names
+ */
+function requiresNgClass(node) {
+    // Check if we have a value with source code
+    if (!node.value?.source || !node.valueSpan) {
+        return false;
+    }
+    // Parse the binding to get the AST
+    const parsedAst = getParser().parseBinding(node.value.source, node.valueSpan, 0).ast;
+    if (parsedAst instanceof bundled_angular_compiler_1.LiteralMap) {
+        for (const astKey of parsedAst.keys) {
+            const className = astKey.key;
+            if (typeof className === 'string' &&
+                hasSpaceSeparatedClasses(className)) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+exports.RULE_DOCS_EXTENSION = {
+    rationale: 'For simple cases, [class] bindings offer a more straightforward syntax with better performance than ngClass. However, ngClass should still be used when you need: (1) space-separated class names in a single key, or (2) mutations on objects, as class bindings do not support these use cases (the reference must change for class bindings to detect updates). See https://angular.dev/guide/templates/binding#css-class-and-style-property-bindings for more information. This rule helps identify potential simplification opportunities but should be applied judiciously based on your specific needs.',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-eslint/eslint-plugin-template",
-  "version": "21.1.1-alpha.3",
+  "version": "21.1.1-alpha.5",
   "description": "ESLint plugin for Angular Templates",
   "license": "MIT",
   "main": "dist/index.js",
@@ -20,19 +20,19 @@
   "dependencies": {
     "aria-query": "5.3.2",
     "axobject-query": "4.1.0",
-    "@angular-eslint/bundled-angular-compiler": "21.1.1-alpha.3",
-    "@angular-eslint/utils": "21.1.1-alpha.3"
+    "@angular-eslint/bundled-angular-compiler": "21.1.1-alpha.5",
+    "@angular-eslint/utils": "21.1.1-alpha.5"
   },
   "devDependencies": {
     "@types/aria-query": "5.0.4",
-    "@angular-eslint/test-utils": "21.1.1-alpha.3"
+    "@angular-eslint/test-utils": "21.1.1-alpha.5"
   },
   "peerDependencies": {
     "@typescript-eslint/types": "^7.11.0 || ^8.0.0",
     "@typescript-eslint/utils": "^7.11.0 || ^8.0.0",
     "eslint": "^8.57.0 || ^9.0.0",
     "typescript": "*",
-    "@angular-eslint/template-parser": "21.1.1-alpha.3"
+    "@angular-eslint/template-parser": "21.1.1-alpha.5"
   },
   "gitHead": "e2006e5e9c99e5a943d1a999e0efa5247d29ec24"
 }