@angular-eslint/eslint-plugin-template 19.2.2-alpha.3 → 19.2.2-alpha.4

package/dist/rules/attributes-order.d.ts

@@ -1,3 +1,4 @@
+import type { TSESLint } from '@typescript-eslint/utils';
 export declare enum OrderType {
     TemplateReferenceVariable = "TEMPLATE_REFERENCE",
     StructuralDirective = "STRUCTURAL_DIRECTIVE",
@@ -14,6 +15,6 @@ export type Options = [
 ];
 export type MessageIds = 'attributesOrder';
 export declare const RULE_NAME = "attributes-order";
-declare const _default: import("@typescript-eslint/utils/ts-eslint").RuleModule<"attributesOrder", Options, import("../utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
+declare const _default: TSESLint.RuleModule<"attributesOrder", Options, import("../utils/create-eslint-rule").RuleDocs, TSESLint.RuleListener>;
 export default _default;
 //# sourceMappingURL=attributes-order.d.ts.map

package/dist/rules/attributes-order.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"attributes-order.d.ts","sourceRoot":"","sources":["../../src/rules/attributes-order.ts"],"names":[],"mappings":"AAiBA,oBAAY,SAAS;IACnB,yBAAyB,uBAAuB;IAChD,mBAAmB,yBAAyB;IAC5C,gBAAgB,sBAAsB;IACtC,YAAY,kBAAkB;IAC9B,aAAa,mBAAmB;IAChC,aAAa,oBAAoB;CAClC;AAED,MAAM,MAAM,OAAO,GAAG;IACpB;QACE,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;QAC/B,QAAQ,CAAC,KAAK,EAAE,SAAS,SAAS,EAAE,CAAC;KACtC;CACF,CAAC;AA6BF,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC;AAC3C,eAAO,MAAM,SAAS,qBAAqB,CAAC;;AAgB5C,wBAmJG"}
+{"version":3,"file":"attributes-order.d.ts","sourceRoot":"","sources":["../../src/rules/attributes-order.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAY,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAGnE,oBAAY,SAAS;IACnB,yBAAyB,uBAAuB;IAChD,mBAAmB,yBAAyB;IAC5C,gBAAgB,sBAAsB;IACtC,YAAY,kBAAkB;IAC9B,aAAa,mBAAmB;IAChC,aAAa,oBAAoB;CAClC;AAED,MAAM,MAAM,OAAO,GAAG;IACpB;QACE,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;QAC/B,QAAQ,CAAC,KAAK,EAAE,SAAS,SAAS,EAAE,CAAC;KACtC;CACF,CAAC;AAkCF,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC;AAC3C,eAAO,MAAM,SAAS,qBAAqB,CAAC;;AAgB5C,wBA4HG"}

package/dist/rules/attributes-order.js

@@ -64,38 +64,14 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
     create(context, [{ alphabetical, order }]) {
         const parserServices = (0, utils_1.getTemplateParserServices)(context);
         function getLocation(attr) {
-            const loc = parserServices.convertNodeSourceSpanToLoc(attr.sourceSpan);
-            switch (attr.orderType) {
-                case OrderType.StructuralDirective:
-                    return {
-                        start: {
-                            line: loc.start.line,
-                            column: loc.start.column - 1,
-                        },
-                        end: {
-                            line: loc.end.line,
-                            column: loc.end.column + (isValuelessStructuralDirective(attr) ? 0 : 1),
-                        },
-                    };
-                default:
-                    return loc;
-            }
+            return adjustLocation(parserServices.convertNodeSourceSpanToLoc(attr.sourceSpan), 'location', attr);
         }
         return {
             ['Element$1, Template'](node) {
                 if (isImplicitTemplate(node)) {
                     return;
                 }
-                const { attributes, inputs, outputs, references } = node;
-                const { extractedBananaBoxes, extractedInputs, extractedOutputs } = normalizeInputsOutputs(inputs.map(toInputBindingOrderType), outputs.map(toOutputBindingOrderType));
-                const allAttributes = [
-                    ...extractTemplateAttrs(node),
-                    ...attributes.map(toAttributeBindingOrderType),
-                    ...references.map(toTemplateReferenceVariableOrderType),
-                    ...extractedBananaBoxes,
-                    ...extractedInputs,
-                    ...extractedOutputs,
-                ];
+                const allAttributes = getAllAttributes(node, context.filename, context.sourceCode);
                 if (allAttributes.length < 2) {
                     return;
                 }
@@ -174,6 +150,50 @@ function byOrder(order, alphabetical) {
 function getOrderIndex(attr, order) {
     return order.indexOf(attr.orderType);
 }
+function getAllAttributes(node, filename, sourceCode) {
+    // If there are any i18n attributes (either associated with the
+    // element itself, or with any attribute or input), then we need
+    // to use the HTML parser to get the attributes because the i18n
+    // metadata does not contain the spans of the i18n attributes.
+    if (node.i18n) {
+        return getAttributesFromHtmlParser(node, filename, node.inputs);
+    }
+    const { attributes, inputs, outputs, references } = node;
+    const extendedInputs = [];
+    const attributeBindings = [];
+    for (const input of inputs) {
+        if (input.i18n) {
+            return getAttributesFromHtmlParser(node, filename, node.inputs);
+        }
+        // Some attributes are parsed as inputs by the Angular template parser,
+        // but they don't have square brackets. We don't want those attributes
+        // to be classified as inputs because they look like regular attributes.
+        // The name of the input will never include the square brackets, so we
+        // need to look at the source. Unfortunately, the key span also doesn't
+        // include the square brackets, so the source span is what we need to use.
+        if (sourceCode.text.at(input.sourceSpan.start.offset) === '[') {
+            extendedInputs.push(toInputBindingOrderType(input));
+        }
+        else {
+            attributeBindings.push(toAttributeBindingOrderType(input));
+        }
+    }
+    for (const attribute of attributes) {
+        if (attribute.i18n) {
+            return getAttributesFromHtmlParser(node, filename, node.inputs);
+        }
+        attributeBindings.push(toAttributeBindingOrderType(attribute));
+    }
+    const { extractedBananaBoxes, extractedInputs, extractedOutputs } = normalizeInputsOutputs(extendedInputs, outputs.map(toOutputBindingOrderType));
+    return [
+        ...extractTemplateAttrs(node),
+        ...attributeBindings,
+        ...references.map(toTemplateReferenceVariableOrderType),
+        ...extractedBananaBoxes,
+        ...extractedInputs,
+        ...extractedOutputs,
+    ];
+}
 function toAttributeBindingOrderType(attribute) {
     return {
         ...attribute,
@@ -286,7 +306,7 @@ function getMessageName(expected) {
         case OrderType.TemplateReferenceVariable:
             return `#${fullName}`;
         case OrderType.InputBinding:
-            return `[${fullName}]`;
+            return expected.isI18nForAttribute ? fullName : `[${fullName}]`;
         case OrderType.OutputBinding:
             return `(${fullName})`;
         case OrderType.TwoWayBinding:
@@ -314,19 +334,116 @@ function isValuelessStructuralDirective(attr) {
         attrSpan.end.col === keySpan.end.col);
 }
 function getStartPos(expected) {
-    switch (expected.orderType) {
-        case OrderType.StructuralDirective:
-            return expected.sourceSpan.start.offset - 1;
-        default:
-            return expected.sourceSpan.start.offset;
-    }
+    return adjustLocation(expected.sourceSpan.start.offset, 'start', expected);
 }
 function getEndPos(expected) {
-    switch (expected.orderType) {
-        case OrderType.StructuralDirective:
-            return (expected.sourceSpan.end.offset +
-                (isValuelessStructuralDirective(expected) ? 0 : 1));
-        default:
-            return expected.sourceSpan.end.offset;
+    return adjustLocation(expected.sourceSpan.end.offset, 'end', expected);
+}
+function adjustLocation(locOrOffset, kind, attr) {
+    // Spans for structural directives created from the
+    // template parser will exclude the leading "*", so
+    // we need to move the start back to include it.
+    if (!attr.fromHtmlParser &&
+        attr.orderType === OrderType.StructuralDirective) {
+        if (typeof locOrOffset === 'number') {
+            if (kind === 'start') {
+                return locOrOffset - 1;
+            }
+            else {
+                return locOrOffset + (isValuelessStructuralDirective(attr) ? 0 : 1);
+            }
+        }
+        else {
+            return {
+                start: {
+                    line: locOrOffset.start.line,
+                    column: locOrOffset.start.column - 1,
+                },
+                end: {
+                    line: locOrOffset.end.line,
+                    column: locOrOffset.end.column +
+                        (isValuelessStructuralDirective(attr) ? 0 : 1),
+                },
+            };
+        }
+    }
+    return locOrOffset;
+}
+function getAttributesFromHtmlParser(node, filename, inputs) {
+    // The template AST does not include the spans for i18n attributes.
+    // To get their spans, we can re-parse just the element as HTML.
+    // We only need the spans of the attributes, so take only the
+    // start element and the end element (if there is one) so that
+    // we don't waste time parsing the element's content.
+    let html = node.startSourceSpan.toString();
+    if (node.endSourceSpan) {
+        html += node.endSourceSpan.toString();
+    }
+    const parser = new bundled_angular_compiler_1.HtmlParser();
+    const tree = parser.parse(html, filename, { preserveLineEndings: true });
+    const element = tree.rootNodes.find((n) => n instanceof bundled_angular_compiler_1.Element);
+    if (element) {
+        return element.attrs.map((attribute) => ({
+            ...getHtmlAttributeNameAndOrderType(attribute, inputs),
+            fromHtmlParser: true,
+            // The HTML element was at the start of the string which means the
+            // offset of each element will be relative to the start of the element.
+            // To get the offset of the attribute in the template, we need to
+            // move each span forward by the offset of the span in the template.
+            sourceSpan: new bundled_angular_compiler_1.ParseSourceSpan(node.startSourceSpan.start.moveBy(attribute.sourceSpan.start.offset), node.startSourceSpan.start.moveBy(attribute.sourceSpan.end.offset)),
+            keySpan: attribute.keySpan
+                ? new bundled_angular_compiler_1.ParseSourceSpan(node.startSourceSpan.start.moveBy(attribute.keySpan.start.offset), node.startSourceSpan.start.moveBy(attribute.keySpan.end.offset))
+                : undefined,
+        }));
+    }
+    return [];
+}
+function getHtmlAttributeNameAndOrderType(attr, inputs) {
+    if (attr.name.startsWith('#')) {
+        return {
+            name: attr.name.slice(1),
+            orderType: OrderType.TemplateReferenceVariable,
+        };
+    }
+    if (attr.name.startsWith('*')) {
+        return {
+            name: attr.name.slice(1),
+            orderType: OrderType.StructuralDirective,
+        };
     }
+    if (attr.name.startsWith('[(') && attr.name.endsWith(')]')) {
+        return {
+            name: attr.name.slice(2, -2),
+            orderType: OrderType.TwoWayBinding,
+        };
+    }
+    if (attr.name.startsWith('[') && attr.name.endsWith(']')) {
+        return {
+            name: attr.name.slice(1, -1),
+            orderType: OrderType.InputBinding,
+        };
+    }
+    if (attr.name.startsWith('(') && attr.name.endsWith(')')) {
+        return {
+            name: attr.name.slice(1, -1),
+            orderType: OrderType.OutputBinding,
+        };
+    }
+    const isI18nForAttribute = attr.name.startsWith('i18n-');
+    let orderType = OrderType.AttributeBinding;
+    // If the attribute is an i18n attribute, and it is associated with
+    // an input binding, then treat it as an input binding for ordering,
+    // even though it is a regular attribute. This will keep the i18n
+    // attribute immediately after its corresponding input binding.
+    if (inputs.length > 0 && isI18nForAttribute) {
+        const correspondingName = attr.name.slice(5);
+        if (inputs.some((input) => input.name === correspondingName)) {
+            orderType = OrderType.InputBinding;
+        }
+    }
+    return {
+        name: attr.name,
+        orderType,
+        isI18nForAttribute,
+    };
 }

package/package.json

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