@angular-eslint/eslint-plugin-template 19.4.1-alpha.2 → 19.4.1-alpha.4

package/README.md

@@ -62,6 +62,7 @@ Please see https://github.com/angular-eslint/angular-eslint for full usage instr
 | [`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-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: |  |  |
 | [`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 |  |  |  |  |

package/dist/configs/all.json

@@ -25,6 +25,7 @@
     "@angular-eslint/template/no-negated-async": "error",
     "@angular-eslint/template/no-nested-tags": "error",
     "@angular-eslint/template/no-positive-tabindex": "error",
+    "@angular-eslint/template/prefer-at-empty": "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

@@ -27,6 +27,7 @@ declare const _default: {
                 "@angular-eslint/template/no-negated-async": string;
                 "@angular-eslint/template/no-nested-tags": string;
                 "@angular-eslint/template/no-positive-tabindex": string;
+                "@angular-eslint/template/prefer-at-empty": string;
                 "@angular-eslint/template/prefer-contextual-for-variables": string;
                 "@angular-eslint/template/prefer-control-flow": string;
                 "@angular-eslint/template/prefer-ngsrc": string;
@@ -109,6 +110,7 @@ declare const _default: {
         "no-interpolation-in-attributes": import("@typescript-eslint/utils/ts-eslint").RuleModule<"noInterpolationInAttributes", import("./rules/no-interpolation-in-attributes").Options, import("./utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
         "no-negated-async": import("@typescript-eslint/utils/ts-eslint").RuleModule<import("./rules/no-negated-async").MessageIds, [], import("./utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
         "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-empty": import("@typescript-eslint/utils/ts-eslint").RuleModule<"preferAtEmpty", [], 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-self-closing-tags": import("@typescript-eslint/utils/ts-eslint").RuleModule<"preferSelfClosingTags", [], 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+FA,kBA2CE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGA,kBA4CE"}

package/dist/index.js

@@ -64,6 +64,7 @@ const no_negated_async_1 = __importStar(require("./rules/no-negated-async"));
 const no_nested_tags_1 = __importStar(require("./rules/no-nested-tags"));
 const no_positive_tabindex_1 = __importStar(require("./rules/no-positive-tabindex"));
 const prefer_ngsrc_1 = __importStar(require("./rules/prefer-ngsrc"));
+const prefer_at_empty_1 = __importStar(require("./rules/prefer-at-empty"));
 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"));
@@ -105,6 +106,7 @@ module.exports = {
         [no_interpolation_in_attributes_1.RULE_NAME]: no_interpolation_in_attributes_1.default,
         [no_negated_async_1.RULE_NAME]: no_negated_async_1.default,
         [no_positive_tabindex_1.RULE_NAME]: no_positive_tabindex_1.default,
+        [prefer_at_empty_1.RULE_NAME]: prefer_at_empty_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_self_closing_tags_1.RULE_NAME]: prefer_self_closing_tags_1.default,

package/dist/rules/prefer-at-empty.d.ts

@@ -0,0 +1,6 @@
+export type Options = [];
+export type MessageIds = 'preferAtEmpty';
+export declare const RULE_NAME = "prefer-at-empty";
+declare const _default: import("@typescript-eslint/utils/ts-eslint").RuleModule<"preferAtEmpty", [], import("../utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
+export default _default;
+//# sourceMappingURL=prefer-at-empty.d.ts.map

package/dist/rules/prefer-at-empty.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prefer-at-empty.d.ts","sourceRoot":"","sources":["../../src/rules/prefer-at-empty.ts"],"names":[],"mappings":"AAkBA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG,eAAe,CAAC;AACzC,eAAO,MAAM,SAAS,oBAAoB,CAAC;;AAE3C,wBAgaG"}

package/dist/rules/prefer-at-empty.js

@@ -0,0 +1,492 @@
+"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 are_equivalent_asts_1 = require("../utils/are-equivalent-asts");
+exports.RULE_NAME = 'prefer-at-empty';
+exports.default = (0, create_eslint_rule_1.createESLintRule)({
+    name: exports.RULE_NAME,
+    meta: {
+        type: 'suggestion',
+        fixable: 'code',
+        docs: {
+            description: 'Prefer using `@empty` with `@for` loops instead of a separate `@if` or `@else` block to reduce code and make it easier to read.',
+        },
+        schema: [],
+        messages: {
+            preferAtEmpty: 'Prefer using `@for (...) {...} @empty {...}`.',
+        },
+    },
+    defaultOptions: [],
+    create(context) {
+        const parserServices = (0, utils_1.getTemplateParserServices)(context);
+        const previousNodeStack = [undefined];
+        function getOnlyForBlock(node) {
+            let forBlock;
+            // Find the only `@for` block in the children,
+            // ignoring any text nodes that are only whitespace.
+            for (const child of node.children) {
+                if (child instanceof bundled_angular_compiler_1.TmplAstForLoopBlock) {
+                    if (forBlock) {
+                        return undefined;
+                    }
+                    forBlock = child;
+                }
+                else if (child instanceof bundled_angular_compiler_1.TmplAstText) {
+                    // The `value` property contains the HTML-decoded
+                    // value, so we need to look at the raw source code
+                    // to see if the content is only whitespace.
+                    if (context.sourceCode.text
+                        .slice(child.sourceSpan.start.offset, child.sourceSpan.end.offset)
+                        .trim() !== '') {
+                        return undefined;
+                    }
+                }
+                else {
+                    return undefined;
+                }
+            }
+            return forBlock;
+        }
+        function checkFor(forInfo, previous) {
+            // If the `@for` block is immediately preceded by an "if empty"
+            // block for the same collection, then that `@if` block can
+            // be moved into the `@empty` block.
+            if (previous?.kind === 'if-empty') {
+                if ((0, are_equivalent_asts_1.areEquivalentASTs)(forInfo.collection, previous.collection)) {
+                    const branch = previous.node.branches[0];
+                    const branchEnd = branch.endSourceSpan;
+                    context.report({
+                        loc: parserServices.convertNodeSourceSpanToLoc(previous.node.nameSpan),
+                        messageId: 'preferAtEmpty',
+                        fix: branchEnd
+                            ? function* (fixer) {
+                                // Remove the entire `@if` block.
+                                yield fixer.removeRange(toRange(previous.node.sourceSpan));
+                                if (forInfo.node.empty) {
+                                    // There is already an `@empty` block. The contents of the
+                                    // `@if` block and the contents of the `@empty` block would
+                                    // both be shown in the collection is empty, so we need to
+                                    // combine the two blocks. The `@if` block would be rendered
+                                    // first, so it needs to be inserted before the existing
+                                    // contents of the `@empty` block.
+                                    yield fixer.insertTextAfterRange([
+                                        forInfo.node.empty.nameSpan.end.offset,
+                                        forInfo.node.empty.startSourceSpan.end.offset,
+                                    ], context.sourceCode.text.slice(branch.startSourceSpan.end.offset, 
+                                    // The end offset is after the closing `}`, so we
+                                    // need to subtract one to ensure it's not included.
+                                    branchEnd.end.offset - 1));
+                                }
+                                else {
+                                    // Take the contents of the `@if` block and move
+                                    // it into an `@empty` block after the `@for` block.
+                                    yield fixer.insertTextAfterRange(toRange(forInfo.node.sourceSpan), ` @empty {${context.sourceCode.text.slice(branch.startSourceSpan.end.offset, branchEnd.end.offset)}`);
+                                }
+                            }
+                            : undefined,
+                    });
+                }
+            }
+        }
+        function checkIfEmpty(ifInfo, previous) {
+            if (!previous) {
+                return;
+            }
+            // If the `@if` block is immediately preceded by a `@for`
+            // block for the same collection, then that `@if` block
+            // can be moved into the `@empty` block.
+            switch (previous.kind) {
+                case 'for':
+                    if ((0, are_equivalent_asts_1.areEquivalentASTs)(ifInfo.collection, previous.collection)) {
+                        // The `@if` block can be moved into the `@for` block,
+                        // so report the problem on the `@if` block.
+                        context.report({
+                            loc: parserServices.convertNodeSourceSpanToLoc(ifInfo.node.nameSpan),
+                            messageId: 'preferAtEmpty',
+                            fix: function* (fixer) {
+                                if (previous.node.empty?.endSourceSpan) {
+                                    // There is already an `@empty` block. The contents of
+                                    // the `@empty` block and the `@if` block would both be
+                                    // rendered. The `@empty` block would appear first, so
+                                    // we need to move the contents of the `@if` block after
+                                    // the existing contents of the `@empty` block. This can
+                                    // easily be achieved by removing the closing brace of the
+                                    // `@empty` block and removing the `@if` statement.
+                                    yield fixer.removeRange(toRange(previous.node.empty.endSourceSpan));
+                                    yield fixer.removeRange(toRange(ifInfo.node.startSourceSpan));
+                                }
+                                else {
+                                    // There is not already an `@empty` block, so
+                                    // we can create one by replacing the entire
+                                    // `@if (...) {` segment with `@empty {`.
+                                    yield fixer.replaceTextRange(toRange(ifInfo.node.startSourceSpan), '@empty {');
+                                }
+                            },
+                        });
+                    }
+                    break;
+                case 'if-not-empty':
+                    if ((0, are_equivalent_asts_1.areEquivalentASTs)(ifInfo.collection, previous.collection)) {
+                        const forBlock = getOnlyForBlock(previous.node.branches[0]);
+                        if (forBlock &&
+                            (0, are_equivalent_asts_1.areEquivalentASTs)(ifInfo.collection, forBlock.expression.ast)) {
+                            const previousIfBlockEnd = previous.node.endSourceSpan;
+                            // The previous `@if` block can be removed and the current `@if`
+                            // block moved into the `@for` block's `@empty` block, so report
+                            // the problem on the previous `@if` block.
+                            context.report({
+                                loc: parserServices.convertNodeSourceSpanToLoc(previous.node.nameSpan),
+                                messageId: 'preferAtEmpty',
+                                fix: previousIfBlockEnd
+                                    ? (fixer) => [
+                                        // Remove the previous `@if` statement.
+                                        fixer.removeRange(toRange(previous.node.startSourceSpan)),
+                                        // Remove the closing brace from the previous `@if` block.
+                                        fixer.removeRange(toRange(previousIfBlockEnd)),
+                                        // Take the contents of the current `@if` block and move
+                                        // it into the `@empty` block of the previous `@for` block.
+                                        fixer.insertTextAfterRange(toRange(forBlock.sourceSpan), ` @empty {${context.sourceCode.text.slice(ifInfo.node.startSourceSpan.end.offset, 
+                                        // The end offset includes the closing brace.
+                                        ifInfo.node.sourceSpan.end.offset)}`),
+                                        // Remove the entirety of the current `@if` block.
+                                        fixer.removeRange(toRange(ifInfo.node.sourceSpan)),
+                                    ]
+                                    : undefined,
+                            });
+                        }
+                    }
+            }
+        }
+        function checkIfEmptyElse(info) {
+            // Look for an `@for` block in the `@else` branch.
+            const forBlock = getOnlyForBlock(info.node.branches[1]);
+            if (forBlock &&
+                (0, are_equivalent_asts_1.areEquivalentASTs)(info.collection, forBlock.expression.ast)) {
+                const ifBranchEnd = info.node.branches[0].endSourceSpan;
+                // The contents of the `@if` block can be moved into an
+                // `@empty` block, so report the problem on the `@if` block.
+                context.report({
+                    loc: parserServices.convertNodeSourceSpanToLoc(info.node.nameSpan),
+                    messageId: 'preferAtEmpty',
+                    fix: ifBranchEnd
+                        ? function* (fixer) {
+                            // Remove the entire `@if` branch through to the
+                            // start of the body of the `@else` block.
+                            yield fixer.removeRange([
+                                info.node.sourceSpan.start.offset,
+                                info.node.branches[1].startSourceSpan.end.offset,
+                            ]);
+                            // Take the contents of the `@if` branch and move
+                            // it into an `@empty` block after the `@for` block.
+                            const empty = context.sourceCode.text.slice(info.node.startSourceSpan.end.offset, ifBranchEnd.start.offset);
+                            if (forBlock.empty?.endSourceSpan) {
+                                // There is already an `@empty` block, but because the `@for`
+                                // block was inside an `@else` block, the `@empty` block
+                                // would never have be rendered, so we can replace its contents.
+                                yield fixer.replaceTextRange([
+                                    forBlock.empty.startSourceSpan.end.offset,
+                                    forBlock.empty.endSourceSpan.start.offset,
+                                ], empty);
+                            }
+                            else {
+                                // There isn't an existing `@empty` block, so we can create
+                                // one. We don't need to include a closing brace, because
+                                // we can reuse the one from the end of the @`if` block.
+                                yield fixer.insertTextAfterRange(toRange(forBlock.sourceSpan), ` @empty {${empty}`);
+                            }
+                        }
+                        : undefined,
+                });
+            }
+        }
+        function checkIfNotEmpty(ifNotInfo, previous) {
+            if (previous?.kind === 'if-empty') {
+                if ((0, are_equivalent_asts_1.areEquivalentASTs)(ifNotInfo.collection, previous.collection)) {
+                    const forBlock = getOnlyForBlock(ifNotInfo.node.branches[0]);
+                    if (forBlock &&
+                        (0, are_equivalent_asts_1.areEquivalentASTs)(ifNotInfo.collection, forBlock.expression.ast)) {
+                        // The `@if` block can be removed and the contents of
+                        // the `@else` block moved into an `@empty` block,
+                        // so report the problem on the `@if` block.
+                        context.report({
+                            loc: parserServices.convertNodeSourceSpanToLoc(ifNotInfo.node.nameSpan),
+                            messageId: 'preferAtEmpty',
+                            fix: (fixer) => [
+                                // Remove the entire previous `@if` block.
+                                fixer.removeRange(toRange(previous.node.sourceSpan)),
+                                // Remove the current `@if` statement.
+                                fixer.removeRange(toRange(ifNotInfo.node.startSourceSpan)),
+                                // Take the contents of the previous `@if` block and move
+                                // it into the `@empty` block after the `@for` block.
+                                fixer.insertTextAfterRange(toRange(forBlock.sourceSpan), ` @empty {${context.sourceCode.text.slice(previous.node.startSourceSpan.end.offset, 
+                                // The end offset is after the closing `}`, so we
+                                // need to subtract one to ensure it gets removed.
+                                previous.node.sourceSpan.end.offset - 1)}`),
+                            ],
+                        });
+                    }
+                }
+            }
+        }
+        function checkIfNotEmptyElse(info) {
+            const forBlock = getOnlyForBlock(info.node.branches[0]);
+            if (forBlock &&
+                (0, are_equivalent_asts_1.areEquivalentASTs)(info.collection, forBlock.expression.ast)) {
+                const ifBranchEnd = info.node.branches[0].endSourceSpan;
+                const ifEnd = info.node.endSourceSpan;
+                // The `@if` block can be removed and the contents of
+                // the `@else` block moved into an `@empty` block,
+                // so report the problem on the `@if` block.
+                context.report({
+                    loc: parserServices.convertNodeSourceSpanToLoc(info.node.nameSpan),
+                    messageId: 'preferAtEmpty',
+                    fix: ifBranchEnd && ifEnd
+                        ? function* (fixer) {
+                            if (forBlock.empty) {
+                                // Because the `@for` block was inside an `@if`
+                                // block, the `@empty` block would never be rendered,
+                                // so we can remove it. We could try to replace it,
+                                // but it's easier to remove it and create a new one.
+                                yield fixer.removeRange(toRange(forBlock.empty.sourceSpan));
+                            }
+                            // Remove the entire `@if (...) {` segment.
+                            yield fixer.removeRange(toRange(info.node.startSourceSpan));
+                            const elseBranch = info.node.branches[1];
+                            if (elseBranch.expression) {
+                                // The second branch is an `@else if` branch. We
+                                // need to turn it into its own `@if` block. Replace
+                                // the `@else if` text with the start of the `@empty`
+                                // block and the start of the `@if` block, then put
+                                // a closing brace after the original `@if` block
+                                // to close the `@empty` block.
+                                yield fixer.replaceTextRange([
+                                    ifBranchEnd.end.offset - 1,
+                                    elseBranch.nameSpan.end.offset,
+                                ], '@empty { @if ');
+                                yield fixer.insertTextAfterRange(toRange(ifEnd), '}');
+                            }
+                            else {
+                                // The second branch is just an `@else` branch, so we
+                                // can replace from end of the `@if` branch through to
+                                // the end of the `@else` statement with `@empty {`.
+                                // The children of the `@else` branch, and the closing
+                                //  `}`, will become part of the `@empty` block.
+                                yield fixer.replaceTextRange([
+                                    // The end offset is after the closing `}`, so we
+                                    // need to subtract one to ensure it gets removed.
+                                    ifBranchEnd.end.offset - 1,
+                                    elseBranch.startSourceSpan.end.offset,
+                                ], '@empty {');
+                            }
+                        }
+                        : undefined,
+                });
+            }
+        }
+        return {
+            // We need to visit `@for` and `@if` blocks, but we
+            // also need to know if there are any nodes immediately
+            // before them, so we need to visit all nodes.
+            '*'(node) {
+                const current = getNodeInfo(node);
+                if (current !== undefined) {
+                    switch (current.kind) {
+                        case 'for':
+                            checkFor(current, previousNodeStack.at(-1));
+                            break;
+                        case 'if-empty':
+                            checkIfEmpty(current, previousNodeStack.at(-1));
+                            break;
+                        case 'if-empty-else':
+                            checkIfEmptyElse(current);
+                            break;
+                        case 'if-not-empty':
+                            checkIfNotEmpty(current, previousNodeStack.at(-1));
+                            break;
+                        case 'if-not-empty-else':
+                            checkIfNotEmptyElse(current);
+                            break;
+                    }
+                }
+                // Record this current node as the previous node so that
+                // we can get the info when we look at the next sibling.
+                previousNodeStack[previousNodeStack.length - 1] = current;
+                // We are about to visit the children of this node,
+                // so push a new "previous node info" onto the stack.
+                // The previous node of the first child is undefined.
+                previousNodeStack.push(undefined);
+            },
+            '*:exit'() {
+                // We've finished visiting the children of this node,
+                // so pop the "previous node info" off the stack.
+                previousNodeStack.pop();
+            },
+        };
+    },
+});
+function getNodeInfo(node) {
+    if (node instanceof bundled_angular_compiler_1.TmplAstForLoopBlock) {
+        return {
+            node,
+            kind: 'for',
+            collection: node.expression.ast,
+        };
+    }
+    if (node instanceof bundled_angular_compiler_1.TmplAstIfBlock) {
+        if (node.branches.length === 0) {
+            return undefined;
+        }
+        if (!node.branches[0].expression) {
+            return undefined;
+        }
+        let collection = getNotEmptyTestCollection(node.branches[0].expression);
+        if (collection) {
+            // The block is either:
+            //
+            //   @if (collection.length > 0) {
+            //   }
+            //
+            // or:
+            //
+            //   @if (collection.length > 0) {
+            //   } @else {
+            //   }
+            //
+            // or:
+            //
+            //   @if (collection.length > 0) {
+            //   } @else if (condition){
+            //   }
+            //
+            // or:
+            //
+            //   @if (collection.length > 0) {
+            //   } @else if (condition) {
+            //   } @else {
+            //   }
+            //
+            // In any case, we treat this as one of the "if not empty"
+            // nodes, because if there is an `@for` block in the `@if`
+            // branch, then whatever is in the `@else if` or @else`
+            // branches, could be moved into the `@empty` block.
+            return {
+                node,
+                kind: node.branches.length === 1 ? 'if-not-empty' : 'if-not-empty-else',
+                collection,
+            };
+        }
+        collection = getEmptyTestCollection(node.branches[0].expression);
+        if (collection) {
+            // Unlike the "if not empty" cases, there are only two cases
+            // that could be considered an "if empty" case:
+            //
+            //   @if (collection.length === 0) {
+            //   }
+            //
+            // or:
+            //
+            //   @if (collection.length > 0) {
+            //   } @else {
+            //   }
+            //
+            // If there is an `@else if`, then whatever is in the `@if`
+            // branch could not safely be moved into an `@empty` block
+            // because of the condition in the `@else if` branch.
+            if (node.branches.length === 1) {
+                return {
+                    node,
+                    kind: 'if-empty',
+                    collection,
+                };
+            }
+            else if (node.branches.length === 2 && !node.branches[1].expression) {
+                return {
+                    node,
+                    kind: 'if-empty-else',
+                    collection,
+                };
+            }
+        }
+    }
+    return undefined;
+}
+function getNotEmptyTestCollection(node) {
+    if (node instanceof bundled_angular_compiler_1.ASTWithSource) {
+        node = node.ast;
+    }
+    if (isLengthRead(node)) {
+        // @if (collection.length)
+        return node.receiver;
+    }
+    if (node instanceof bundled_angular_compiler_1.Binary) {
+        if (isLengthRead(node.left)) {
+            if (node.operation === '!==' ||
+                node.operation === '>' ||
+                node.operation === '!=') {
+                if (isZero(node.right)) {
+                    // @if (collection.length !== 0)
+                    // @if (collection.length > 0)
+                    // @if (collection.length != 0)
+                    return node.left.receiver;
+                }
+            }
+        }
+        else if (isZero(node.left)) {
+            if (node.operation === '!==' ||
+                node.operation === '<' ||
+                node.operation === '!=') {
+                if (isLengthRead(node.right)) {
+                    // @if (0 !== collection.length)
+                    // @if (0 < collection.length)
+                    // @if (0 != collection.length)
+                    return node.right.receiver;
+                }
+            }
+        }
+    }
+    return undefined;
+}
+function getEmptyTestCollection(node) {
+    if (node instanceof bundled_angular_compiler_1.ASTWithSource) {
+        node = node.ast;
+    }
+    if (node instanceof bundled_angular_compiler_1.PrefixNot) {
+        if (isLengthRead(node.expression)) {
+            // @if (!collection.length)
+            return node.expression.receiver;
+        }
+    }
+    else if (node instanceof bundled_angular_compiler_1.Binary) {
+        if (isLengthRead(node.left)) {
+            if (node.operation === '===' || node.operation === '==') {
+                if (isZero(node.right)) {
+                    // @if (collection.length === 0)
+                    // @if (collection.length == 0)
+                    return node.left.receiver;
+                }
+            }
+        }
+        else if (isZero(node.left)) {
+            if (node.operation === '===' || node.operation === '==') {
+                if (isLengthRead(node.right)) {
+                    // @if (0 === collection.length)
+                    // @if (0 == collection.length)
+                    return node.right.receiver;
+                }
+            }
+        }
+    }
+    return undefined;
+}
+function isLengthRead(node) {
+    return node instanceof bundled_angular_compiler_1.PropertyRead && node.name === 'length';
+}
+function isZero(node) {
+    return node instanceof bundled_angular_compiler_1.LiteralPrimitive && node.value === 0;
+}
+function toRange(span) {
+    return [span.start.offset, span.end.offset];
+}

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

@@ -1 +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"}
+{"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,wBAiJG"}

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

@@ -45,6 +45,11 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
                     }
                     return '`';
                 }
+                function hasParentheses(node) {
+                    const { start, end } = node.sourceSpan;
+                    const text = sourceCode.text.slice(start - 1, end + 1);
+                    return text.startsWith('(') && text.endsWith(')');
+                }
                 context.report({
                     loc: {
                         start: sourceCode.getLocFromIndex(start),
@@ -58,13 +63,50 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
                             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();
+                        const fixes = Array();
+                        const leftHasParentheses = hasParentheses(left);
+                        const rightHasParentheses = hasParentheses(right);
+                        // Remove the left first parenthesis if it exists
+                        if (leftHasParentheses) {
+                            fixes.push(fixer.removeRange([
+                                left.sourceSpan.start - 1,
+                                left.sourceSpan.start,
+                            ]));
+                        }
                         // Fix the left side
                         fixes.push(...getLeftSideFixes(fixer, left));
+                        // Remove the left last parenthesis if it exists
+                        if (leftHasParentheses) {
+                            fixes.push(fixer.removeRange([
+                                left.sourceSpan.end,
+                                left.sourceSpan.end + 1,
+                            ]));
+                        }
                         // Remove the `+` sign
-                        fixes.push(fixer.removeRange([left.sourceSpan.end, right.sourceSpan.start]));
+                        fixes.push(fixer.removeRange([
+                            leftHasParentheses
+                                ? left.sourceSpan.end + 1
+                                : left.sourceSpan.end,
+                            rightHasParentheses
+                                ? right.sourceSpan.start - 1
+                                : right.sourceSpan.start,
+                        ]));
+                        // Remove the right first parenthesis if it exists
+                        if (rightHasParentheses) {
+                            fixes.push(fixer.removeRange([
+                                right.sourceSpan.start - 1,
+                                right.sourceSpan.start,
+                            ]));
+                        }
                         // Fix the right side
                         fixes.push(...getRightSideFixes(fixer, right));
+                        // Remove the right last parenthesis if it exists
+                        if (rightHasParentheses) {
+                            fixes.push(fixer.removeRange([
+                                right.sourceSpan.end,
+                                right.sourceSpan.end + 1,
+                            ]));
+                        }
                         return fixes;
                     },
                 });
@@ -78,19 +120,17 @@ function getLeftSideFixes(fixer, left) {
         // Remove the end ` sign from the left side
         return [fixer.removeRange([end - 1, end])];
     }
-    else if ((0, literal_primitive_1.isLiteralPrimitive)(left)) {
+    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], '}'),
-        ];
-    }
+    // Transform left side to template literal
+    return [
+        fixer.insertTextBeforeRange([start, end], '`${'),
+        fixer.insertTextAfterRange([start, end], '}'),
+    ];
 }
 function getRightSideFixes(fixer, right) {
     const { start, end } = right.sourceSpan;
@@ -98,17 +138,15 @@ function getRightSideFixes(fixer, right) {
         // Remove the start ` sign from the right side
         return [fixer.removeRange([start, start + 1])];
     }
-    else if ((0, literal_primitive_1.isLiteralPrimitive)(right)) {
+    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], '}`'),
-        ];
-    }
+    // Transform right side to template literal
+    return [
+        fixer.insertTextBeforeRange([start, end], '${'),
+        fixer.insertTextAfterRange([start, end], '}`'),
+    ];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-eslint/eslint-plugin-template",
-  "version": "19.4.1-alpha.2",
+  "version": "19.4.1-alpha.4",
   "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.4.1-alpha.2",
-    "@angular-eslint/utils": "19.4.1-alpha.2"
+    "@angular-eslint/bundled-angular-compiler": "19.4.1-alpha.4",
+    "@angular-eslint/utils": "19.4.1-alpha.4"
   },
   "devDependencies": {
     "@types/aria-query": "5.0.4",
-    "@angular-eslint/template-parser": "19.4.1-alpha.2",
-    "@angular-eslint/test-utils": "19.4.1-alpha.2"
+    "@angular-eslint/template-parser": "19.4.1-alpha.4",
+    "@angular-eslint/test-utils": "19.4.1-alpha.4"
   },
   "peerDependencies": {
     "@typescript-eslint/types": "^7.11.0 || ^8.0.0",