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

package/README.md

@@ -53,6 +53,7 @@ export default [
 | 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-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-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                           | ✅  | 🔧  |     |
@@ -566,6 +567,37 @@ const doubled = computed(() => {
 
 ---
 
+## no-side-effects-in-computed
+
+<sup>`✅ Recommended`</sup>
+
+`computed()` should only derive a value from its inputs. This rule reports observable side effects inside Angular
+`computed()` callbacks, including signal writes (`.set()`, `.update()`, `.mutate()`), assignments to captured state,
+`++/--`, `delete`, and property mutations on objects that were not created inside the computation itself.
+
+```ts
+// ❌ error
+import {computed, signal} from '@angular/core';
+
+const source = signal(0);
+const target = signal(0);
+
+const derived = computed(() => {
+  target.set(source() + 1);
+  return target();
+});
+```
+
+```ts
+// ✅ ok
+import {computed, signal} from '@angular/core';
+
+const source = signal(0);
+const derived = computed(() => source() + 1);
+```
+
+---
+
 ## no-signal-reads-after-await-in-reactive-context
 
 <sup>`✅ Recommended`</sup>

package/index.d.ts

@@ -53,6 +53,9 @@ declare const plugin: {
         } | undefined)?], unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
             name: string;
         };
+        'no-side-effects-in-computed': import("@typescript-eslint/utils/ts-eslint").RuleModule<"sideEffectInComputed", [], unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
+            name: string;
+        };
         'no-signal-reads-after-await-in-reactive-context': import("@typescript-eslint/utils/ts-eslint").RuleModule<"readAfterAwait", [], unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
             name: string;
         };

package/index.esm.js

