@angular-eslint/eslint-plugin-template 20.0.0-beta.0 → 20.0.0

package/README.md

@@ -59,7 +59,7 @@ Please see https://github.com/angular-eslint/angular-eslint for full usage instr
 | [`no-call-expression`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/no-call-expression.md) | Disallows calling expressions in templates, except for output handlers |  |  |  |  |
 | [`no-distracting-elements`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/no-distracting-elements.md) | [Accessibility] Enforces that no distracting elements are used |  | :wrench: |  | :accessibility: |
 | [`no-inline-styles`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/no-inline-styles.md) | Disallows the use of inline styles in HTML templates |  |  |  |  |
-| [`no-interpolation-in-attributes`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/no-interpolation-in-attributes.md) | Ensures that property-binding is used instead of interpolation in attributes. |  |  |  |  |
+| [`no-interpolation-in-attributes`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/no-interpolation-in-attributes.md) | Ensures that property-binding is used instead of interpolation in attributes. |  | :wrench: |  |  |
 | [`no-negated-async`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/no-negated-async.md) | Ensures that async pipe results, as well as values used with the async pipe, are not negated | :white_check_mark: |  | :bulb: |  |
 | [`no-positive-tabindex`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/no-positive-tabindex.md) | Ensures that the `tabindex` attribute is not positive |  |  | :bulb: |  |
 | [`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: |  |  |

package/dist/rules/no-interpolation-in-attributes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"no-interpolation-in-attributes.d.ts","sourceRoot":"","sources":["../../src/rules/no-interpolation-in-attributes.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,OAAO,GAAG,CAAC;IAAE,2BAA2B,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AACjE,MAAM,MAAM,UAAU,GAAG,6BAA6B,CAAC;AACvD,eAAO,MAAM,SAAS,mCAAmC,CAAC;;AAY1D,wBAmDG"}
+{"version":3,"file":"no-interpolation-in-attributes.d.ts","sourceRoot":"","sources":["../../src/rules/no-interpolation-in-attributes.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,OAAO,GAAG,CAAC;IAAE,2BAA2B,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AACjE,MAAM,MAAM,UAAU,GAAG,6BAA6B,CAAC;AACvD,eAAO,MAAM,SAAS,mCAAmC,CAAC;;AAY1D,wBA+EG"}

package/dist/rules/no-interpolation-in-attributes.js

@@ -34,14 +34,20 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
         messages: {
             noInterpolationInAttributes: 'Use property binding [attribute]="value" instead of interpolation {{ value }} for an attribute.',
         },
+        fixable: 'code',
     },
     defaultOptions: [{ allowSubstringInterpolation: false }],
     create(context, [{ allowSubstringInterpolation }]) {
         const sourceCode = context.sourceCode;
         return {
             ['BoundAttribute Interpolation'](interpolation) {
-                if (allowSubstringInterpolation &&
-                    interpolation.strings.some((str) => str !== '')) {
+                const isFullInterpolation = !interpolation.strings.some((str) => str !== '');
+                if (allowSubstringInterpolation && !isFullInterpolation) {
+                    return;
+                }
+                // 'parent' is an internal runtime property not declared in the type, hence the 'any' cast.
+                const boundAttribute = interpolation.parent?.parent;
+                if (!boundAttribute) {
                     return;
                 }
                 const { sourceSpan: { start, end }, } = interpolation;
@@ -51,6 +57,20 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
                         end: sourceCode.getLocFromIndex(end),
                     },
                     messageId: 'noInterpolationInAttributes',
+                    fix: isFullInterpolation
+                        ? (fixer) => {
+                            const attributeName = boundAttribute.name.trim();
+                            const exprStart = boundAttribute.valueSpan.start.offset + 2; // +2 to remove '{{'
+                            const exprEnd = boundAttribute.valueSpan.end.offset - 2; // -2 to remove '}}'
+                            const expression = sourceCode.text
+                                .slice(exprStart, exprEnd)
+                                .trim();
+                            return fixer.replaceTextRange([
+                                boundAttribute.keySpan.start.offset,
+                                boundAttribute.valueSpan.end.offset,
+                            ], `[${attributeName}]="${expression}`);
+                        }
+                        : null,
                 });
             },
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-eslint/eslint-plugin-template",
-  "version": "20.0.0-beta.0",
+  "version": "20.0.0",
   "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": "20.0.0-beta.0",
-    "@angular-eslint/utils": "20.0.0-beta.0"
+    "@angular-eslint/bundled-angular-compiler": "20.0.0",
+    "@angular-eslint/utils": "20.0.0"
   },
   "devDependencies": {
     "@types/aria-query": "5.0.4",
-    "@angular-eslint/test-utils": "20.0.0-beta.0"
+    "@angular-eslint/test-utils": "20.0.0"
   },
   "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": "20.0.0-beta.0"
+    "@angular-eslint/template-parser": "20.0.0"
   },
   "gitHead": "e2006e5e9c99e5a943d1a999e0efa5247d29ec24"
 }