@taiga-ui/eslint-plugin-experience-next 0.438.0 → 0.439.0

package/README.md

@@ -49,12 +49,267 @@ 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                                               | ✅  | 🔧  |     |
-| standalone-imports-sort             | Sort imports alphabetically                                                                         | ✅  | 🔧  |     |
+| 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                                                             |     | 🔧  |     |
+| prefer-multi-arg-push               | Combine consecutive `.push()` calls on the same array into a single multi-argument call             | ✅  | 🔧  |     |
 | short-tui-imports                   | Shorten TuiXxxComponent / TuiYyyDirective in Angular metadata                                       | ✅  | 🔧  |     |
 | standalone-imports-sort             | Auto sort names inside Angular decorators                                                           | ✅  | 🔧  |     |
 | strict-tui-doc-example              | If you use the addon-doc, there will be a hint that you are importing something incorrectly         |     | 🔧  |     |
 
+---
+
+## array-as-const
+
+Exported arrays containing only class references must be marked with `as const` to preserve the tuple type and enable
+proper type inference.
+
+```ts
+// ❌ error
+export const PROVIDERS = [FooService, BarService];
+
+// ✅ after autofix
+export const PROVIDERS = [FooService, BarService] as const;
+```
+
+---
+
+## class-property-naming
+
+Enforce custom naming conventions for class properties based on their TypeScript type. Useful for enforcing project-wide
+patterns (e.g. all `Subject` fields must be called `destroy$`).
+
+Requires explicit configuration — not enabled in `recommended` by default.
+
+```json
+{
+  "@taiga-ui/experience-next/class-property-naming": [
+    "error",
+    [
+      {
+        "fieldNames": ["sub", "subscription"],
+        "newFieldName": "destroy$",
+        "withTypesSpecifier": ["Subject", "Subscription"]
+      }
+    ]
+  ]
+}
+```
+
+```ts
+// ❌ error
+class MyComponent {
+  sub = new Subject<void>();
+}
+
+// ✅ after autofix
+class MyComponent {
+  destroy$ = new Subject<void>();
+}
+```
+
+---
+
+## decorator-key-sort
+
+Enforces a consistent key order inside Angular decorator objects (`@Component`, `@Directive`, `@NgModule`, `@Pipe`,
+`@Injectable`). The expected order is passed as configuration.
+
+```json
+{
+  "@taiga-ui/experience-next/decorator-key-sort": [
+    "error",
+    {
+      "Component": ["standalone", "selector", "imports", "templateUrl", "styleUrl", "changeDetection"],
+      "Pipe": ["standalone", "name", "pure"]
+    }
+  ]
+}
+```
+
+```ts
+// ❌ error
+@Component({
+    templateUrl: './app.component.html',
+    selector: 'app-root',
+    standalone: true,
+})
+
+// ✅ after autofix
+@Component({
+    standalone: true,
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+})
+```
+
+---
+
+## flat-exports
+
+When an exported `as const` tuple contains another exported `as const` tuple of Angular classes, it should be spread
+rather than nested. This keeps entity collections flat and avoids double-wrapping.
+
+```ts
+// ❌ error
+export const TuiTextfield = [TuiTextfieldDirective] as const;
+export const TuiInput = [TuiTextfield, TuiInputDirective] as const;
+
+// ✅ after autofix
+export const TuiTextfield = [TuiTextfieldDirective] as const;
+export const TuiInput = [...TuiTextfield, TuiInputDirective] as const;
+```
+
+---
+
+## injection-token-description
+
+The description string passed to `new InjectionToken(...)` must contain the name of the variable it is assigned to. This
+makes token names visible in Angular DevTools and error messages.
+
+```ts
+// ❌ error — description does not mention TUI_MY_TOKEN
+const TUI_MY_TOKEN = new InjectionToken<string>('some description');
+
+// ✅ after autofix
+const TUI_MY_TOKEN = new InjectionToken<string>('[TUI_MY_TOKEN]: some description');
+```
+
+---
+
+## no-deep-imports
+
+Disallows deep path imports from Taiga UI packages — imports must go through the package root. Works for any
+`@taiga-ui/*` package by default. Autofix strips the deep path.
+
+```ts
+// ❌ error
+import {TuiButton} from '@taiga-ui/core/components/button';
+
+// ✅ after autofix
+import {TuiButton} from '@taiga-ui/core';
+```
+
+```json
+{
+  "@taiga-ui/experience-next/no-deep-imports": [
+    "error",
+    {
+      "currentProject": "(?<=projects/)([\\w-]+)",
+      "ignoreImports": ["\\?raw", "@taiga-ui/testing/cypress"]
+    }
+  ]
+}
+```
+
+| Option              | Type       | Description                                                                |
+| ------------------- | ---------- | -------------------------------------------------------------------------- |
+| `currentProject`    | `string`   | RegExp to extract the current project name from the file path              |
+| `deepImport`        | `string`   | RegExp to detect the deep import segment (default: `@taiga-ui/` sub-paths) |
+| `importDeclaration` | `string`   | RegExp to match import declarations the rule applies to                    |
+| `ignoreImports`     | `string[]` | RegExp patterns for imports to ignore                                      |
+| `projectName`       | `string`   | RegExp to extract the package name from the import source                  |
+
+---
+
+## no-deep-imports-to-indexed-packages
+
+Disallows deep imports from any external package whose root `index.ts` (or `index.d.ts`) re-exports the same subpath and
+is co-located with a `package.json` or `ng-package.json`. Does not require explicit package lists — resolves via
+TypeScript.
+
+```ts
+// ❌ error — @my-lib/index.ts already re-exports this subpath
+import {Foo} from '@my-lib/internal/foo';
+
+// ✅
+import {Foo} from '@my-lib/internal';
+```
+
+---
+
+## no-href-with-router-link
+
+Disallows using both `href` and `routerLink` on the same `<a>` element in Angular templates. Autofix removes the `href`
+attribute.
+
+```html
+<!-- ❌ error -->
+<a
+  href="/home"
+  routerLink="/home"
+>
+  Home
+</a>
+
+<!-- ✅ after autofix -->
+<a routerLink="/home">Home</a>
+```
+
+---
+
+## no-implicit-public
+
+Requires an explicit `public` modifier on all class members and constructor parameter properties that are public.
+Constructors are excluded.
+
+```ts
+// ❌ error
+class MyService {
+  value = 42;
+  doSomething(): void {}
+}
+
+// ✅ after autofix
+class MyService {
+  public value = 42;
+  public doSomething(): void {}
+}
+```
+
+---
+
+## no-playwright-empty-fill
+
+In Playwright tests, calling `.fill('')` on a locator should be replaced with `.clear()` — it is the idiomatic way to
+empty a field and communicates intent more clearly.
+
+```ts
+// ❌ error
+await page.getByLabel('Name').fill('');
+
+// ✅ after autofix
+await page.getByLabel('Name').clear();
+```
+
+---
+
+## object-single-line
+
+Single-property object literals that fit within `printWidth` characters on one line are collapsed to a single line.
+Compatible with Prettier formatting.
+
+```ts
+// ❌ error
+const x = {
+  foo: bar,
+};
+
+// ✅ after autofix
+const x = {foo: bar};
+```
+
+```json
+{
+  "@taiga-ui/experience-next/object-single-line": ["error", {"printWidth": 90}]
+}
+```
+
+| Option       | Type     | Default | Description                           |
+| ------------ | -------- | ------- | ------------------------------------- |
+| `printWidth` | `number` | `90`    | Maximum line length to allow inlining |
+
+---
+
 ## prefer-deep-imports
 
 Enforce imports from the deepest available entry point of Taiga UI packages.