@@ -908,6 +908,7 @@ var recommended = defineConfig([
             '@taiga-ui/experience-next/no-fully-untracked-effect': 'error',
             '@taiga-ui/experience-next/no-implicit-public': 'error',
             '@taiga-ui/experience-next/no-redundant-type-annotation': 'error',
+            '@taiga-ui/experience-next/no-side-effects-in-computed': 'error',
             '@taiga-ui/experience-next/no-signal-reads-after-await-in-reactive-context': 'error',
             '@taiga-ui/experience-next/no-untracked-outside-reactive-context': 'error',
             '@taiga-ui/experience-next/no-useless-untracked': 'error',
@@ -1333,8 +1334,8 @@ function intersect(a, b) {
     return a.some((type) => origin.has(type));
 }
 
-const createRule$f = ESLintUtils.RuleCreator((name) => name);
-var classPropertyNaming = createRule$f({
+const createRule$g = ESLintUtils.RuleCreator((name) => name);
+var classPropertyNaming = createRule$g({
     create(context, [configs]) {
         const parserServices = ESLintUtils.getParserServices(context);
         const typeChecker = parserServices.program.getTypeChecker();
@@ -1503,9 +1504,9 @@ function isExternalPureTuple(typeChecker, type) {
     return typeArgs.every((item) => isClassType(item));
 }
 
-const createRule$e = ESLintUtils.RuleCreator((name) => name);
+const createRule$f = ESLintUtils.RuleCreator((name) => name);
 const MESSAGE_ID$7 = 'spreadArrays';
-var flatExports = createRule$e({
+var flatExports = createRule$f({
     create(context) {
         const parserServices = ESLintUtils.getParserServices(context);
         const typeChecker = parserServices.program.getTypeChecker();
@@ -1711,8 +1712,8 @@ const config$2 = {
 
 const MESSAGE_ID$5 = 'invalid-injection-token-description';
 const ERROR_MESSAGE$3 = "InjectionToken's description should contain token's name";
-const createRule$d = ESLintUtils.RuleCreator((name) => name);
-const rule$g = createRule$d({
+const createRule$e = ESLintUtils.RuleCreator((name) => name);
+const rule$h = createRule$e({
     create(context) {
         return {
             'NewExpression[callee.name="InjectionToken"]'(node) {
@@ -1779,8 +1780,8 @@ const DEFAULT_OPTIONS = {
     importDeclaration: '^@taiga-ui*',
     projectName: String.raw `(?<=^@taiga-ui/)([-\w]+)`,
 };
-const createRule$c = ESLintUtils.RuleCreator((name) => name);
-const rule$f = createRule$c({
+const createRule$d = ESLintUtils.RuleCreator((name) => name);
+const rule$g = createRule$d({
     create(context) {
         const { currentProject, deepImport, ignoreImports, importDeclaration, projectName, } = { ...DEFAULT_OPTIONS, ...context.options[0] };
         const hasNonCodeExtension = (source) => {
@@ -1867,13 +1868,13 @@ const rule$f = createRule$c({
     name: 'no-deep-imports',
 });
 
-const createRule$b = ESLintUtils.RuleCreator((name) => name);
+const createRule$c = 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$b({
+var noDeepImportsToIndexedPackages = createRule$c({
     create(context) {
         const parserServices = ESLintUtils.getParserServices(context);
         const program = parserServices.program;
@@ -2298,7 +2299,7 @@ const AFTER_RENDER_EFFECT_PHASES = new Map([
     ['read', 'afterRenderEffect().read'],
     ['write', 'afterRenderEffect().write'],
 ]);
-function isReactiveCallback(node) {
+function isReactiveCallback$1(node) {
     return (node?.type === AST_NODE_TYPES.ArrowFunctionExpression ||
         node?.type === AST_NODE_TYPES.FunctionExpression);
 }
@@ -2322,7 +2323,7 @@ function isAngularCoreCall(node, program, exportedName) {
 }
 function appendFirstArgReactiveScope(scopes, call, kind) {
     const [arg] = call.arguments;
-    if (!isReactiveCallback(arg)) {
+    if (!isReactiveCallback$1(arg)) {
         return;
     }
     scopes.push({ callback: arg, kind, owner: call, reportNode: call });
@@ -2334,7 +2335,7 @@ function appendObjectPropertyReactiveScopes(scopes, call, object, labels) {
         }
         const name = getPropertyName(property);
         const label = name ? labels.get(name) : null;
-        if (!label || !isReactiveCallback(property.value)) {
+        if (!label || !isReactiveCallback$1(property.value)) {
             continue;
         }
         scopes.push({
@@ -2555,7 +2556,7 @@ function collectReadsInsideUntracked(root, checker, esTreeNodeToTSNodeMap, progr
     });
     return reads;
 }
-const rule$e = createUntrackedRule({
+const rule$f = createUntrackedRule({
     create(context) {
         const parserServices = ESLintUtils.getParserServices(context);
         const checker = parserServices.program.getTypeChecker();
@@ -2641,8 +2642,8 @@ const config$1 = {
     },
 };
 
-const createRule$a = ESLintUtils.RuleCreator((name) => name);
-const rule$d = createRule$a({
+const createRule$b = ESLintUtils.RuleCreator((name) => name);
+const rule$e = createRule$b({
     create(context) {
         const checkImplicitPublic = (node) => {
             const classRef = getClass(node);
@@ -2713,9 +2714,9 @@ function getClass(node) {
     return getClass(node.parent);
 }
 
-const createRule$9 = ESLintUtils.RuleCreator((name) => name);
+const createRule$a = ESLintUtils.RuleCreator((name) => name);
 const LEGACY_PEER_DEPS_PATTERN = /^legacy-peer-deps\s*=\s*true$/i;
-const rule$c = createRule$9({
+const rule$d = createRule$a({
     create(context) {
         return {
             Program(node) {
@@ -2753,8 +2754,8 @@ const rule$c = createRule$9({
     name: 'no-legacy-peer-deps',
 });
 
-const createRule$8 = ESLintUtils.RuleCreator((name) => name);
-const rule$b = createRule$8({
+const createRule$9 = ESLintUtils.RuleCreator((name) => name);
+const rule$c = createRule$9({
     create(context) {
         const services = ESLintUtils.getParserServices(context);
         const checker = services.program.getTypeChecker();
@@ -2919,7 +2920,7 @@ const config = {
     },
 };
 
-const createRule$7 = ESLintUtils.RuleCreator((name) => name);
+const createRule$8 = ESLintUtils.RuleCreator((name) => name);
 function collectArrayExpressions(node) {
     const result = [];
     if (node.type === AST_NODE_TYPES.ArrayExpression) {
@@ -2945,7 +2946,7 @@ function collectArrayExpressions(node) {
     }
     return result;
 }
-const rule$a = createRule$7({
+const rule$b = createRule$8({
     create(context) {
         const parserServices = ESLintUtils.getParserServices(context);
         const typeChecker = parserServices.program.getTypeChecker();
@@ -3041,6 +3042,207 @@ const rule$a = createRule$7({
     name: 'no-redundant-type-annotation',
 });
 
+/**
+ * Strips TypeScript-only wrapper nodes that have no runtime meaning:
+ * `as` casts, non-null assertions (`!`), type assertions (`<T>expr`), and
+ * optional-chain wrappers. Iterates until no more wrappers are found.
+ */
+function unwrapExpression(expression) {
+    let current = expression;
+    let didUnwrap = true;
+    while (didUnwrap) {
+        didUnwrap = false;
+        switch (current.type) {
+            case AST_NODE_TYPES.ChainExpression:
+                current = current.expression;
+                didUnwrap = true;
+                break;
+            case AST_NODE_TYPES.TSAsExpression:
+                current = current.expression;
+                didUnwrap = true;
+                break;
+            case AST_NODE_TYPES.TSNonNullExpression:
+                current = current.expression;
+                didUnwrap = true;
+                break;
+            case AST_NODE_TYPES.TSTypeAssertion:
+                current = current.expression;
+                didUnwrap = true;
+                break;
+        }
+    }
+    return current;
+}
+
+const createRule$7 = ESLintUtils.RuleCreator((name) => name);
+function isReactiveCallback(node) {
+    return (node?.type === AST_NODE_TYPES.ArrowFunctionExpression ||
+        node?.type === AST_NODE_TYPES.FunctionExpression);
+}
+function unwrapMutationTarget(node) {
+    let current = node;
+    while (current.type === AST_NODE_TYPES.TSAsExpression ||
+        current.type === AST_NODE_TYPES.TSNonNullExpression ||
+        current.type === AST_NODE_TYPES.TSTypeAssertion) {
+        current = current.expression;
+    }
+    return current;
+}
+function collectMutationTargets(node) {
+    const current = unwrapMutationTarget(node);
+    switch (current.type) {
+        case AST_NODE_TYPES.ArrayPattern:
+            return current.elements.flatMap((element) => element ? collectMutationTargets(element) : []);
+        case AST_NODE_TYPES.AssignmentPattern:
+            return collectMutationTargets(current.left);
+        case AST_NODE_TYPES.Identifier:
+            return [current];
+        case AST_NODE_TYPES.MemberExpression:
+            return [current];
+        case AST_NODE_TYPES.ObjectPattern:
+            return current.properties.flatMap((property) => {
+                if (property.type === AST_NODE_TYPES.RestElement) {
+                    return collectMutationTargets(property.argument);
+                }
+                return collectMutationTargets(property.value);
+            });
+        case AST_NODE_TYPES.RestElement:
+            return collectMutationTargets(current.argument);
+        default:
+            return [];
+    }
+}
+function getSymbolAtNode(node, checker, esTreeNodeToTSNodeMap) {
+    const tsNode = esTreeNodeToTSNodeMap.get(node);
+    if (!tsNode) {
+        return null;
+    }
+    return checker.getSymbolAtLocation(tsNode) ?? null;
+}
+function isLocalIdentifier(node, context) {
+    const symbol = getSymbolAtNode(node, context.checker, context.esTreeNodeToTSNodeMap);
+    if (!symbol) {
+        return false;
+    }
+    return (symbol.declarations ?? []).some((declaration) => {
+        const estreeDeclaration = context.tsNodeToESTreeNodeMap.get(declaration);
+        return (!!estreeDeclaration &&
+            isNodeInsideSynchronousReactiveScope(estreeDeclaration, context.callback));
+    });
+}
+function isLocallyCreatedExpression(node, context) {
+    const expression = unwrapExpression(node);
+    switch (expression.type) {
+        case AST_NODE_TYPES.ArrayExpression:
+        case AST_NODE_TYPES.NewExpression:
+        case AST_NODE_TYPES.ObjectExpression:
+            return true;
+        case AST_NODE_TYPES.Identifier:
+            return isLocalIdentifier(expression, context);
+        case AST_NODE_TYPES.MemberExpression:
+            return isLocallyCreatedExpression(expression.object, context);
+        default:
+            return false;
+    }
+}
+function hasObservableMutationTarget(node, context) {
+    return collectMutationTargets(node).some((target) => {
+        if (target.type === AST_NODE_TYPES.Identifier) {
+            return !isLocalIdentifier(target, context);
+        }
+        return !isLocallyCreatedExpression(target.object, context);
+    });
+}
+function reportSideEffect(node, inspectionContext, report) {
+    const key = String(node.range);
+    if (inspectionContext.reported.has(key)) {
+        return;
+    }
+    inspectionContext.reported.add(key);
+    report(node);
+}
+function inspectComputedBody(root, inspectionContext, report) {
+    walkSynchronousAst(root, (node) => {
+        if (node.type === AST_NODE_TYPES.CallExpression) {
+            if (isWritableSignalWrite(node, inspectionContext.checker, inspectionContext.esTreeNodeToTSNodeMap)) {
+                reportSideEffect(node, inspectionContext, report);
+            }
+            if (isAngularUntrackedCall(node, inspectionContext.program)) {
+                const [arg] = node.arguments;
+                if (isReactiveCallback(arg)) {
+                    inspectComputedBody(arg, inspectionContext, report);
+                }
+                return false;
+            }
+            if (node.callee.type === AST_NODE_TYPES.ArrowFunctionExpression ||
+                node.callee.type === AST_NODE_TYPES.FunctionExpression) {
+                inspectComputedBody(node.callee, inspectionContext, report);
+                return false;
+            }
+        }
+        if (node.type === AST_NODE_TYPES.AssignmentExpression &&
+            hasObservableMutationTarget(node.left, inspectionContext)) {
+            reportSideEffect(node.left, inspectionContext, report);
+        }
+        if (node.type === AST_NODE_TYPES.UpdateExpression &&
+            hasObservableMutationTarget(node.argument, inspectionContext)) {
+            reportSideEffect(node.argument, inspectionContext, report);
+        }
+        if (node.type === AST_NODE_TYPES.UnaryExpression &&
+            node.operator === 'delete' &&
+            hasObservableMutationTarget(node.argument, inspectionContext)) {
+            reportSideEffect(node.argument, inspectionContext, report);
+        }
+        return;
+    });
+}
+const rule$a = createRule$7({
+    create(context) {
+        const parserServices = ESLintUtils.getParserServices(context);
+        const checker = parserServices.program.getTypeChecker();
+        const esTreeNodeToTSNodeMap = parserServices.esTreeNodeToTSNodeMap;
+        const tsNodeToESTreeNodeMap = parserServices.tsNodeToESTreeNodeMap;
+        const { sourceCode } = context;
+        const program = sourceCode.ast;
+        return {
+            CallExpression(node) {
+                for (const scope of getReactiveScopes(node, program)) {
+                    if (scope.kind !== 'computed()') {
+                        continue;
+                    }
+                    const inspectionContext = {
+                        callback: scope.callback,
+                        checker,
+                        esTreeNodeToTSNodeMap,
+                        program,
+                        reported: new Set(),
+                        tsNodeToESTreeNodeMap,
+                    };
+                    inspectComputedBody(scope.callback, inspectionContext, (reportNode) => {
+                        context.report({
+                            data: { expression: sourceCode.getText(reportNode) },
+                            messageId: 'sideEffectInComputed',
+                            node: reportNode,
+                        });
+                    });
+                }
+            },
+        };
+    },
+    meta: {
+        docs: {
+            description: 'Disallow observable side effects inside `computed()` callbacks so derivations stay pure',
+            url: 'https://angular.dev/guide/signals',
+        },
+        messages: {
+            sideEffectInComputed: '`{{ expression }}` causes a side effect inside `computed()`. Keep computed derivations pure and move state changes to `effect()` or outside the computation.',
+        },
+        schema: [],
+        type: 'problem',
+    },
+    name: 'no-side-effects-in-computed',
+});
+
 const rule$9 = createUntrackedRule({
     create(context) {
         const parserServices = ESLintUtils.getParserServices(context);
@@ -3819,38 +4021,6 @@ const rule$6 = createUntrackedRule({
     name: 'no-useless-untracked',
 });
 
-/**
- * Strips TypeScript-only wrapper nodes that have no runtime meaning:
- * `as` casts, non-null assertions (`!`), type assertions (`<T>expr`), and
- * optional-chain wrappers. Iterates until no more wrappers are found.
- */
-function unwrapExpression(expression) {
-    let current = expression;
-    let didUnwrap = true;
-    while (didUnwrap) {
-        didUnwrap = false;
-        switch (current.type) {
-            case AST_NODE_TYPES.ChainExpression:
-                current = current.expression;
-                didUnwrap = true;
-                break;
-            case AST_NODE_TYPES.TSAsExpression:
-                current = current.expression;
-                didUnwrap = true;
-                break;
-            case AST_NODE_TYPES.TSNonNullExpression:
-                current = current.expression;
-                didUnwrap = true;
-                break;
-            case AST_NODE_TYPES.TSTypeAssertion:
-                current = current.expression;
-                didUnwrap = true;
-                break;
-        }
-    }
-    return current;
-}
-
 const createRule$5 = ESLintUtils.RuleCreator((name) => name);
 const rule$5 = createRule$5({
     create(context, [{ printWidth }]) {
@@ -5415,16 +5585,17 @@ const plugin = {
         'decorator-key-sort': config$3,
         'flat-exports': flatExports,
         'html-logical-properties': config$2,
-        'injection-token-description': rule$g,
-        'no-deep-imports': rule$f,
+        'injection-token-description': rule$h,
+        'no-deep-imports': rule$g,
         'no-deep-imports-to-indexed-packages': noDeepImportsToIndexedPackages,
-        'no-fully-untracked-effect': rule$e,
+        'no-fully-untracked-effect': rule$f,
         'no-href-with-router-link': config$1,
-        'no-implicit-public': rule$d,
-        'no-legacy-peer-deps': rule$c,
-        'no-playwright-empty-fill': rule$b,
+        'no-implicit-public': rule$e,
+        'no-legacy-peer-deps': rule$d,
+        'no-playwright-empty-fill': rule$c,
         'no-project-as-in-ng-template': config,
-        'no-redundant-type-annotation': rule$a,
+        'no-redundant-type-annotation': rule$b,
+        'no-side-effects-in-computed': rule$a,
         'no-signal-reads-after-await-in-reactive-context': rule$9,
         'no-string-literal-concat': rule$8,
         'no-untracked-outside-reactive-context': rule$7,

package/package.json

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

package/rules/no-side-effects-in-computed.d.ts

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