@angular-eslint/eslint-plugin-template 20.6.1-alpha.6 → 20.6.1-alpha.7

package/README.md

@@ -68,7 +68,7 @@ Please see https://github.com/angular-eslint/angular-eslint for full usage instr
 | [`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-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. |  |  |  |  |
-| [`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 |  |  |  |  |
+| [`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: |  |
 | [`prefer-template-literal`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/prefer-template-literal.md) | Ensure that template literals are used instead of concatenating strings or expressions. |  | :wrench: |  |  |
 | [`role-has-required-aria`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/role-has-required-aria.md) | [Accessibility] Ensures elements with ARIA roles have all required properties for that role. |  |  | :bulb: | :accessibility: |
 | [`table-scope`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/table-scope.md) | [Accessibility] Ensures that the `scope` attribute is only used on the `<th>` element |  | :wrench: |  | :accessibility: |

package/dist/rules/prefer-ngsrc.d.ts

@@ -1,5 +1,5 @@
 export type Options = [];
-export type MessageIds = 'missingAttribute' | 'invalidDoubleSource';
+export type MessageIds = 'missingAttribute' | 'invalidDoubleSource' | 'suggestReplaceWithNgSrc' | 'suggestRemoveSrc';
 export declare const RULE_NAME = "prefer-ngsrc";
 declare const _default: import("@typescript-eslint/utils/ts-eslint").RuleModule<MessageIds, [], import("../utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
 export default _default;

package/dist/rules/prefer-ngsrc.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prefer-ngsrc.d.ts","sourceRoot":"","sources":["../../src/rules/prefer-ngsrc.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;AACpE,eAAO,MAAM,SAAS,iBAAiB,CAAC;;AAExC,wBA4CG;AAqDH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}
+{"version":3,"file":"prefer-ngsrc.d.ts","sourceRoot":"","sources":["../../src/rules/prefer-ngsrc.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAClB,kBAAkB,GAClB,qBAAqB,GACrB,yBAAyB,GACzB,kBAAkB,CAAC;AACvB,eAAO,MAAM,SAAS,iBAAiB,CAAC;;AAExC,wBA4HG;AAqDH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}

package/dist/rules/prefer-ngsrc.js

@@ -12,15 +12,74 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
         docs: {
             description: 'Ensures ngSrc is used instead of src for img elements',
         },
+        hasSuggestions: true,
         schema: [],
         messages: {
             missingAttribute: 'The attribute [ngSrc] should be used for img elements instead of [src].',
             invalidDoubleSource: 'Only [ngSrc] should exist on an img element. Delete the [src] attribute.',
+            suggestReplaceWithNgSrc: 'Replace [src] with [ngSrc]',
+            suggestRemoveSrc: 'Remove the [src] attribute',
         },
     },
     defaultOptions: [],
     create(context) {
         const parserServices = (0, utils_1.getTemplateParserServices)(context);
+        const sourceCode = context.sourceCode;
+        function reportMissingNgSrc(srcAttribute) {
+            const loc = parserServices.convertNodeSourceSpanToLoc(srcAttribute.sourceSpan);
+            context.report({
+                loc,
+                messageId: 'missingAttribute',
+                suggest: [
+                    {
+                        messageId: 'suggestReplaceWithNgSrc',
+                        fix: (fixer) => {
+                            const originalAttribute = sourceCode
+                                .getText()
+                                .slice(srcAttribute.sourceSpan.start.offset, srcAttribute.sourceSpan.end.offset);
+                            let updatedAttribute;
+                            if (originalAttribute.startsWith('[attr.src]')) {
+                                updatedAttribute = originalAttribute.replace(/^\[attr\.src]/, '[ngSrc]');
+                            }
+                            else if (originalAttribute.startsWith('[src]')) {
+                                updatedAttribute = originalAttribute.replace(/^\[src]/, '[ngSrc]');
+                            }
+                            else {
+                                updatedAttribute = originalAttribute.replace(/^src/, 'ngSrc');
+                            }
+                            return fixer.replaceTextRange([
+                                srcAttribute.sourceSpan.start.offset,
+                                srcAttribute.sourceSpan.end.offset,
+                            ], updatedAttribute);
+                        },
+                    },
+                ],
+            });
+        }
+        function reportDoubleSrc(srcAttribute) {
+            const loc = parserServices.convertNodeSourceSpanToLoc(srcAttribute.sourceSpan);
+            context.report({
+                loc,
+                messageId: 'invalidDoubleSource',
+                suggest: [
+                    {
+                        messageId: 'suggestRemoveSrc',
+                        fix: (fixer) => {
+                            const fullText = sourceCode.getText();
+                            let startOffset = srcAttribute.sourceSpan.start.offset;
+                            // Move back to include preceding whitespace
+                            while (startOffset > 0 && /\s/.test(fullText[startOffset - 1])) {
+                                startOffset--;
+                            }
+                            return fixer.removeRange([
+                                startOffset,
+                                srcAttribute.sourceSpan.end.offset,
+                            ]);
+                        },
+                    },
+                ],
+            });
+        }
         return {
             'Element[name=/^img$/i]'(element) {
                 const ngSrcAttribute = getNgSrcAttribute(element);
@@ -29,13 +88,12 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
                     (!ngSrcAttribute && isSrcBase64Image(srcAttribute))) {
                     return;
                 }
-                const loc = parserServices.convertNodeSourceSpanToLoc(srcAttribute.sourceSpan);
-                context.report({
-                    loc,
-                    messageId: !ngSrcAttribute
-                        ? 'missingAttribute'
-                        : 'invalidDoubleSource',
-                });
+                if (!ngSrcAttribute) {
+                    reportMissingNgSrc(srcAttribute);
+                }
+                else {
+                    reportDoubleSrc(srcAttribute);
+                }
             },
         };
     },

package/package.json

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