@@ -72,3 +327,106 @@ Enforce imports from the deepest available entry point of Taiga UI packages.
 ```
 
 Use `strict` to forbid imports from intermediate entry points when deeper ones exist (recommended for CI).
+
+---
+
+## prefer-multi-arg-push
+
+Combine consecutive `.push()` calls on the same array into a single multi-argument call.
+
+```ts
+// ❌ error
+output.push('# Getting Started');
+output.push('');
+
+// ✅ after autofix
+output.push('# Getting Started', '');
+```
+
+---
+
+## short-tui-imports
+
+In Angular decorator `imports` arrays, replaces full `TuiXxxComponent` / `TuiYyyDirective` names with their shorthand
+aliases (e.g. `TuiButton`). Also updates the corresponding `import` statement.
+
+```ts
+// ❌ error
+import {TuiButtonDirective} from '@taiga-ui/core';
+
+@Component({
+    imports: [TuiButtonDirective],
+})
+
+// ✅ after autofix
+import {TuiButton} from '@taiga-ui/core';
+
+@Component({
+    imports: [TuiButton],
+})
+```
+
+```json
+{
+  "@taiga-ui/experience-next/short-tui-imports": [
+    "error",
+    {
+      "decorators": ["Component", "Directive", "NgModule", "Pipe"],
+      "exceptions": [{"from": "TuiTextfieldOptionsDirective", "to": "TuiTextfield"}]
+    }
+  ]
+}
+```
+
+| Option       | Type                           | Description                                                |
+| ------------ | ------------------------------ | ---------------------------------------------------------- |
+| `decorators` | `string[]`                     | Decorator names to inspect (default: all Angular ones)     |
+| `exceptions` | `{from: string, to: string}[]` | Explicit rename mappings that override the default pattern |
+
+---
+
+## standalone-imports-sort
+
+Sorts the `imports` array inside Angular decorators (`@Component`, `@Directive`, `@NgModule`, `@Pipe`) alphabetically.
+Spread elements are placed after named identifiers.
+
+```ts
+// ❌ error
+@Component({
+    imports: [TuiButton, CommonModule, AsyncPipe],
+})
+
+// ✅ after autofix
+@Component({
+    imports: [AsyncPipe, CommonModule, TuiButton],
+})
+```
+
+```json
+{
+  "@taiga-ui/experience-next/standalone-imports-sort": [
+    "error",
+    {"decorators": ["Component", "Directive", "NgModule", "Pipe"]}
+  ]
+}
+```
+
+---
+
+## strict-tui-doc-example
+
+Validates that properties of a `TuiDocExample`-typed object have keys matching known file-type names (`TypeScript`,
+`HTML`, `CSS`, `LESS`, `JavaScript`) and that the import path extension matches the key. Autofix corrects the import
+extension.
+
+```ts
+// ❌ error — key says "TypeScript" but path has .html extension
+readonly example: TuiDocExample = {
+    TypeScript: import('./example/index.html?raw'),
+};
+
+// ✅ after autofix
+readonly example: TuiDocExample = {
+    TypeScript: import('./example/index.ts?raw'),
+};
+```

package/index.d.ts

@@ -51,6 +51,9 @@ declare const plugin: {
         }], unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
             name: string;
         };
+        'prefer-multi-arg-push': import("@typescript-eslint/utils/ts-eslint").RuleModule<"preferMultiArgPush", [], unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
+            name: string;
+        };
         'short-tui-imports': import("@typescript-eslint/utils/ts-eslint").RuleModule<"replaceTuiImport", import("./rules/short-tui-imports").Options, unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
             name: string;
         };

package/index.esm.js

@@ -600,6 +600,7 @@ var recommended = defineConfig([
             'import/no-cycle': 'error',
             'import/no-duplicates': ['error', { 'prefer-inline': true }],
             'import/no-mutable-exports': 'error',
+            'import/no-named-as-default': 'error',
             'import/no-self-import': 'error',
             'import/no-unresolved': 'off',
             'import/no-useless-path-segments': ['error', { noUselessIndex: true }],
@@ -901,6 +902,7 @@ var recommended = defineConfig([
             '@taiga-ui/experience-next/no-deep-imports-to-indexed-packages': 'error',
             '@taiga-ui/experience-next/no-implicit-public': 'error',
             '@taiga-ui/experience-next/object-single-line': ['error', { printWidth: 90 }],
+            '@taiga-ui/experience-next/prefer-multi-arg-push': 'error',
             '@taiga-ui/experience-next/short-tui-imports': 'error',
             '@taiga-ui/experience-next/standalone-imports-sort': [
                 'error',
@@ -1312,8 +1314,8 @@ function intersect(a, b) {
     return a.some((type) => origin.has(type));
 }
 
-const createRule$b = ESLintUtils.RuleCreator((name) => name);
-var classPropertyNaming = createRule$b({
+const createRule$c = ESLintUtils.RuleCreator((name) => name);
+var classPropertyNaming = createRule$c({
     create(context, [configs]) {
         const parserServices = ESLintUtils.getParserServices(context);
         const typeChecker = parserServices.program.getTypeChecker();
@@ -1482,9 +1484,9 @@ function isExternalPureTuple(typeChecker, type) {
     return typeArgs.every((item) => isClassType(item));
 }
 
-const createRule$a = ESLintUtils.RuleCreator((name) => name);
+const createRule$b = ESLintUtils.RuleCreator((name) => name);
 const MESSAGE_ID$5 = 'spreadArrays';
-var flatExports = createRule$a({
+var flatExports = createRule$b({
     create(context) {
         const parserServices = ESLintUtils.getParserServices(context);
         const typeChecker = parserServices.program.getTypeChecker();
@@ -1611,8 +1613,8 @@ var flatExports = createRule$a({
 
 const MESSAGE_ID$4 = 'invalid-injection-token-description';
 const ERROR_MESSAGE$3 = "InjectionToken's description should contain token's name";
-const createRule$9 = ESLintUtils.RuleCreator((name) => name);
-const rule$6 = createRule$9({
+const createRule$a = ESLintUtils.RuleCreator((name) => name);
+const rule$7 = createRule$a({
     create(context) {
         return {
             'NewExpression[callee.name="InjectionToken"]'(node) {
@@ -1680,8 +1682,8 @@ const DEFAULT_OPTIONS = {
     importDeclaration: '^@taiga-ui*',
     projectName: String.raw `(?<=^@taiga-ui/)([-\w]+)`,
 };
-const createRule$8 = ESLintUtils.RuleCreator((name) => name);
-const rule$5 = createRule$8({
+const createRule$9 = ESLintUtils.RuleCreator((name) => name);
+const rule$6 = createRule$9({
     create(context) {
         const { currentProject, deepImport, ignoreImports, importDeclaration, projectName, } = { ...DEFAULT_OPTIONS, ...context.options[0] };
         const hasNonCodeExtension = (source) => {
@@ -1768,13 +1770,13 @@ const rule$5 = createRule$8({
     name: 'no-deep-imports',
 });
 
-const createRule$7 = ESLintUtils.RuleCreator((name) => name);
+const createRule$8 = ESLintUtils.RuleCreator((name) => name);
 const resolveCacheByOptions = new WeakMap();
 const nearestFileUpCache = new Map();
 const markerCache = new Map();
 const indexFileCache = new Map();
 const indexExportsCache = new Map();
-var noDeepImportsToIndexedPackages = createRule$7({
+var noDeepImportsToIndexedPackages = createRule$8({
     create(context) {
         const parserServices = ESLintUtils.getParserServices(context);
         const program = parserServices.program;
@@ -2017,8 +2019,8 @@ const config = {
     },
 };
 
-const createRule$6 = ESLintUtils.RuleCreator((name) => name);
-const rule$4 = createRule$6({
+const createRule$7 = ESLintUtils.RuleCreator((name) => name);
+const rule$5 = createRule$7({
     create(context) {
         const checkImplicitPublic = (node) => {
             const classRef = getClass(node);
@@ -2090,8 +2092,8 @@ function getClass(node) {
     return getClass(node.parent);
 }
 
-const createRule$5 = ESLintUtils.RuleCreator((name) => name);
-const rule$3 = createRule$5({
+const createRule$6 = ESLintUtils.RuleCreator((name) => name);
+const rule$4 = createRule$6({
     create(context) {
         const services = ESLintUtils.getParserServices(context);
         const checker = services.program.getTypeChecker();
@@ -2179,8 +2181,8 @@ function isPlaywrightLocatorType(type) {
     });
 }
 
-const createRule$4 = ESLintUtils.RuleCreator((name) => name);
-const rule$2 = createRule$4({
+const createRule$5 = ESLintUtils.RuleCreator((name) => name);
+const rule$3 = createRule$5({
     create(context, [{ printWidth }]) {
         const sourceCode = context.sourceCode;
         const getLineEndIndex = (lineStartIndex) => {
@@ -2460,8 +2462,8 @@ const rule$2 = createRule$4({
 
 const MESSAGE_ID$1 = 'prefer-deep-imports';
 const ERROR_MESSAGE = 'Import via root entry point is prohibited when nested entry points exist';
-const createRule$3 = ESLintUtils.RuleCreator(() => ERROR_MESSAGE);
-var preferDeepImports = createRule$3({
+const createRule$4 = ESLintUtils.RuleCreator(() => ERROR_MESSAGE);
+var preferDeepImports = createRule$4({
     create(context, [options]) {
         const allowedPackages = normalizeImportFilter(options.importFilter);
         const isStrictMode = options.strict ?? false;
@@ -2809,6 +2811,100 @@ function buildRewrittenImports(node, baseImportPath, symbolToEntryPoint) {
     return importStatements.join('\n');
 }
 
+const createRule$3 = ESLintUtils.RuleCreator((name) => name);
+function getPushCall(node) {
+    if (node.expression.type !== AST_NODE_TYPES.CallExpression) {
+        return null;
+    }
+    const call = node.expression;
+    if (call.callee.type !== AST_NODE_TYPES.MemberExpression) {
+        return null;
+    }
+    const { property } = call.callee;
+    if (property.type !== AST_NODE_TYPES.Identifier || property.name !== 'push') {
+        return null;
+    }
+    return call;
+}
+const rule$2 = createRule$3({
+    create(context) {
+        const { sourceCode } = context;
+        function checkBody(statements) {
+            let i = 0;
+            while (i < statements.length) {
+                const stmt = statements[i];
+                if (stmt.type !== AST_NODE_TYPES.ExpressionStatement) {
+                    i++;
+                    continue;
+                }
+                const call = getPushCall(stmt);
+                if (!call) {
+                    i++;
+                    continue;
+                }
+                const arrayText = sourceCode.getText(call.callee.object);
+                const group = [stmt];
+                let j = i + 1;
+                while (j < statements.length) {
+                    const nextStmt = statements[j];
+                    if (nextStmt.type !== AST_NODE_TYPES.ExpressionStatement) {
+                        break;
+                    }
+                    const nextCall = getPushCall(nextStmt);
+                    if (!nextCall ||
+                        sourceCode.getText(nextCall.callee.object) !== arrayText) {
+                        break;
+                    }
+                    group.push(nextStmt);
+                    j++;
+                }
+                if (group.length > 1) {
+                    group.forEach((groupStmt, idx) => {
+                        context.report({
+                            ...(idx === 0
+                                ? {
+                                    fix(fixer) {
+                                        const allArgs = group
+                                            .flatMap((s) => s.expression.arguments)
+                                            .map((arg) => sourceCode.getText(arg))
+                                            .join(', ');
+                                        const lastStmt = group[group.length - 1];
+                                        return fixer.replaceTextRange([groupStmt.range[0], lastStmt.range[1]], `${arrayText}.push(${allArgs});`);
+                                    },
+                                }
+                                : {}),
+                            messageId: 'preferMultiArgPush',
+                            node: groupStmt,
+                        });
+                    });
+                }
+                i = j;
+            }
+        }
+        return {
+            BlockStatement(node) {
+                checkBody(node.body);
+            },
+            Program(node) {
+                checkBody(node.body);
+            },
+        };
+    },
+    defaultOptions: [],
+    meta: {
+        docs: {
+            description: 'Enforce combining consecutive .push() calls on the same array into a single call.',
+        },
+        fixable: 'code',
+        messages: {
+            preferMultiArgPush: 'Combine consecutive .push() calls on the same array into a single multi-argument call.',
+        },
+        schema: [],
+        type: 'suggestion',
+    },
+    name: 'prefer-multi-arg-push',
+});
+
 function getImportedName(spec) {
     if (spec.imported.type === AST_NODE_TYPES.Identifier) {
         return spec.imported.name;
@@ -3284,14 +3380,15 @@ const plugin = {
         'class-property-naming': classPropertyNaming,
         'decorator-key-sort': config$1,
         'flat-exports': flatExports,
-        'injection-token-description': rule$6,
-        'no-deep-imports': rule$5,
+        'injection-token-description': rule$7,
+        'no-deep-imports': rule$6,
         'no-deep-imports-to-indexed-packages': noDeepImportsToIndexedPackages,
         'no-href-with-router-link': config,
-        'no-implicit-public': rule$4,
-        'no-playwright-empty-fill': rule$3,
-        'object-single-line': rule$2,
+        'no-implicit-public': rule$5,
+        'no-playwright-empty-fill': rule$4,
+        'object-single-line': rule$3,
         'prefer-deep-imports': preferDeepImports,
+        'prefer-multi-arg-push': rule$2,
         'short-tui-imports': rule$1,
         'standalone-imports-sort': standaloneImportsSort,
         'strict-tui-doc-example': rule,

package/package.json

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

package/rules/prefer-multi-arg-push.d.ts

@@ -0,0 +1,5 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+export declare const rule: ESLintUtils.RuleModule<"preferMultiArgPush", [], unknown, ESLintUtils.RuleListener> & {
+    name: string;
+};
+export default rule;