@angular-eslint/eslint-plugin-template 19.3.1-alpha.21 → 19.3.1-alpha.23

package/README.md

@@ -64,6 +64,7 @@ Please see https://github.com/angular-eslint/angular-eslint for full usage instr
 | [`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-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: |
 | [`use-track-by-function`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/use-track-by-function.md) | Ensures trackBy function is used |  |  |  |  |

package/dist/configs/all.json

@@ -29,6 +29,7 @@
     "@angular-eslint/template/prefer-ngsrc": "error",
     "@angular-eslint/template/prefer-self-closing-tags": "error",
     "@angular-eslint/template/prefer-static-string-properties": "error",
+    "@angular-eslint/template/prefer-template-literal": "error",
     "@angular-eslint/template/role-has-required-aria": "error",
     "@angular-eslint/template/table-scope": "error",
     "@angular-eslint/template/use-track-by-function": "error",

package/dist/index.d.ts

@@ -31,6 +31,7 @@ declare const _default: {
                 "@angular-eslint/template/prefer-ngsrc": string;
                 "@angular-eslint/template/prefer-self-closing-tags": string;
                 "@angular-eslint/template/prefer-static-string-properties": string;
+                "@angular-eslint/template/prefer-template-literal": string;
                 "@angular-eslint/template/role-has-required-aria": string;
                 "@angular-eslint/template/table-scope": string;
                 "@angular-eslint/template/use-track-by-function": string;
@@ -111,6 +112,7 @@ declare const _default: {
         "prefer-self-closing-tags": import("@typescript-eslint/utils/ts-eslint").RuleModule<"preferSelfClosingTags", [], import("./utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
         "prefer-static-string-properties": import("@typescript-eslint/utils/ts-eslint").RuleModule<"preferStaticStringProperties", [], 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>;
+        "prefer-template-literal": import("@typescript-eslint/utils/ts-eslint").RuleModule<"preferTemplateLiteral", [], import("./utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
         "role-has-required-aria": import("@typescript-eslint/utils/ts-eslint").RuleModule<import("./rules/role-has-required-aria").MessageIds, [], import("./utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
         "table-scope": import("@typescript-eslint/utils/ts-eslint").RuleModule<"tableScope", [], import("./utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
         "use-track-by-function": import("@typescript-eslint/utils/ts-eslint").RuleModule<"useTrackByFunction", import("./rules/use-track-by-function").Options, 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFA,kBAyCE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4FA,kBA0CE"}

package/dist/index.js

@@ -67,6 +67,7 @@ const prefer_contextual_for_variables_1 = __importStar(require("./rules/prefer-c
 const prefer_control_flow_1 = __importStar(require("./rules/prefer-control-flow"));
 const prefer_self_closing_tags_1 = __importStar(require("./rules/prefer-self-closing-tags"));
 const prefer_static_string_properties_1 = __importStar(require("./rules/prefer-static-string-properties"));
+const prefer_template_literal_1 = __importStar(require("./rules/prefer-template-literal"));
 const role_has_required_aria_1 = __importStar(require("./rules/role-has-required-aria"));
 const table_scope_1 = __importStar(require("./rules/table-scope"));
 const use_track_by_function_1 = __importStar(require("./rules/use-track-by-function"));
@@ -107,6 +108,7 @@ module.exports = {
         [prefer_self_closing_tags_1.RULE_NAME]: prefer_self_closing_tags_1.default,
         [prefer_static_string_properties_1.RULE_NAME]: prefer_static_string_properties_1.default,
         [prefer_ngsrc_1.RULE_NAME]: prefer_ngsrc_1.default,
+        [prefer_template_literal_1.RULE_NAME]: prefer_template_literal_1.default,
         [role_has_required_aria_1.RULE_NAME]: role_has_required_aria_1.default,
         [table_scope_1.RULE_NAME]: table_scope_1.default,
         [use_track_by_function_1.RULE_NAME]: use_track_by_function_1.default,

package/dist/rules/eqeqeq.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"eqeqeq.d.ts","sourceRoot":"","sources":["../../src/rules/eqeqeq.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAIzD,MAAM,MAAM,OAAO,GAAG,CAAC;IAAE,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AACpE,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,uBAAuB,CAAC;AAC5D,eAAO,MAAM,SAAS,WAAW,CAAC;;AAGlC,wBA4EG"}
+{"version":3,"file":"eqeqeq.d.ts","sourceRoot":"","sources":["../../src/rules/eqeqeq.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAQzD,MAAM,MAAM,OAAO,GAAG,CAAC;IAAE,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AACpE,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,uBAAuB,CAAC;AAC5D,eAAO,MAAM,SAAS,WAAW,CAAC;;AAGlC,wBA4EG"}

package/dist/rules/eqeqeq.js

@@ -5,6 +5,7 @@ const bundled_angular_compiler_1 = require("@angular-eslint/bundled-angular-comp
 const utils_1 = require("@angular-eslint/utils");
 const create_eslint_rule_1 = require("../utils/create-eslint-rule");
 const get_nearest_node_from_1 = require("../utils/get-nearest-node-from");
+const literal_primitive_1 = require("../utils/literal-primitive");
 exports.RULE_NAME = 'eqeqeq';
 const DEFAULT_OPTIONS = { allowNullOrUndefined: false };
 exports.default = (0, create_eslint_rule_1.createESLintRule)({
@@ -97,9 +98,6 @@ function isLeadingTriviaChar(char) {
 function isASTWithSource(node) {
     return node instanceof bundled_angular_compiler_1.ASTWithSource;
 }
-function isLiteralPrimitive(node) {
-    return node instanceof bundled_angular_compiler_1.LiteralPrimitive;
-}
 function isInterpolation(node) {
     return node instanceof bundled_angular_compiler_1.Interpolation;
 }
@@ -107,12 +105,9 @@ function isNumeric(value) {
     return (!Number.isNaN(Number.parseFloat(String(value))) &&
         Number.isFinite(Number(value)));
 }
-function isString(value) {
-    return typeof value === 'string';
-}
 function isStringNonNumericValue(ast) {
-    return (isLiteralPrimitive(ast) && isString(ast.value) && !isNumeric(ast.value));
+    return (0, literal_primitive_1.isStringLiteralPrimitive)(ast) && !isNumeric(ast.value);
 }
 function isNilValue(ast) {
-    return (isLiteralPrimitive(ast) && (ast.value === null || ast.value === undefined));
+    return ((0, literal_primitive_1.isLiteralPrimitive)(ast) && (ast.value === null || ast.value === undefined));
 }

package/dist/rules/prefer-template-literal.d.ts

@@ -0,0 +1,7 @@
+declare const messageId = "preferTemplateLiteral";
+export type Options = [];
+export type MessageIds = typeof messageId;
+export declare const RULE_NAME = "prefer-template-literal";
+declare const _default: import("@typescript-eslint/utils/ts-eslint").RuleModule<"preferTemplateLiteral", [], import("../utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
+export default _default;
+//# sourceMappingURL=prefer-template-literal.d.ts.map

package/dist/rules/prefer-template-literal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prefer-template-literal.d.ts","sourceRoot":"","sources":["../../src/rules/prefer-template-literal.ts"],"names":[],"mappings":"AAeA,QAAA,MAAM,SAAS,0BAA0B,CAAC;AAE1C,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC;AAC1C,eAAO,MAAM,SAAS,4BAA4B,CAAC;;AAEnD,wBAwFG"}

package/dist/rules/prefer-template-literal.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+const literal_primitive_1 = require("../utils/literal-primitive");
+const messageId = 'preferTemplateLiteral';
+exports.RULE_NAME = 'prefer-template-literal';
+exports.default = (0, create_eslint_rule_1.createESLintRule)({
+    name: exports.RULE_NAME,
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Ensure that template literals are used instead of concatenating strings or expressions.',
+        },
+        fixable: 'code',
+        schema: [],
+        messages: {
+            preferTemplateLiteral: 'Prefer using template literal instead of concatenating strings or expressions',
+        },
+    },
+    defaultOptions: [],
+    create(context) {
+        (0, utils_1.ensureTemplateParser)(context);
+        const { sourceCode } = context;
+        return {
+            'Binary[operation="+"]'(node) {
+                const { left, right } = node;
+                const isLeftString = (0, literal_primitive_1.isStringLiteralPrimitive)(left) || left instanceof bundled_angular_compiler_1.TemplateLiteral;
+                const isRightString = (0, literal_primitive_1.isStringLiteralPrimitive)(right) || right instanceof bundled_angular_compiler_1.TemplateLiteral;
+                // If both sides are not strings, we don't report anything
+                if (!isLeftString && !isRightString) {
+                    return;
+                }
+                const { sourceSpan: { start, end }, } = node;
+                function getQuote() {
+                    const leftValue = sourceCode.text.at(left.sourceSpan.start);
+                    if (leftValue === "'" || leftValue === '"') {
+                        return leftValue;
+                    }
+                    const rightValue = sourceCode.text.at(right.sourceSpan.start);
+                    if (rightValue === "'" || rightValue === '"') {
+                        return rightValue;
+                    }
+                    return '`';
+                }
+                context.report({
+                    loc: {
+                        start: sourceCode.getLocFromIndex(start),
+                        end: sourceCode.getLocFromIndex(end),
+                    },
+                    messageId,
+                    fix: (fixer) => {
+                        // If both sides are literals, we remove the `+` sign, escape if necessary and concatenate them
+                        if (left instanceof bundled_angular_compiler_1.LiteralPrimitive &&
+                            right instanceof bundled_angular_compiler_1.LiteralPrimitive) {
+                            const quote = getQuote();
+                            return fixer.replaceTextRange([start, end], `${quote}${(0, literal_primitive_1.getLiteralPrimitiveStringValue)(left, quote)}${(0, literal_primitive_1.getLiteralPrimitiveStringValue)(right, quote)}${quote}`);
+                        }
+                        const fixes = new Array();
+                        // Fix the left side
+                        fixes.push(...getLeftSideFixes(fixer, left));
+                        // Remove the `+` sign
+                        fixes.push(fixer.removeRange([left.sourceSpan.end, right.sourceSpan.start]));
+                        // Fix the right side
+                        fixes.push(...getRightSideFixes(fixer, right));
+                        return fixes;
+                    },
+                });
+            },
+        };
+    },
+});
+function getLeftSideFixes(fixer, left) {
+    const { start, end } = left.sourceSpan;
+    if (left instanceof bundled_angular_compiler_1.TemplateLiteral) {
+        // Remove the end ` sign from the left side
+        return [fixer.removeRange([end - 1, end])];
+    }
+    else if ((0, literal_primitive_1.isLiteralPrimitive)(left)) {
+        // Transform left side to template literal
+        return [
+            fixer.replaceTextRange([start, end], `\`${(0, literal_primitive_1.getLiteralPrimitiveStringValue)(left, '`')}`),
+        ];
+    }
+    else {
+        // Transform left side to template literal
+        return [
+            fixer.insertTextBeforeRange([start, end], '`${'),
+            fixer.insertTextAfterRange([start, end], '}'),
+        ];
+    }
+}
+function getRightSideFixes(fixer, right) {
+    const { start, end } = right.sourceSpan;
+    if (right instanceof bundled_angular_compiler_1.TemplateLiteral) {
+        // Remove the start ` sign from the right side
+        return [fixer.removeRange([start, start + 1])];
+    }
+    else if ((0, literal_primitive_1.isLiteralPrimitive)(right)) {
+        // Transform right side to template literal if it's a string
+        return [
+            fixer.replaceTextRange([start, end], `${(0, literal_primitive_1.getLiteralPrimitiveStringValue)(right, '`')}\``),
+        ];
+    }
+    else {
+        // Transform right side to template literal
+        return [
+            fixer.insertTextBeforeRange([start, end], '${'),
+            fixer.insertTextAfterRange([start, end], '}`'),
+        ];
+    }
+}

package/dist/utils/literal-primitive.d.ts

@@ -0,0 +1,7 @@
+import { AST, LiteralPrimitive } from '@angular-eslint/bundled-angular-compiler';
+export declare function isLiteralPrimitive(node: AST): node is LiteralPrimitive;
+export declare function isStringLiteralPrimitive(node: AST): node is Omit<LiteralPrimitive, 'value'> & {
+    value: string;
+};
+export declare function getLiteralPrimitiveStringValue(node: LiteralPrimitive, quote: "'" | '"' | '`'): string;
+//# sourceMappingURL=literal-primitive.d.ts.map

package/dist/utils/literal-primitive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"literal-primitive.d.ts","sourceRoot":"","sources":["../../src/utils/literal-primitive.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,GAAG,EACH,gBAAgB,EACjB,MAAM,0CAA0C,CAAC;AAElD,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI,IAAI,gBAAgB,CAEtE;AAED,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,GAAG,GACR,IAAI,IAAI,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAE7D;AAED,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GACrB,MAAM,CAIR"}

package/dist/utils/literal-primitive.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isLiteralPrimitive = isLiteralPrimitive;
+exports.isStringLiteralPrimitive = isStringLiteralPrimitive;
+exports.getLiteralPrimitiveStringValue = getLiteralPrimitiveStringValue;
+const bundled_angular_compiler_1 = require("@angular-eslint/bundled-angular-compiler");
+function isLiteralPrimitive(node) {
+    return node instanceof bundled_angular_compiler_1.LiteralPrimitive;
+}
+function isStringLiteralPrimitive(node) {
+    return isLiteralPrimitive(node) && typeof node.value === 'string';
+}
+function getLiteralPrimitiveStringValue(node, quote) {
+    return typeof node.value === 'string'
+        ? `${node.value.replaceAll(quote, `\\${quote}`)}`
+        : String(node.value);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-eslint/eslint-plugin-template",
-  "version": "19.3.1-alpha.21",
+  "version": "19.3.1-alpha.23",
   "description": "ESLint plugin for Angular Templates",
   "license": "MIT",
   "main": "dist/index.js",
@@ -20,13 +20,13 @@
   "dependencies": {
     "aria-query": "5.3.2",
     "axobject-query": "4.1.0",
-    "@angular-eslint/bundled-angular-compiler": "19.3.1-alpha.21",
-    "@angular-eslint/utils": "19.3.1-alpha.21"
+    "@angular-eslint/bundled-angular-compiler": "19.3.1-alpha.23",
+    "@angular-eslint/utils": "19.3.1-alpha.23"
   },
   "devDependencies": {
     "@types/aria-query": "5.0.4",
-    "@angular-eslint/template-parser": "19.3.1-alpha.21",
-    "@angular-eslint/test-utils": "19.3.1-alpha.21"
+    "@angular-eslint/template-parser": "19.3.1-alpha.23",
+    "@angular-eslint/test-utils": "19.3.1-alpha.23"
   },
   "peerDependencies": {
     "@typescript-eslint/types": "^7.11.0 || ^8.0.0",