@angular-eslint/eslint-plugin-template 16.1.0-alpha.0 → 16.1.0

package/dist/configs/all.json

@@ -24,6 +24,7 @@
     "@angular-eslint/template/no-interpolation-in-attributes": "error",
     "@angular-eslint/template/no-negated-async": "error",
     "@angular-eslint/template/no-positive-tabindex": "error",
+    "@angular-eslint/template/prefer-self-closing-tags": "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.js

@@ -52,6 +52,7 @@ const no_inline_styles_1 = __importStar(require("./rules/no-inline-styles"));
 const no_interpolation_in_attributes_1 = __importStar(require("./rules/no-interpolation-in-attributes"));
 const no_negated_async_1 = __importStar(require("./rules/no-negated-async"));
 const no_positive_tabindex_1 = __importStar(require("./rules/no-positive-tabindex"));
+const prefer_self_closing_tags_1 = __importStar(require("./rules/prefer-self-closing-tags"));
 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"));
@@ -87,6 +88,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_self_closing_tags_1.RULE_NAME]: prefer_self_closing_tags_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/attributes-order.js

@@ -146,9 +146,13 @@ function byLocation(one, other) {
 }
 function byOrder(order, alphabetical) {
     return function (one, other) {
+        var _a, _b, _c, _d;
         const orderComparison = getOrderIndex(one, order) - getOrderIndex(other, order);
         if (alphabetical && orderComparison === 0) {
-            return one.name > other.name ? 1 : -1;
+            return ((_b = (_a = one.keySpan) === null || _a === void 0 ? void 0 : _a.details) !== null && _b !== void 0 ? _b : one.name) >
+                ((_d = (_c = other.keySpan) === null || _c === void 0 ? void 0 : _c.details) !== null && _d !== void 0 ? _d : other.name)
+                ? 1
+                : -1;
         }
         return orderComparison;
     };
@@ -175,9 +179,27 @@ function toTemplateReferenceVariableOrderType(reference) {
     return Object.assign(Object.assign({}, reference), { orderType: "TEMPLATE_REFERENCE" /* OrderType.TemplateReferenceVariable */ });
 }
 function extractTemplateAttrs(node) {
-    return isTmplAstTemplate(node.parent)
-        ? node.parent.templateAttrs.map(toStructuralDirectiveOrderType)
-        : [];
+    if (!isTmplAstTemplate(node.parent)) {
+        return [];
+    }
+    /*
+     * There may be multiple "attributes" for a structural directive even though
+     * there is only a single HTML attribute:
+     * e.g. `<ng-container *ngFor="let foo of bar"></ng-container>`
+     * will parsed as two attributes (`ngFor` and `ngForOf`)
+     */
+    const attrs = node.parent.templateAttrs.map(toStructuralDirectiveOrderType);
+    // Pick up on any subsequent `let` bindings, e.g. `index as i`
+    let sourceEnd = attrs[attrs.length - 1].sourceSpan.end;
+    node.parent.variables.forEach((v) => {
+        if (v.sourceSpan.start.offset <= sourceEnd.offset &&
+            sourceEnd.offset < v.sourceSpan.end.offset) {
+            sourceEnd = v.sourceSpan.end;
+        }
+    });
+    return [
+        Object.assign(Object.assign({}, attrs[0]), { sourceSpan: new bundled_angular_compiler_1.ParseSourceSpan(attrs[0].sourceSpan.start, sourceEnd) }),
+    ];
 }
 function normalizeInputsOutputs(inputs, outputs) {
     const extractedInputs = inputs
@@ -200,19 +222,21 @@ function isOnSameLocation(input, output) {
         input.sourceSpan.end === output.sourceSpan.end);
 }
 function getMessageName(expected) {
+    var _a, _b;
+    const fullName = (_b = (_a = expected.keySpan) === null || _a === void 0 ? void 0 : _a.details) !== null && _b !== void 0 ? _b : expected.name;
     switch (expected.orderType) {
         case "STRUCTURAL_DIRECTIVE" /* OrderType.StructuralDirective */:
-            return `*${expected.name}`;
+            return `*${fullName}`;
         case "TEMPLATE_REFERENCE" /* OrderType.TemplateReferenceVariable */:
-            return `#${expected.name}`;
+            return `#${fullName}`;
         case "INPUT_BINDING" /* OrderType.InputBinding */:
-            return `[${expected.name}]`;
+            return `[${fullName}]`;
         case "OUTPUT_BINDING" /* OrderType.OutputBinding */:
-            return `(${expected.name})`;
+            return `(${fullName})`;
         case "TWO_WAY_BINDING" /* OrderType.TwoWayBinding */:
-            return `[(${expected.name})]`;
+            return `[(${fullName})]`;
         default:
-            return expected.name;
+            return fullName;
     }
 }
 function getStartPos(expected) {

package/dist/rules/no-duplicate-attributes.js

@@ -7,6 +7,7 @@ const get_original_attribute_name_1 = require("../utils/get-original-attribute-n
 exports.RULE_NAME = 'no-duplicate-attributes';
 const DEFAULT_OPTIONS = {
     allowTwoWayDataBinding: true,
+    allowStylePrecedenceDuplicates: false,
     ignore: [],
 };
 exports.default = (0, create_eslint_rule_1.createESLintRule)({
@@ -27,6 +28,11 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
                         default: DEFAULT_OPTIONS.allowTwoWayDataBinding,
                         description: `Whether or not two-way data binding is allowed as an exception to the rule.`,
                     },
+                    allowStylePrecedenceDuplicates: {
+                        type: 'boolean',
+                        default: DEFAULT_OPTIONS.allowStylePrecedenceDuplicates,
+                        description: `Whether or not Angular style precedence is allowed as an exception to the rule. See https://angular.io/guide/style-precedence#style-precedence`,
+                    },
                     ignore: {
                         type: 'array',
                         items: { type: 'string' },
@@ -44,14 +50,37 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
         },
     },
     defaultOptions: [DEFAULT_OPTIONS],
-    create(context, [{ allowTwoWayDataBinding, ignore }]) {
+    create(context, [{ allowTwoWayDataBinding, allowStylePrecedenceDuplicates, ignore }]) {
         const parserServices = (0, utils_1.getTemplateParserServices)(context);
         return {
             Element$1({ inputs, outputs, attributes }) {
-                const duplicateInputsAndAttributes = findDuplicates([
+                // According to the Angular documentation (https://angular.io/guide/style-precedence#style-precedence)
+                // Angular merges both attributes which means their combined use can be seen as valid
+                const angularStylePrecedenceDuplicatesAllowed = ['class', 'style'];
+                let duplicateInputsAndAttributes = findDuplicates([
                     ...inputs,
                     ...attributes,
                 ]);
+                if (allowStylePrecedenceDuplicates) {
+                    const inputsIgnored = inputs.filter((input) => angularStylePrecedenceDuplicatesAllowed.includes((0, get_original_attribute_name_1.getOriginalAttributeName)(input)));
+                    if ((inputsIgnored === null || inputsIgnored === void 0 ? void 0 : inputsIgnored.length) > 0) {
+                        const attributesIgnored = attributes.filter((attr) => angularStylePrecedenceDuplicatesAllowed.includes((0, get_original_attribute_name_1.getOriginalAttributeName)(attr)));
+                        const inputsNotIgnored = inputs.filter((input) => !inputsIgnored.includes(input));
+                        const attributesNotIgnored = attributes.filter((attr) => !attributesIgnored.includes(attr));
+                        const ignoreDuplicated = [
+                            ...findDuplicates(inputsIgnored),
+                            ...findDuplicates(attributesIgnored),
+                        ];
+                        const notIgnoredDuplicates = [
+                            ...findDuplicates(inputsNotIgnored),
+                            ...findDuplicates(attributesNotIgnored),
+                        ];
+                        duplicateInputsAndAttributes = [
+                            ...ignoreDuplicated,
+                            ...notIgnoredDuplicates,
+                        ];
+                    }
+                }
                 const filteredOutputs = allowTwoWayDataBinding
                     ? outputs.filter((output) => {
                         return !inputs.some((input) => input.sourceSpan.start === output.sourceSpan.start &&

package/dist/rules/prefer-self-closing-tags.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RULE_NAME = exports.MESSAGE_ID = void 0;
+const utils_1 = require("@angular-eslint/utils");
+const create_eslint_rule_1 = require("../utils/create-eslint-rule");
+const get_dom_elements_1 = require("../utils/get-dom-elements");
+exports.MESSAGE_ID = 'preferSelfClosingTags';
+exports.RULE_NAME = 'prefer-self-closing-tags';
+exports.default = (0, create_eslint_rule_1.createESLintRule)({
+    name: exports.RULE_NAME,
+    meta: {
+        type: 'layout',
+        docs: {
+            description: 'Ensures that self-closing tags are used for elements with a closing tag but no content.',
+            recommended: false,
+        },
+        fixable: 'code',
+        schema: [],
+        messages: {
+            [exports.MESSAGE_ID]: 'Use self-closing tags for elements with a closing tag but no content.',
+        },
+    },
+    defaultOptions: [],
+    create(context) {
+        const parserServices = (0, utils_1.getTemplateParserServices)(context);
+        return {
+            Element$1({ children, name, startSourceSpan, endSourceSpan, }) {
+                // Ignore native elements.
+                if ((0, get_dom_elements_1.getDomElements)().has(name)) {
+                    return;
+                }
+                const noContent = !children.length ||
+                    children.every((node) => {
+                        const text = node.value;
+                        // If the node has no value, or only whitespace,
+                        // we can consider it empty.
+                        return (typeof text === 'string' && text.replace(/\n/g, '').trim() === '');
+                    });
+                const noCloseTag = !endSourceSpan ||
+                    (startSourceSpan.start.offset === endSourceSpan.start.offset &&
+                        startSourceSpan.end.offset === endSourceSpan.end.offset);
+                if (!noContent || noCloseTag) {
+                    return;
+                }
+                context.report({
+                    loc: parserServices.convertNodeSourceSpanToLoc(endSourceSpan),
+                    messageId: exports.MESSAGE_ID,
+                    fix: (fixer) => fixer.replaceTextRange([startSourceSpan.end.offset - 1, endSourceSpan.end.offset], ' />'),
+                });
+            },
+        };
+    },
+});

package/dist/rules/valid-aria.js

@@ -98,6 +98,12 @@ function isNil(value) {
 function isString(value) {
     return typeof value == 'string';
 }
+function isMixed(value) {
+    return isString(value) && value === 'mixed';
+}
+function isTristate(value) {
+    return isMixed(value) || isBooleanLike(value) || isNil(value);
+}
 function isValidAriaPropertyValue({ allowundefined, type, values }, attributeValue) {
     if (allowundefined && isNil(attributeValue))
         return true;
@@ -105,7 +111,7 @@ function isValidAriaPropertyValue({ allowundefined, type, values }, attributeVal
         case 'boolean':
             return isBooleanLike(attributeValue);
         case 'tristate':
-            return isBooleanLike(attributeValue) || isNil(attributeValue);
+            return isTristate(attributeValue);
         case 'id':
         case 'idlist':
             return true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-eslint/eslint-plugin-template",
-  "version": "16.1.0-alpha.0",
+  "version": "16.1.0",
   "description": "ESLint plugin for Angular Templates",
   "license": "MIT",
   "main": "dist/index.js",
@@ -17,11 +17,11 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@angular-eslint/bundled-angular-compiler": "16.1.0-alpha.0",
-    "@angular-eslint/utils": "16.1.0-alpha.0",
-    "@typescript-eslint/type-utils": "5.59.7",
-    "@typescript-eslint/utils": "5.59.7",
-    "aria-query": "5.1.3",
+    "@angular-eslint/bundled-angular-compiler": "16.1.0",
+    "@angular-eslint/utils": "16.1.0",
+    "@typescript-eslint/type-utils": "5.62.0",
+    "@typescript-eslint/utils": "5.62.0",
+    "aria-query": "5.3.0",
     "axobject-query": "3.1.1"
   },
   "devDependencies": {
@@ -31,5 +31,5 @@
     "eslint": "^7.20.0 || ^8.0.0",
     "typescript": "*"
   },
-  "gitHead": "255cd39008e9e9a608704f8b62a08c9dc45f8e53"
+  "gitHead": "dce6381cafcbe2de109d0a53b4c9c3e3bf1ae569"
 }