@taiga-ui/eslint-plugin-experience-next 0.459.0 → 0.460.0

package/README.md

@@ -49,6 +49,7 @@ export default [
 | no-href-with-router-link            | Do not use href and routerLink attributes together on the same element                              |     | 🔧  |     |
 | no-implicit-public                  | Require explicit `public` modifier for class members and parameter properties                       | ✅  | 🔧  |     |
 | no-playwright-empty-fill            | Enforce `clear()` over `fill('')` in Playwright tests                                               | ✅  | 🔧  |     |
+| 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-string-literal-concat            | Disallow string literal concatenation; merge adjacent literals into one                             | ✅  | 🔧  |     |
 | object-single-line                  | Enforce single-line formatting for single-property objects when it fits `printWidth`                | ✅  | 🔧  |     |
@@ -285,6 +286,36 @@ await page.getByLabel('Name').clear();
 
 ---
 
+## no-project-as-in-ng-template
+
+`ngProjectAs` has no effect when the element is inside an `<ng-template>`, `*ngTemplateOutlet`, `*ngComponentOutlet`, or
+`*polymorpheusOutlet`. Content instantiated through these dynamic outlets does not participate in Angular's static
+content projection, so the attribute is silently ignored at runtime.
+
+```html
+<!-- ❌ error — inside <ng-template> -->
+<ng-template #tpl>
+  <div ngProjectAs="[someSlot]">content</div>
+</ng-template>
+
+<!-- ❌ error — on the outlet host itself -->
+<ng-container
+  *ngTemplateOutlet="tpl"
+  ngProjectAs="[someSlot]"
+></ng-container>
+
+<!-- ❌ error — polymorpheusOutlet -->
+<ng-container
+  *polymorpheusOutlet="content"
+  ngProjectAs="someSlot"
+></ng-container>
+
+<!-- ✅ ok — static content projection -->
+<div ngProjectAs="[someSlot]">content</div>
+```
+
+---
+
 ## no-string-literal-concat
 
 Disallows concatenating string literals with `+`. Adjacent string literals are always mergeable into one — splitting
@@ -536,6 +567,32 @@ x: Animal = new Dog();
 x: MyService | null = inject(MyService);
 ```
 
+The rule does **not** report when the annotation provides contextual typing that narrows an array literal to a tuple.
+Without the annotation TypeScript would infer `number[]` instead of the required tuple type, widening the type and
+breaking compilation:
+
+```ts
+type SelectionRange = readonly [from: number, to: number];
+interface ElementState {
+  readonly value: string;
+  readonly selection: SelectionRange;
+}
+
+// ✅ ok — [0, 0] is inferred as SelectionRange only because of the annotation;
+//         removing it would widen the type to ElementState | {value: string; selection: number[]}
+const state: ElementState = flag ? {value: '', selection: [0, 0]} : existingState;
+```
+
+```json
+{
+  "@taiga-ui/experience-next/no-redundant-type-annotation": ["error", {"ignoreTupleContextualTyping": true}]
+}
+```
+
+| Option                        | Type      | Default | Description                                                                                            |
+| ----------------------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `ignoreTupleContextualTyping` | `boolean` | `true`  | Preserve annotations when they provide contextual typing that narrows an array literal to a tuple type |
+
 ---
 
 ## strict-tui-doc-example

package/index.d.ts

@@ -40,7 +40,10 @@ declare const plugin: {
         'no-playwright-empty-fill': import("@typescript-eslint/utils/ts-eslint").RuleModule<"useClear", [], unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
             name: string;
         };
-        'no-redundant-type-annotation': import("@typescript-eslint/utils/ts-eslint").RuleModule<"redundantTypeAnnotation", [], unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
+        'no-project-as-in-ng-template': import("eslint").Rule.RuleModule;
+        'no-redundant-type-annotation': import("@typescript-eslint/utils/ts-eslint").RuleModule<"redundantTypeAnnotation", [({
+            ignoreTupleContextualTyping?: boolean;
+        } | undefined)?], unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
             name: string;
         };
         'no-string-literal-concat': import("@typescript-eslint/utils/ts-eslint").RuleModule<"flattenTemplate" | "mergeLiterals" | "useTemplate", [], unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {

package/index.esm.js

@@ -32,6 +32,7 @@ import { ESLintUtils, AST_NODE_TYPES } from '@typescript-eslint/utils';
 import ts, { isCallExpression } from 'typescript';
 import { AST_NODE_TYPES as AST_NODE_TYPES$1 } from '@typescript-eslint/types';
 import path from 'node:path';
+import { TmplAstTemplate } from '@angular-eslint/bundled-angular-compiler';
 
 var htmlEslint = defineConfig([
     {
@@ -989,6 +990,7 @@ var recommended = defineConfig([
             '@angular-eslint/template/prefer-control-flow': angularVersion >= modernAngularRules.preferControlFlow ? 'error' : 'off',
             '@angular-eslint/template/prefer-self-closing-tags': 'error',
             '@angular-eslint/template/prefer-template-literal': angularVersion >= modernAngularRules.templateLiteral ? 'error' : 'off',
+            '@taiga-ui/experience-next/no-project-as-in-ng-template': 'error',
         },
     },
     {
@@ -1238,7 +1240,7 @@ function readJSON(path) {
     }
 }
 
-const config$2 = {
+const config$3 = {
     create(context) {
         const classesInFile = new Map();
         return {
@@ -1397,7 +1399,7 @@ var classPropertyNaming = createRule$e({
     name: 'class-property-naming',
 });
 
-const config$1 = {
+const config$2 = {
     create(context) {
         const order = context.options[0] || {};
         return {
@@ -1500,7 +1502,7 @@ function isExternalPureTuple(typeChecker, type) {
 }
 
 const createRule$d = ESLintUtils.RuleCreator((name) => name);
-const MESSAGE_ID$5 = 'spreadArrays';
+const MESSAGE_ID$6 = 'spreadArrays';
 var flatExports = createRule$d({
     create(context) {
         const parserServices = ESLintUtils.getParserServices(context);
@@ -1566,7 +1568,7 @@ var flatExports = createRule$d({
                             fix(fixer) {
                                 return fixer.replaceText(elementNode, `...${meta.name}`);
                             },
-                            messageId: MESSAGE_ID$5,
+                            messageId: MESSAGE_ID$6,
                             node: elementNode,
                         });
                     }
@@ -1617,7 +1619,7 @@ var flatExports = createRule$d({
         },
         fixable: 'code',
         messages: {
-            [MESSAGE_ID$5]: 'Spread "{{ name }}" to avoid nested arrays in exported entities.',
+            [MESSAGE_ID$6]: 'Spread "{{ name }}" to avoid nested arrays in exported entities.',
         },
         schema: [],
         type: 'suggestion',
@@ -1625,7 +1627,7 @@ var flatExports = createRule$d({
     name: 'flat-exports',
 });
 
-const MESSAGE_ID$4 = 'invalid-injection-token-description';
+const MESSAGE_ID$5 = 'invalid-injection-token-description';
 const ERROR_MESSAGE$3 = "InjectionToken's description should contain token's name";
 const createRule$c = ESLintUtils.RuleCreator((name) => name);
 const rule$9 = createRule$c({
@@ -1659,7 +1661,7 @@ const rule$9 = createRule$c({
                             const [start, end] = description.range;
                             return fixer.insertTextBeforeRange([start + 1, end], `[${name}]: `);
                         },
-                        messageId: MESSAGE_ID$4,
+                        messageId: MESSAGE_ID$5,
                         node: description,
                     });
                 }
@@ -1669,14 +1671,14 @@ const rule$9 = createRule$c({
     meta: {
         docs: { description: ERROR_MESSAGE$3 },
         fixable: 'code',
-        messages: { [MESSAGE_ID$4]: ERROR_MESSAGE$3 },
+        messages: { [MESSAGE_ID$5]: ERROR_MESSAGE$3 },
         schema: [],
         type: 'problem',
     },
     name: 'injection-token-description',
 });
 
-const MESSAGE_ID$3 = 'no-deep-imports';
+const MESSAGE_ID$4 = 'no-deep-imports';
 const ERROR_MESSAGE$2 = 'Deep imports of Taiga UI packages are prohibited';
 const CODE_EXTENSIONS = new Set([
     '.cjs',
@@ -1738,7 +1740,7 @@ const rule$8 = createRule$b({
                         const [start, end] = node.source.range;
                         return fixer.replaceTextRange([start + 1, end - 1], importSource.replaceAll(new RegExp(deepImport, 'g'), ''));
                     },
-                    messageId: MESSAGE_ID$3,
+                    messageId: MESSAGE_ID$4,
                     node: node.source,
                 });
             },
@@ -1748,7 +1750,7 @@ const rule$8 = createRule$b({
         defaultOptions: [DEFAULT_OPTIONS],
         docs: { description: ERROR_MESSAGE$2 },
         fixable: 'code',
-        messages: { [MESSAGE_ID$3]: ERROR_MESSAGE$2 },
+        messages: { [MESSAGE_ID$4]: ERROR_MESSAGE$2 },
         schema: [
             {
                 additionalProperties: false,
@@ -1984,9 +1986,9 @@ function stripKnownExtensions(filePathOrSpecifier) {
     return filePathOrSpecifier.replace(/\.(?:d\.ts|ts|tsx|js|jsx|mjs|cjs)$/, '');
 }
 
-const MESSAGE_ID$2 = 'no-href-with-router-link';
+const MESSAGE_ID$3 = 'no-href-with-router-link';
 const ERROR_MESSAGE$1 = 'Do not use href and routerLink attributes together on the same element';
-const config = {
+const config$1 = {
     create(context) {
         return {
             Tag(node) {
@@ -2014,7 +2016,7 @@ const config = {
                         fix: (fixer) => hrefAttribute?.range
                             ? fixer.removeRange(hrefAttribute.range)
                             : null,
-                        messageId: MESSAGE_ID$2,
+                        messageId: MESSAGE_ID$3,
                         node: (routerLinkAttribute ??
                             hrefAttribute ??
                             htmlNode),
@@ -2026,7 +2028,7 @@ const config = {
     meta: {
         docs: { description: ERROR_MESSAGE$1 },
         fixable: 'code',
-        messages: { [MESSAGE_ID$2]: ERROR_MESSAGE$1 },
+        messages: { [MESSAGE_ID$3]: ERROR_MESSAGE$1 },
         type: 'problem',
     },
 };
@@ -2191,11 +2193,115 @@ function isPlaywrightLocatorType(type) {
     });
 }
 
+const MESSAGE_ID$2 = 'no-project-as-in-ng-template';
+const NESTED_TEMPLATE_MESSAGE_ID = 'no-nested-template-in-dynamic-outlet';
+const PROJECT_AS_ERROR_MESSAGE = 'ngProjectAs on a dynamic outlet breaks SSR hydration. Use static content projection instead.';
+const NESTED_TEMPLATE_ERROR_MESSAGE = 'Avoid nesting ng-template inside dynamic outlet containers. Move the template outside the ng-container.';
+const DYNAMIC_OUTLET_DIRECTIVES = new Set([
+    'ngComponentOutlet',
+    'ngTemplateOutlet',
+    'polymorpheusOutlet',
+]);
+function toLoc(span) {
+    return {
+        end: {
+            column: span.end.col,
+            line: span.end.line + 1,
+        },
+        start: {
+            column: span.start.col,
+            line: span.start.line + 1,
+        },
+    };
+}
+function isInsideDynamicOutlet(node) {
+    let parent = node.parent;
+    while (parent) {
+        const hasDynamicOutletDirective = parent instanceof TmplAstTemplate &&
+            parent.templateAttrs.some((attr) => DYNAMIC_OUTLET_DIRECTIVES.has(attr.name));
+        if (hasDynamicOutletDirective) {
+            return true;
+        }
+        parent = parent.parent;
+    }
+    return false;
+}
+function checkProjectAsOnDynamicOutlet(context, node) {
+    const ngProjectAsAttr = node.attributes.find((attr) => attr.name === 'ngProjectAs') ??
+        node.inputs.find((input) => input.name === 'ngProjectAs');
+    if (ngProjectAsAttr && isInsideDynamicOutlet(node)) {
+        context.report({
+            loc: toLoc(ngProjectAsAttr.sourceSpan),
+            messageId: MESSAGE_ID$2,
+        });
+    }
+}
+function checkNestedTemplateInDynamicOutlet(context, node) {
+    const hasDynamicOutletInput = node.inputs.some((input) => DYNAMIC_OUTLET_DIRECTIVES.has(input.name));
+    if (!hasDynamicOutletInput) {
+        return;
+    }
+    for (const child of node.children) {
+        if (child instanceof TmplAstTemplate && child.tagName === 'ng-template') {
+            context.report({
+                loc: toLoc(child.sourceSpan),
+                messageId: NESTED_TEMPLATE_MESSAGE_ID,
+            });
+        }
+    }
+}
+const config = {
+    create(context) {
+        return {
+            Element(rawNode) {
+                const node = rawNode;
+                checkProjectAsOnDynamicOutlet(context, node);
+                checkNestedTemplateInDynamicOutlet(context, node);
+            },
+        };
+    },
+    meta: {
+        docs: { description: PROJECT_AS_ERROR_MESSAGE },
+        messages: {
+            [MESSAGE_ID$2]: PROJECT_AS_ERROR_MESSAGE,
+            [NESTED_TEMPLATE_MESSAGE_ID]: NESTED_TEMPLATE_ERROR_MESSAGE,
+        },
+        schema: [],
+        type: 'problem',
+    },
+};
+
 const createRule$7 = ESLintUtils.RuleCreator((name) => name);
+function collectArrayExpressions(node) {
+    const result = [];
+    if (node.type === AST_NODE_TYPES.ArrayExpression) {
+        result.push(node);
+    }
+    switch (node.type) {
+        case AST_NODE_TYPES.BinaryExpression:
+        case AST_NODE_TYPES.LogicalExpression:
+            result.push(...collectArrayExpressions(node.left));
+            result.push(...collectArrayExpressions(node.right));
+            break;
+        case AST_NODE_TYPES.ConditionalExpression:
+            result.push(...collectArrayExpressions(node.consequent));
+            result.push(...collectArrayExpressions(node.alternate));
+            break;
+        case AST_NODE_TYPES.ObjectExpression:
+            for (const property of node.properties) {
+                if (property.type === AST_NODE_TYPES.Property) {
+                    result.push(...collectArrayExpressions(property.value));
+                }
+            }
+            break;
+    }
+    return result;
+}
 const rule$5 = createRule$7({
     create(context) {
         const parserServices = ESLintUtils.getParserServices(context);
         const typeChecker = parserServices.program.getTypeChecker();
+        const ignoreTupleContextualTyping = context.options[0]?.ignoreTupleContextualTyping ?? true;
         function check(node, typeAnnotation, value) {
             if (!typeAnnotation || !value) {
                 return;
@@ -2218,12 +2324,18 @@ const rule$5 = createRule$7({
                 !value.returnType) {
                 return;
             }
-            // If the declared type is a tuple and the initializer is an array literal,
-            // the annotation provides contextual typing that narrows the inferred type
-            // from T[] to [T1, T2, ...]. Removing it would widen the type back to T[].
-            if (value.type === AST_NODE_TYPES.ArrayExpression &&
-                typeChecker.isTupleType(declaredType)) {
-                return;
+            // If the annotation provides contextual typing that narrows an array
+            // literal to a tuple (e.g. [0, 0] → readonly [number, number]), removing
+            // it would widen the inferred type. This covers both direct array literals
+            // and arrays nested inside object literals or conditional expressions.
+            if (ignoreTupleContextualTyping) {
+                const arrayExpressions = collectArrayExpressions(value);
+                for (const arrayExpression of arrayExpressions) {
+                    const tsArrayNode = parserServices.esTreeNodeToTSNodeMap.get(arrayExpression);
+                    if (typeChecker.isTupleType(typeChecker.getTypeAtLocation(tsArrayNode))) {
+                        return;
+                    }
+                }
             }
             // If the initializer is a call to a generic function with no explicit
             // type arguments, the type parameters may be inferred from the
@@ -2264,7 +2376,18 @@ const rule$5 = createRule$7({
         messages: {
             redundantTypeAnnotation: 'Type annotation is redundant — the type is already inferred from the initializer',
         },
-        schema: [],
+        schema: [
+            {
+                additionalProperties: false,
+                properties: {
+                    ignoreTupleContextualTyping: {
+                        description: 'Preserve annotations when they provide contextual typing that narrows an array literal to a tuple type. Defaults to true.',
+                        type: 'boolean',
+                    },
+                },
+                type: 'object',
+            },
+        ],
         type: 'suggestion',
     },
     name: 'no-redundant-type-annotation',
@@ -3627,16 +3750,17 @@ const plugin = {
         version: pkg.version,
     },
     rules: {
-        'array-as-const': config$2,
+        'array-as-const': config$3,
         'class-property-naming': classPropertyNaming,
-        'decorator-key-sort': config$1,
+        'decorator-key-sort': config$2,
         'flat-exports': flatExports,
         'injection-token-description': rule$9,
         'no-deep-imports': rule$8,
         'no-deep-imports-to-indexed-packages': noDeepImportsToIndexedPackages,
-        'no-href-with-router-link': config,
+        'no-href-with-router-link': config$1,
         'no-implicit-public': rule$7,
         'no-playwright-empty-fill': rule$6,
+        'no-project-as-in-ng-template': config,
         'no-redundant-type-annotation': rule$5,
         'no-string-literal-concat': rule$4,
         'object-single-line': rule$3,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/eslint-plugin-experience-next",
-  "version": "0.459.0",
+  "version": "0.460.0",
   "description": "An ESLint plugin to enforce a consistent code styles across taiga-ui projects",
   "repository": {
     "type": "git",
@@ -27,23 +27,23 @@
   ],
   "type": "module",
   "devDependencies": {
-    "@typescript-eslint/rule-tester": "8.58.0",
+    "@typescript-eslint/rule-tester": "8.58.1",
     "glob": "13.0.6"
   },
   "peerDependencies": {
-    "@eslint/compat": "^2.0.4",
+    "@eslint/compat": "^2.0.5",
     "@eslint/markdown": "^8.0.1",
     "@html-eslint/eslint-plugin": "^0.59.0",
     "@html-eslint/parser": "^0.59.0",
     "@smarttools/eslint-plugin-rxjs": "^1.0.22",
     "@stylistic/eslint-plugin": "^5.10.0",
     "@types/glob": "*",
-    "@typescript-eslint/eslint-plugin": "^8.58.0",
+    "@typescript-eslint/eslint-plugin": "^8.58.1",
     "angular-eslint": "^20.7.0",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.7",
     "eslint-plugin-compat": "^7.0.1",
-    "eslint-plugin-cypress": "^6.2.3",
+    "eslint-plugin-cypress": "^6.3.0",
     "eslint-plugin-de-morgan": "^2.1.1",
     "eslint-plugin-decorator-position": "^6.0.0",
     "eslint-plugin-file-progress": "^3.0.2",
@@ -61,7 +61,7 @@
     "eslint-plugin-unused-imports": "^4.4.1",
     "glob": "*",
     "globals": "^17.4.0",
-    "typescript-eslint": "^8.58.0"
+    "typescript-eslint": "^8.58.1"
   },
   "publishConfig": {
     "access": "public"

package/rules/no-project-as-in-ng-template.d.ts

@@ -0,0 +1,3 @@
+import { type Rule } from 'eslint';
+declare const config: Rule.RuleModule;
+export default config;

package/rules/no-redundant-type-annotation.d.ts

@@ -1,5 +1,10 @@
 import { ESLintUtils } from '@typescript-eslint/utils';
-export declare const rule: ESLintUtils.RuleModule<"redundantTypeAnnotation", [], unknown, ESLintUtils.RuleListener> & {
+type Options = [
+    {
+        ignoreTupleContextualTyping?: boolean;
+    }?
+];
+export declare const rule: ESLintUtils.RuleModule<"redundantTypeAnnotation", Options, unknown, ESLintUtils.RuleListener> & {
     name: string;
 };
 export default rule;