@taiga-ui/eslint-plugin-experience-next 0.469.0 → 0.471.0

package/README.md

@@ -43,6 +43,7 @@ export default [
 | class-property-naming                           | Enforce custom naming for class properties based on their type                                      |     | 🔧  |     |
 | decorator-key-sort                              | Sorts the keys of the object passed to the `@Component/@Injectable/@NgModule/@Pipe` decorator       | ✅  | 🔧  |     |
 | flat-exports                                    | Spread nested arrays when exporting Angular entity collections                                      |     | 🔧  |     |
+| host-attributes-sort                            | Sort Angular host metadata attributes using configurable attribute groups                           | ✅  | 🔧  |     |
 | injection-token-description                     | They are required to provide a description for `InjectionToken`                                     | ✅  |     |     |
 | no-deep-imports                                 | Disables deep imports of Taiga UI packages                                                          | ✅  | 🔧  |     |
 | no-deep-imports-to-indexed-packages             | Disallow deep imports from packages that expose an index.ts next to ng-package.json or package.json | ✅  | 🔧  |     |
@@ -54,9 +55,9 @@ export default [
 | no-project-as-in-ng-template                    | `ngProjectAs` has no effect inside `<ng-template>` or dynamic outlets                               | ✅  |     |     |
 | no-redundant-type-annotation                    | Disallow redundant type annotations when the type is already inferred from the initializer          | ✅  | 🔧  |     |
 | no-side-effects-in-computed                     | Disallow observable side effects inside Angular `computed()` callbacks                              | ✅  |     |     |
-| no-signal-reads-after-await-in-reactive-context | Disallow signal reads after `await` inside reactive callbacks                                       | ✅  |     |     |
+| no-signal-reads-after-await-in-reactive-context | Disallow bare signal reads after `await` inside reactive callbacks                                  | ✅  |     |     |
 | no-string-literal-concat                        | Disallow string literal concatenation; merge adjacent literals into one                             | ✅  | 🔧  |     |
-| no-untracked-outside-reactive-context           | Disallow `untracked()` outside the synchronous body of reactive callbacks                           | ✅  | 🔧  |     |
+| no-untracked-outside-reactive-context           | Disallow `untracked()` outside reactive callbacks, except explicit post-`await` snapshots           | ✅  | 🔧  |     |
 | no-useless-untracked                            | Disallow provably useless `untracked()` wrappers in reactive callbacks                              | ✅  | 🔧  |     |
 | object-single-line                              | Enforce single-line formatting for single-property objects when it fits `printWidth`                | ✅  | 🔧  |     |
 | prefer-deep-imports                             | Allow deep imports of Taiga UI packages                                                             |     | 🔧  |     |
@@ -180,6 +181,105 @@ export const TuiInput = [...TuiTextfield, TuiInputDirective] as const;
 
 ---
 
+## host-attributes-sort
+
+<sup>`✅ Recommended`</sup> <sup>`Fixable`</sup>
+
+Sorts Angular `host` metadata entries in `@Component` and `@Directive` using configurable attribute groups, matching the
+same grouping model used for template attributes in Prettier. The recommended config enables the rule with a default
+group order that places `id` before plain attributes, `class`, animation bindings, inputs, two-way bindings, and
+outputs.
+
+```ts
+// ❌ error
+@Component({
+  host: {
+    '(click)': 'handleClick()',
+    '[value]': 'value()',
+    class: 'cmp',
+    id: 'cmp-id',
+  },
+})
+
+// ✅ after autofix
+@Component({
+  host: {
+    id: 'cmp-id',
+    class: 'cmp',
+    '[value]': 'value()',
+    '(click)': 'handleClick()',
+  },
+})
+```
+
+The rule understands the same preset names as `prettier-plugin-organize-attributes`. You can use aggregate presets such
+as `$ANGULAR`, `$HTML`, and `$CODE_GUIDE`, or compose atomic presets such as `$CLASS`, `$ID`, `$ARIA`, `$ANGULAR_INPUT`,
+`$ANGULAR_TWO_WAY_BINDING`, and `$ANGULAR_OUTPUT`.
+
+```json
+{
+  "@taiga-ui/experience-next/host-attributes-sort": [
+    "error",
+    {
+      "attributeGroups": ["$ANGULAR"]
+    }
+  ]
+}
+```
+
+Use `$ANGULAR` when `host` should follow the familiar Angular template-style order:
+`class -> id -> #ref -> *directive -> @animation -> [@animation] -> [(model)] -> [input] -> (output)`.
+
+```json
+{
+  "@taiga-ui/experience-next/host-attributes-sort": [
+    "error",
+    {
+      "attributeGroups": ["$HTML"]
+    }
+  ]
+}
+```
+
+Use `$HTML` when only `class` and `id` should be pulled to the front, and everything else can stay in the trailing
+default group.
+
+```json
+{
+  "@taiga-ui/experience-next/host-attributes-sort": [
+    "error",
+    {
+      "attributeGroups": ["$CODE_GUIDE"]
+    }
+  ]
+}
+```
+
+Use `$CODE_GUIDE` for a wider HTML-oriented order: `class`, `id`, `name`, `data-*`, `src`, `for`, `type`, `href`,
+`value`, `title`, `alt`, `role`, `aria-*`.
+
+```json
+{
+  "@taiga-ui/experience-next/host-attributes-sort": [
+    "error",
+    {
+      "attributeGroups": ["$ID", "$DEFAULT", "$ARIA", "$ANGULAR_OUTPUT"]
+    }
+  ]
+}
+```
+
+Use atomic presets when you want a custom order instead of one of the bundled aliases.
+
+| Option                | Type                        | Description                                                       |
+| --------------------- | --------------------------- | ----------------------------------------------------------------- |
+| `attributeGroups`     | `string[]`                  | Group order. Supports the same preset tokens as Prettier plugins. |
+| `attributeIgnoreCase` | `boolean`                   | Ignore case when matching custom regexp groups.                   |
+| `attributeSort`       | `'ASC' \| 'DESC' \| 'NONE'` | Sort order inside each matched group.                             |
+| `decorators`          | `string[]`                  | Decorator names whose `host` metadata should be checked.          |
+
+---
+
 ## injection-token-description
 
 <sup>`✅ Recommended`</sup>
@@ -602,8 +702,9 @@ const derived = computed(() => source() + 1);
 
 <sup>`✅ Recommended`</sup>
 
-Angular tracks signal reads only in synchronous code. If a reactive callback crosses an async boundary, any signal read
-after `await` will not become a dependency.
+Angular tracks signal reads only in synchronous code. If a reactive callback crosses an async boundary, any bare signal
+read after `await` will not become a dependency. Snapshot before `await` when you need the earlier value, or make an
+intentional post-`await` current-value read explicit with `untracked(...)`.
 
 ```ts
 // ❌ error
@@ -620,6 +721,14 @@ effect(async () => {
 });
 ```
 
+```ts
+// ✅ ok — explicit current-value read after await
+effect(async () => {
+  await this.fetchUser();
+  console.log(untracked(this.theme));
+});
+```
+
 ---
 
 ## no-untracked-outside-reactive-context
@@ -627,14 +736,15 @@ effect(async () => {
 <sup>`✅ Recommended`</sup> <sup>`Fixable`</sup>
 
 `untracked()` usually only affects signal reads that happen inside the synchronous body of a reactive callback. In
-ordinary non-reactive code, nested callbacks, or code that runs after `await`, it usually does not prevent dependency
-tracking and only adds noise. This rule reports those cases, but intentionally allows a few imperative Angular escape
-hatches where `untracked()` can still be useful: `@Pipe().transform`, `ControlValueAccessor.writeValue`,
-`registerOnChange` including patched accessors such as `accessor.writeValue = (...) => {}`, callback-form wrappers used
-inside deferred scheduler / event-handler callbacks, and narrow lazy DI factory wrappers like
-`InjectionToken({factory})` / `useFactory` when they guard creation of a reactive owner such as `effect()` against an
-accidental ambient reactive context. For the narrow case `untracked(() => effect(...))` and similar outer wrappers
-around a reactive call in ordinary code, autofix removes only the useless outer `untracked()` wrapper.
+ordinary non-reactive code or nested callbacks it usually does not prevent dependency tracking and only adds noise. This
+rule reports those cases, but intentionally allows a few explicit escape hatches: post-`await` reads inside a reactive
+callback when `untracked()` is used to document an intentional current-value snapshot, imperative Angular hooks such as
+`@Pipe().transform`, `ControlValueAccessor.writeValue`, `registerOnChange` including patched accessors such as
+`accessor.writeValue = (...) => {}`, callback-form wrappers used inside deferred scheduler / event-handler callbacks,
+and narrow lazy DI factory wrappers like `InjectionToken({factory})` / `useFactory` when they guard creation of a
+reactive owner such as `effect()` against an accidental ambient reactive context. For the narrow case
+`untracked(() => effect(...))` and similar outer wrappers around a reactive call in ordinary code, autofix removes only
+the useless outer `untracked()` wrapper.
 
 ```ts
 // ❌ error
@@ -656,6 +766,17 @@ effect(() => {
 const snapshot = computed(() => untracked(this.user));
 ```
 
+```ts
+// ✅ ok — after await, untracked can mark an intentional current snapshot
+effect(async () => {
+  await this.refresh();
+
+  if (untracked(this.user) !== previousUser) {
+    console.log('changed');
+  }
+});
+```
+
 ```ts
 // ❌ error
 untracked(() => {

package/index.d.ts

@@ -18,6 +18,14 @@ declare const plugin: {
         'flat-exports': import("@typescript-eslint/utils/ts-eslint").RuleModule<"spreadArrays", [], unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
             name: string;
         };
+        'host-attributes-sort': import("@typescript-eslint/utils/ts-eslint").RuleModule<"incorrectOrder", [{
+            attributeGroups?: string[];
+            attributeIgnoreCase?: boolean;
+            attributeSort?: "ASC" | "DESC" | "NONE";
+            decorators?: string[];
+        }], unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
+            name: string;
+        };
         'html-logical-properties': import("eslint").Rule.RuleModule;
         'injection-token-description': import("@typescript-eslint/utils/ts-eslint").RuleModule<"invalid-injection-token-description", readonly unknown[], unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
             name: string;

package/index.esm.js

@@ -896,6 +896,7 @@ var recommended = defineConfig([
                     Pipe: ['standalone', 'name', 'pure'],
                 },
             ],
+            '@taiga-ui/experience-next/host-attributes-sort': 'error',
             '@taiga-ui/experience-next/injection-token-description': 'error',
             '@taiga-ui/experience-next/no-deep-imports': [
                 'error',
@@ -1334,8 +1335,8 @@ function intersect(a, b) {
     return a.some((type) => origin.has(type));
 }
 
-const createRule$g = ESLintUtils.RuleCreator((name) => name);
-var classPropertyNaming = createRule$g({
+const createRule$h = ESLintUtils.RuleCreator((name) => name);
+var classPropertyNaming = createRule$h({
     create(context, [configs]) {
         const parserServices = ESLintUtils.getParserServices(context);
         const typeChecker = parserServices.program.getTypeChecker();
@@ -1504,9 +1505,9 @@ function isExternalPureTuple(typeChecker, type) {
     return typeArgs.every((item) => isClassType(item));
 }
 
-const createRule$f = ESLintUtils.RuleCreator((name) => name);
+const createRule$g = ESLintUtils.RuleCreator((name) => name);
 const MESSAGE_ID$7 = 'spreadArrays';
-var flatExports = createRule$f({
+var flatExports = createRule$g({
     create(context) {
         const parserServices = ESLintUtils.getParserServices(context);
         const typeChecker = parserServices.program.getTypeChecker();
@@ -1630,6 +1631,317 @@ var flatExports = createRule$f({
     name: 'flat-exports',
 });
 
+function isObject(node) {
+    return node?.type === AST_NODE_TYPES$1.ObjectExpression;
+}
+
+/**
+ * Extracts the metadata object from a class decorator such as
+ * `@Component()`, `@Directive()`, `@NgModule()`, or `@Pipe()`.
+ *
+ * Returns the first argument of the decorator call *if and only if*
+ * it is an `ObjectExpression`.
+ *
+ * @example
+ * // Given:
+ * @Component({
+ *   selector: 'x',
+ *   imports: [A, B],
+ * })
+ * class MyCmp {}
+ *
+ * // In the AST for @Component(...)
+ * getDecoratorMetadata(decorator, allowed) →
+ *    ObjectExpression({ selector: ..., imports: ... })
+ *
+ * @param decorator - The decorator node attached to a class declaration.
+ * @param allowedNames - A set of decorator names to consider
+ *                       (e.g., Component, Directive, NgModule, Pipe).
+ *
+ * @returns The metadata `ObjectExpression` if present and valid,
+ *          otherwise `null`.
+ */
+function getDecoratorMetadata(decorator, allowedNames) {
+    const expr = decorator.expression;
+    if (expr.type !== AST_NODE_TYPES$1.CallExpression) {
+        return null;
+    }
+    const callee = expr.callee;
+    if (callee.type !== AST_NODE_TYPES$1.Identifier) {
+        return null;
+    }
+    if (!allowedNames.has(callee.name)) {
+        return null;
+    }
+    const arg = expr.arguments[0];
+    return isObject(arg) ? arg : null;
+}
+
+function sameOrder(a, b) {
+    return a.length === b.length && a.every((value, index) => value === b[index]);
+}
+
+const DEFAULT_GROUP = '$DEFAULT';
+const DEFAULT_ATTRIBUTE_GROUPS = [
+    '$ANGULAR_STRUCTURAL_DIRECTIVE',
+    '$ANGULAR_ELEMENT_REF',
+    '$ID',
+    '$DEFAULT',
+    '$CLASS',
+    '$ANGULAR_ANIMATION',
+    '$ANGULAR_ANIMATION_INPUT',
+    '$ANGULAR_INPUT',
+    '$ANGULAR_TWO_WAY_BINDING',
+    '$ANGULAR_OUTPUT',
+];
+const DEFAULT_DECORATORS$1 = ['Component', 'Directive'];
+const PRESETS = {
+    $ALT: /^alt$/,
+    $ANGULAR: [
+        '$CLASS',
+        '$ID',
+        '$ANGULAR_ELEMENT_REF',
+        '$ANGULAR_STRUCTURAL_DIRECTIVE',
+        '$ANGULAR_ANIMATION',
+        '$ANGULAR_ANIMATION_INPUT',
+        '$ANGULAR_TWO_WAY_BINDING',
+        '$ANGULAR_INPUT',
+        '$ANGULAR_OUTPUT',
+    ],
+    $ANGULAR_ANIMATION: /^@/,
+    $ANGULAR_ANIMATION_INPUT: /^\[@/,
+    $ANGULAR_ELEMENT_REF: /^#/,
+    $ANGULAR_INPUT: /^\[[^(@]/,
+    $ANGULAR_OUTPUT: /^\(/,
+    $ANGULAR_STRUCTURAL_DIRECTIVE: /^\*/,
+    $ANGULAR_TWO_WAY_BINDING: /^\[\(/,
+    $ARIA: /^aria-/,
+    $CLASS: /^class$/,
+    $CODE_GUIDE: [
+        '$CLASS',
+        '$ID',
+        '$NAME',
+        '$DATA',
+        '$SRC',
+        '$FOR',
+        '$TYPE',
+        '$HREF',
+        '$VALUE',
+        '$TITLE',
+        '$ALT',
+        '$ROLE',
+        '$ARIA',
+    ],
+    $DATA: /^data-/,
+    $FOR: /^for$/,
+    $HREF: /^href$/,
+    $HTML: ['$CLASS', '$ID'],
+    $ID: /^id$/,
+    $NAME: /^name$/,
+    $ROLE: /^role$/,
+    $SRC: /^src$/,
+    $TITLE: /^title$/,
+    $TYPE: /^type$/,
+    $VALUE: /^value$/,
+    $VUE: ['$CLASS', '$ID', '$VUE_ATTRIBUTE'],
+    $VUE_ATTRIBUTE: /^v-/,
+};
+const createRule$f = ESLintUtils.RuleCreator((name) => name);
+const rule$i = createRule$f({
+    create(context, [options]) {
+        const sourceCode = context.sourceCode;
+        const settings = {
+            attributeGroups: [...DEFAULT_ATTRIBUTE_GROUPS],
+            attributeIgnoreCase: true,
+            attributeSort: 'ASC',
+            decorators: [...DEFAULT_DECORATORS$1],
+            ...options,
+        };
+        const allowedDecorators = new Set(settings.decorators);
+        return {
+            ClassDeclaration(node) {
+                for (const decorator of node?.decorators ?? []) {
+                    const metadata = getDecoratorMetadata(decorator, allowedDecorators);
+                    if (!metadata) {
+                        continue;
+                    }
+                    const hostObject = getHostObject(metadata);
+                    if (!hostObject) {
+                        continue;
+                    }
+                    const properties = getHostAttributeProperties(hostObject);
+                    if (!properties || properties.length <= 1) {
+                        continue;
+                    }
+                    const sortedProperties = organizeProperties(properties, settings);
+                    const currentOrder = properties.map(({ name }) => name);
+                    const expectedOrder = sortedProperties.map(({ name }) => name);
+                    if (sameOrder(currentOrder, expectedOrder)) {
+                        continue;
+                    }
+                    const report = {
+                        data: { expected: expectedOrder.join(', ') },
+                        messageId: 'incorrectOrder',
+                        node: hostObject,
+                    };
+                    if (sourceCode.getCommentsInside(hostObject).length > 0) {
+                        context.report(report);
+                        continue;
+                    }
+                    context.report({
+                        ...report,
+                        fix: (fixer) => fixer.replaceTextRange(hostObject.range, `{${sortedProperties
+                            .map(({ node: property }) => sourceCode.getText(property))
+                            .join(', ')}}`),
+                    });
+                }
+            },
+        };
+    },
+    meta: {
+        defaultOptions: [
+            {
+                attributeGroups: [...DEFAULT_ATTRIBUTE_GROUPS],
+                attributeIgnoreCase: true,
+                attributeSort: 'ASC',
+                decorators: [...DEFAULT_DECORATORS$1],
+            },
+        ],
+        docs: {
+            description: 'Sort Angular host metadata attributes using configurable attribute groups.',
+        },
+        fixable: 'code',
+        messages: { incorrectOrder: 'Host attributes should be sorted as [{{expected}}]' },
+        schema: [
+            {
+                additionalProperties: false,
+                properties: {
+                    attributeGroups: {
+                        items: { type: 'string' },
+                        type: 'array',
+                    },
+                    attributeIgnoreCase: { type: 'boolean' },
+                    attributeSort: {
+                        enum: ['ASC', 'DESC', 'NONE'],
+                        type: 'string',
+                    },
+                    decorators: {
+                        items: { type: 'string' },
+                        type: 'array',
+                    },
+                },
+                type: 'object',
+            },
+        ],
+        type: 'problem',
+    },
+    name: 'host-attributes-sort',
+});
+function getHostObject(metadata) {
+    for (const property of metadata.properties) {
+        if (property.type !== AST_NODE_TYPES$1.Property ||
+            property.kind !== 'init' ||
+            property.computed ||
+            property.method) {
+            continue;
+        }
+        if (getStaticPropertyName(property.key) !== 'host') {
+            continue;
+        }
+        return property.value.type === AST_NODE_TYPES$1.ObjectExpression
+            ? property.value
+            : null;
+    }
+    return null;
+}
+function getHostAttributeProperties(hostObject) {
+    const properties = [];
+    for (const property of hostObject.properties) {
+        if (property.type !== AST_NODE_TYPES$1.Property ||
+            property.kind !== 'init' ||
+            property.computed ||
+            property.method) {
+            return null;
+        }
+        const name = getStaticPropertyName(property.key);
+        if (name === null) {
+            return null;
+        }
+        properties.push({ name, node: property });
+    }
+    return properties;
+}
+function getStaticPropertyName(key) {
+    if (key.type === AST_NODE_TYPES$1.Identifier) {
+        return key.name;
+    }
+    if (key.type === AST_NODE_TYPES$1.Literal &&
+        (typeof key.value === 'string' || typeof key.value === 'number')) {
+        return String(key.value);
+    }
+    if (key.type === AST_NODE_TYPES$1.TemplateLiteral &&
+        key.expressions.length === 0 &&
+        key.quasis.length === 1) {
+        return key.quasis[0]?.value.cooked ?? null;
+    }
+    return null;
+}
+function organizeProperties(properties, options) {
+    const groups = getGroups(options.attributeGroups.length > 0 ? options.attributeGroups : ['$ANGULAR'], options.attributeIgnoreCase);
+    const defaultGroup = ensureDefaultGroup(groups);
+    for (const property of properties) {
+        const targetGroup = groups.find(({ regexp }) => regexp?.test(property.name)) ?? defaultGroup;
+        targetGroup.values.push(property);
+    }
+    if (options.attributeSort !== 'NONE') {
+        for (const group of groups) {
+            group.values.sort((left, right) => left.name.localeCompare(right.name));
+            if (options.attributeSort === 'DESC') {
+                group.values.reverse();
+            }
+        }
+    }
+    return groups.flatMap(({ values }) => values);
+}
+function getGroups(queries, ignoreCase) {
+    return queries.flatMap((query) => getGroup(query, ignoreCase));
+}
+function getGroup(query, ignoreCase) {
+    if (query === DEFAULT_GROUP) {
+        return [createDefaultGroup()];
+    }
+    const preset = PRESETS[query];
+    if (!preset) {
+        return [
+            {
+                query,
+                regexp: new RegExp(query, ignoreCase ? 'i' : ''),
+                values: [],
+            },
+        ];
+    }
+    if (Array.isArray(preset)) {
+        return preset.flatMap((item) => getGroup(item, ignoreCase));
+    }
+    return [{ query, regexp: preset, values: [] }];
+}
+function ensureDefaultGroup(groups) {
+    const existing = groups.find(({ unknown }) => unknown);
+    if (existing) {
+        return existing;
+    }
+    const fallback = createDefaultGroup();
+    groups.push(fallback);
+    return fallback;
+}
+function createDefaultGroup() {
+    return {
+        query: DEFAULT_GROUP,
+        unknown: true,
+        values: [],
+    };
+}
+
 const DIRECTIONAL_TO_LOGICAL = {
     'border-bottom': 'border-block-end',
     'border-left': 'border-inline-start',
@@ -2397,6 +2709,16 @@ function isNodeInsideSynchronousReactiveScope(node, callback) {
     });
     return found;
 }
+function isNodeAfterAsyncBoundaryInReactiveScope(node, callback) {
+    let found = false;
+    walkAfterAsyncBoundaryAst(callback, (inner) => {
+        if (inner !== node) {
+            return;
+        }
+        found = true;
+    });
+    return found;
+}
 function findEnclosingReactiveScope(node, program) {
     for (let current = node.parent; current; current = current.parent) {
         if (current.type !== AST_NODE_TYPES.CallExpression) {
@@ -2410,6 +2732,19 @@ function findEnclosingReactiveScope(node, program) {
     }
     return null;
 }
+function findEnclosingReactiveScopeAfterAsyncBoundary(node, program) {
+    for (let current = node.parent; current; current = current.parent) {
+        if (current.type !== AST_NODE_TYPES.CallExpression) {
+            continue;
+        }
+        for (const scope of getReactiveScopes(current, program)) {
+            if (isNodeAfterAsyncBoundaryInReactiveScope(node, scope.callback)) {
+                return scope;
+            }
+        }
+    }
+    return null;
+}
 /**
  * Returns true when the TypeScript type at `node` is an Angular signal type.
  * Uses duck-typing: callable type whose name contains "Signal", or whose
@@ -3256,6 +3591,7 @@ const rule$9 = createUntrackedRule({
                     const reported = new Set();
                     walkAfterAsyncBoundaryAst(scope.callback, (inner) => {
                         if (inner.type !== AST_NODE_TYPES.CallExpression ||
+                            isAngularUntrackedCall(inner, program) ||
                             !isSignalReadCall(inner, checker, esTreeNodeToTSNodeMap)) {
                             return;
                         }
@@ -3279,11 +3615,11 @@ const rule$9 = createUntrackedRule({
     },
     meta: {
         docs: {
-            description: 'Disallow signal reads that occur after `await` inside reactive callbacks, because Angular no longer tracks them as dependencies',
+            description: 'Disallow bare signal reads that occur after `await` inside reactive callbacks, because Angular no longer tracks them as dependencies',
             url: ANGULAR_SIGNALS_ASYNC_GUIDE_URL,
         },
         messages: {
-            readAfterAwait: '`{{ name }}` is read after `await` inside `{{ kind }}`. Angular only tracks synchronous signal reads, so this dependency will not be tracked. Read it before `await` and store the snapshot. See Angular guide: https://angular.dev/guide/signals#reactive-context-and-async-operations',
+            readAfterAwait: '`{{ name }}` is read after `await` inside `{{ kind }}`. Angular only tracks synchronous signal reads, so this dependency will not be tracked. Read it before `await` and store the snapshot, or wrap the post-`await` read in `untracked(...)` when you intentionally need the current value at that point. See Angular guide: https://angular.dev/guide/signals#reactive-context-and-async-operations',
         },
         schema: [],
         type: 'problem',
@@ -3802,7 +4138,8 @@ const rule$7 = createUntrackedRule({
                 if (!isAngularUntrackedCall(node, program)) {
                     return;
                 }
-                if (findEnclosingReactiveScope(node, program)) {
+                if (findEnclosingReactiveScope(node, program) ||
+                    findEnclosingReactiveScopeAfterAsyncBoundary(node, program)) {
                     return;
                 }
                 if (isAllowedImperativeAngularContext(node)) {
@@ -3840,12 +4177,12 @@ const rule$7 = createUntrackedRule({
     },
     meta: {
         docs: {
-            description: 'Disallow `untracked()` outside the synchronous body of a reactive callback, except for supported imperative Angular hooks, deferred callback wrappers, and lazy DI factories that may execute under an ambient reactive context',
+            description: 'Disallow `untracked()` outside reactive callbacks, except for synchronous reactive reads, explicit post-`await` snapshot reads, and supported imperative/deferred/lazy-factory Angular escape hatches',
             url: ANGULAR_SIGNALS_UNTRACKED_GUIDE_URL,
         },
         fixable: 'code',
         messages: {
-            outsideReactiveContext: '`untracked()` is used outside the synchronous body of a reactive callback and outside the supported imperative/deferred/lazy-factory exceptions, so it does not prevent dependency tracking and only adds noise. Remove it. See Angular guide: https://angular.dev/guide/signals#reading-without-tracking-dependencies',
+            outsideReactiveContext: '`untracked()` is used outside a reactive callback and outside the supported post-`await` / imperative / deferred / lazy-factory exceptions, so it does not prevent dependency tracking and only adds noise. Remove it. See Angular guide: https://angular.dev/guide/signals#reading-without-tracking-dependencies',
         },
         schema: [],
         type: 'problem',
@@ -5290,52 +5627,6 @@ const rule$1 = createRule$2({
     name: 'short-tui-imports',
 });
 
-function isObject(node) {
-    return node?.type === AST_NODE_TYPES$1.ObjectExpression;
-}
-
-/**
- * Extracts the metadata object from a class decorator such as
- * `@Component()`, `@Directive()`, `@NgModule()`, or `@Pipe()`.
- *
- * Returns the first argument of the decorator call *if and only if*
- * it is an `ObjectExpression`.
- *
- * @example
- * // Given:
- * @Component({
- *   selector: 'x',
- *   imports: [A, B],
- * })
- * class MyCmp {}
- *
- * // In the AST for @Component(...)
- * getDecoratorMetadata(decorator, allowed) →
- *    ObjectExpression({ selector: ..., imports: ... })
- *
- * @param decorator - The decorator node attached to a class declaration.
- * @param allowedNames - A set of decorator names to consider
- *                       (e.g., Component, Directive, NgModule, Pipe).
- *
- * @returns The metadata `ObjectExpression` if present and valid,
- *          otherwise `null`.
- */
-function getDecoratorMetadata(decorator, allowedNames) {
-    const expr = decorator.expression;
-    if (expr.type !== AST_NODE_TYPES$1.CallExpression) {
-        return null;
-    }
-    const callee = expr.callee;
-    if (callee.type !== AST_NODE_TYPES$1.Identifier) {
-        return null;
-    }
-    if (!allowedNames.has(callee.name)) {
-        return null;
-    }
-    const arg = expr.arguments[0];
-    return isObject(arg) ? arg : null;
-}
-
 function getImportsArray(meta) {
     const property = meta.properties.find((literal) => literal.type === AST_NODE_TYPES$1.Property &&
         literal.key.type === AST_NODE_TYPES$1.Identifier &&
@@ -5411,10 +5702,6 @@ function getSortedNames(elements, source) {
     return [...sortedRegular, ...sortedSpreads].map((n) => nameOf(n, source));
 }
 
-function sameOrder(a, b) {
-    return a.length === b.length && a.every((value, index) => value === b[index]);
-}
-
 const createRule$1 = ESLintUtils.RuleCreator((name) => name);
 var standaloneImportsSort = createRule$1({
     create(context, [options]) {
@@ -5584,6 +5871,7 @@ const plugin = {
         'class-property-naming': classPropertyNaming,
         'decorator-key-sort': config$3,
         'flat-exports': flatExports,
+        'host-attributes-sort': rule$i,
         'html-logical-properties': config$2,
         'injection-token-description': rule$h,
         'no-deep-imports': rule$g,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/eslint-plugin-experience-next",
-  "version": "0.469.0",
+  "version": "0.471.0",
   "description": "An ESLint plugin to enforce a consistent code styles across taiga-ui projects",
   "repository": {
     "type": "git",

package/rules/host-attributes-sort.d.ts

@@ -0,0 +1,14 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+type SortOrder = 'ASC' | 'DESC' | 'NONE';
+type Options = [
+    {
+        attributeGroups?: string[];
+        attributeIgnoreCase?: boolean;
+        attributeSort?: SortOrder;
+        decorators?: string[];
+    }
+];
+export declare const rule: ESLintUtils.RuleModule<"incorrectOrder", Options, unknown, ESLintUtils.RuleListener> & {
+    name: string;
+};
+export default rule;

package/rules/utils/angular-signals.d.ts

@@ -20,7 +20,9 @@ export declare function isAngularEffectCall(node: TSESTree.CallExpression, progr
 export declare function isAngularUntrackedCall(node: TSESTree.CallExpression, program: TSESTree.Program): boolean;
 export declare function getReactiveScopes(node: TSESTree.CallExpression, program: TSESTree.Program): ReactiveScope[];
 export declare function isNodeInsideSynchronousReactiveScope(node: TSESTree.Node, callback: ReactiveCallback): boolean;
+export declare function isNodeAfterAsyncBoundaryInReactiveScope(node: TSESTree.Node, callback: ReactiveCallback): boolean;
 export declare function findEnclosingReactiveScope(node: TSESTree.Node, program: TSESTree.Program): ReactiveScope | null;
+export declare function findEnclosingReactiveScopeAfterAsyncBoundary(node: TSESTree.Node, program: TSESTree.Program): ReactiveScope | null;
 /**
  * Returns true when the TypeScript type at `node` is an Angular signal type.
  * Uses duck-typing: callable type whose name contains "Signal", or whose