@ethlete/eslint-plugin 1.0.0-next.15 → 1.0.0-next.16

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 1.0.0-next.16
+
+### Minor Changes
+
+- [#3037](https://github.com/ethlete-io/ethdk/pull/3037) [`19469c2`](https://github.com/ethlete-io/ethdk/commit/19469c21903217e05b974ac69773f222e63ae4e1) Thanks [@github-actions](https://github.com/apps/github-actions)! - Add `no-effect-cleanup-return`: flags a cleanup function returned from `effect()` /
+  `afterRenderEffect()`, which Angular ignores — so the teardown silently never runs. Auto-fixes the
+  mechanical case to the `onCleanup` parameter; otherwise points at `inject(DestroyRef).onDestroy()`.
+
+- [#3037](https://github.com/ethlete-io/ethdk/pull/3037) [`3151b7a`](https://github.com/ethlete-io/ethdk/commit/3151b7a253d14e38e22e20d67bf0191f141c144e) Thanks [@github-actions](https://github.com/apps/github-actions)! - Add `ethlete/no-template-literal-before-inline-template`, and restructure the files it flagged.
+
+  The Angular VS Code extension decides **client-side** whether the cursor sits inside an inline `template:` before it forwards completion, hover, go-to-definition or signature-help to the language server. That check (`isNotTypescriptOrSupportedDecoratorField`) walks the file with a bare `ts.createScanner()` loop, which cannot re-scan `}` as `TemplateMiddle`/`TemplateTail` — that needs the parser's `reScanTemplateToken()`. So the first template literal containing a `${…}` substitution desynchronises both the token stream and the brace counter, the scanner never recognises `template` `:` again, and every template request below it is dropped. The language server answers those requests correctly; the editor just never asks, so the template silently has no IntelliSense at all.
+
+  The new rule reproduces that scanner verbatim, so it reports exactly the templates the extension would abandon — no heuristic. Twenty inline templates across `components`, `cdk` and the playground were affected, all of them behind a fixture or helper that happened to use an interpolated template literal. Story fixtures moved into sibling `*-storybook.data.ts` files; spec fixtures and in-class helpers that must stay above their component (because a later `@Component` references the class in `imports`) were rewritten without the interpolation.
+
+  No public API changed — the `components` and `cdk` bumps are story/spec restructuring plus moving `signalVisibilityChangeClasses` below `RichFilterHostComponent` in the same module.
+
 ## 1.0.0-next.15
 
 ### Minor Changes

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@ethlete/eslint-plugin",
-  "version": "1.0.0-next.15",
+  "version": "1.0.0-next.16",
   "license": "MIT",
   "type": "commonjs",
   "main": "./src/index.js",
   "peerDependencies": {
     "@angular-eslint/eslint-plugin-template": ">=21.0.0",
-    "@angular/core": "22.0.5",
+    "@angular/core": "22.0.7",
     "@typescript-eslint/eslint-plugin": ">=8.0.0",
     "eslint": ">=9.0.0",
     "tslib": "2.8.1",

package/src/configs/recommended.js

@@ -253,6 +253,9 @@ const recommendedTs = {
     // No .subscribe() inside effect() or computed()
     'ethlete/no-rxjs-in-effect': 'error',
 
+    // No cleanup function returned from effect() — Angular ignores it, so it never runs
+    'ethlete/no-effect-cleanup-return': 'error',
+
     // No readonly on reactive class properties (signals, inputs, computed, inject, etc.)
     'ethlete/no-readonly-signal': 'error',
 
@@ -343,6 +346,10 @@ const recommendedTs = {
     // Remove standalone metadata — standalone is implicit and should not be declared
     'ethlete/no-standalone-flag': 'error',
 
+    // No interpolated template literal above an inline template — it silently kills
+    // Angular language service completions for the rest of the file
+    'ethlete/no-template-literal-before-inline-template': 'error',
+
     // ── Angular outputs ─────────────────────────────────────────────────────
 
     // No on-prefixed outputs (onSelectDate → selectDate)

package/src/index.js

@@ -5,6 +5,7 @@ const noInjectChain = require('./rules/no-inject-chain');
 const noTrivialReturnType = require('./rules/no-trivial-return-type');
 const noSubscribeInPipe = require('./rules/no-subscribe-in-pipe');
 const noRxjsInEffect = require('./rules/no-rxjs-in-effect');
+const noEffectCleanupReturn = require('./rules/no-effect-cleanup-return');
 const noReadonlySignal = require('./rules/no-readonly-signal');
 const noScreamingCaseLocal = require('./rules/no-screaming-case-local');
 const preferRxjsTimer = require('./rules/prefer-rxjs-timer');
@@ -40,6 +41,7 @@ const noUnusedClassMember = require('./rules/no-unused-class-member');
 const noDomQuery = require('./rules/no-dom-query');
 const noLeadingUnderscoreClassMember = require('./rules/no-leading-underscore-class-member');
 const noEmptyAngularMetadataArrays = require('./rules/no-empty-angular-metadata-arrays');
+const noTemplateLiteralBeforeInlineTemplate = require('./rules/no-template-literal-before-inline-template');
 const noStandaloneFlag = require('./rules/no-standalone-flag');
 const noEmptyNewlinesBetweenImports = require('./rules/no-empty-newlines-between-imports');
 const angularDecoratorPropertyOrder = require('./rules/angular-decorator-property-order');
@@ -64,6 +66,7 @@ const plugin = {
     'no-trivial-return-type': noTrivialReturnType,
     'no-subscribe-in-pipe': noSubscribeInPipe,
     'no-rxjs-in-effect': noRxjsInEffect,
+    'no-effect-cleanup-return': noEffectCleanupReturn,
     'no-readonly-signal': noReadonlySignal,
     'no-screaming-case-local': noScreamingCaseLocal,
     'prefer-rxjs-timer': preferRxjsTimer,
@@ -99,6 +102,7 @@ const plugin = {
     'no-dom-query': noDomQuery,
     'no-leading-underscore-class-member': noLeadingUnderscoreClassMember,
     'no-empty-angular-metadata-arrays': noEmptyAngularMetadataArrays,
+    'no-template-literal-before-inline-template': noTemplateLiteralBeforeInlineTemplate,
     'no-standalone-flag': noStandaloneFlag,
     'no-empty-newlines-between-imports': noEmptyNewlinesBetweenImports,
     'angular-decorator-property-order': angularDecoratorPropertyOrder,

package/src/rules/no-effect-cleanup-return.js

@@ -0,0 +1,179 @@
+// @ts-check
+'use strict';
+
+/**
+ * Disallows returning a cleanup function from an `effect()` callback.
+ *
+ * Angular's `effect()` ignores whatever the callback returns — the React/Svelte idiom of returning a
+ * teardown function silently does nothing, so the "cleanup" never runs. The bug is invisible: the code
+ * reads as if it unregisters, and only the leak shows up later.
+ *
+ * BAD:
+ *   effect(() => {
+ *     this.group?.registerItem(this);
+ *
+ *     return () => this.group?.unregisterItem(this); // ❌ never called
+ *   });
+ *
+ * GOOD — teardown tied to each re-run (the registered key is reactive):
+ *   effect((onCleanup) => {
+ *     const id = this.ref().id;
+ *     this.stack?.registerItem(id);
+ *
+ *     onCleanup(() => this.stack?.unregisterItem(id));
+ *   });
+ *
+ * GOOD — teardown tied to the lifetime, for a registration that never changes:
+ *   this.group?.registerItem(this);
+ *   inject(DestroyRef).onDestroy(() => this.group?.unregisterItem(this));
+ */
+
+/** Calls whose first argument is a body that ignores its return value. */
+const EFFECT_CALLEES = new Set(['effect', 'afterRenderEffect']);
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+const isFunctionExpression = (node) =>
+  !!node && (node.type === 'ArrowFunctionExpression' || node.type === 'FunctionExpression');
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+const isFunction = (node) => isFunctionExpression(node) || node?.type === 'FunctionDeclaration';
+
+/**
+ * Every `return` the given function owns — returns inside nested functions belong to those, so the walk
+ * stops at each function boundary.
+ * @param {any} fn
+ * @returns {any[]}
+ */
+const ownReturnStatements = (fn) => {
+  /** @type {any[]} */
+  const returns = [];
+
+  /** @param {any} node */
+  const visit = (node) => {
+    if (!node || typeof node.type !== 'string') {
+      return;
+    }
+
+    if (node.type === 'ReturnStatement') {
+      returns.push(node);
+
+      return;
+    }
+
+    if (isFunction(node)) {
+      return;
+    }
+
+    for (const key of Object.keys(node)) {
+      if (key === 'parent') {
+        continue;
+      }
+
+      const value = node[key];
+
+      if (Array.isArray(value)) {
+        value.forEach(visit);
+      } else if (value && typeof value.type === 'string') {
+        visit(value);
+      }
+    }
+  };
+
+  fn.body.body.forEach(visit);
+
+  return returns;
+};
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noEffectCleanupReturn = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow returning a cleanup function from an effect() callback — Angular ignores it.',
+      recommended: true,
+    },
+    messages: {
+      returnedCleanup:
+        '{{callee}}() ignores the value its callback returns, so this cleanup function never runs. ' +
+        'Register it via the onCleanup parameter — {{callee}}((onCleanup) => { …; onCleanup(() => …) }) — or, ' +
+        'when the teardown belongs to the lifetime rather than to each re-run, drop the effect and use ' +
+        'inject(DestroyRef).onDestroy(() => …).',
+    },
+    schema: [],
+    fixable: 'code',
+  },
+  create(context) {
+    const sourceCode = context.sourceCode;
+
+    return {
+      CallExpression(node) {
+        const { callee } = node;
+
+        if (callee.type !== 'Identifier' || !EFFECT_CALLEES.has(callee.name)) {
+          return;
+        }
+
+        const callback = /** @type {any} */ (node.arguments[0]);
+
+        if (!isFunctionExpression(callback)) {
+          return;
+        }
+
+        // effect(() => () => cleanup()) — the whole body *is* the ignored cleanup
+        if (isFunctionExpression(callback.body)) {
+          context.report({
+            node: callback.body,
+            messageId: 'returnedCleanup',
+            data: { callee: callee.name },
+          });
+
+          return;
+        }
+
+        if (callback.body.type !== 'BlockStatement') {
+          return;
+        }
+
+        const returns = ownReturnStatements(callback);
+        const cleanupReturns = returns.filter((statement) => isFunctionExpression(statement.argument));
+
+        if (cleanupReturns.length === 0) {
+          return;
+        }
+
+        // Only the mechanical shape is auto-fixed: a zero-parameter callback whose single `return` hands
+        // back a function literal. With an existing parameter, an early `return`, or a returned reference,
+        // the intent needs a human.
+        // The parameter list's `(` — the first one before the body, so this works for `() => {}` and
+        // `function () {}` alike (their first token differs).
+        const openParen = sourceCode
+          .getTokens(callback)
+          .find((token) => token.value === '(' && token.range[1] <= callback.body.range[0]);
+        const fixable = callback.params.length === 0 && returns.length === 1 && cleanupReturns.length === 1;
+
+        for (const statement of cleanupReturns) {
+          context.report({
+            node: statement.argument,
+            messageId: 'returnedCleanup',
+            data: { callee: callee.name },
+            fix:
+              fixable && openParen
+                ? (fixer) => [
+                    fixer.insertTextAfter(openParen, 'onCleanup'),
+                    fixer.replaceText(statement, `onCleanup(${sourceCode.getText(statement.argument)});`),
+                  ]
+                : null,
+          });
+        }
+      },
+    };
+  },
+};
+
+module.exports = noEffectCleanupReturn;

package/src/rules/no-template-literal-before-inline-template.js

@@ -0,0 +1,190 @@
+// @ts-check
+'use strict';
+
+const ts = require('typescript');
+
+/**
+ * The Angular VS Code extension decides client-side whether a cursor in a `.ts` file sits inside an
+ * inline `template:` before it forwards completion / hover / definition / signature-help to the
+ * language server. That check (`isNotTypescriptOrSupportedDecoratorField` in
+ * `client/src/embedded_support.js`) walks the file with a bare `ts.createScanner()` loop.
+ *
+ * A bare scanner cannot re-scan `}` as `TemplateMiddle` / `TemplateTail` — that needs the parser's
+ * `reScanTemplateToken()`. So the first template literal containing a substitution desynchronises
+ * both the token stream and the brace counter, the scanner never recognises `template` `:` again,
+ * and every template request in the rest of the file is silently dropped. The language server
+ * answers those requests correctly; the editor just never asks.
+ *
+ * This rule reproduces that scanner verbatim, so it reports exactly the templates the extension
+ * would abandon — no heuristic, no false positives.
+ */
+const ANGULAR_PROPERTY_ASSIGNMENTS = new Set(['template', 'templateUrl', 'styleUrls', 'styleUrl', 'host']);
+
+/**
+ * @param {import('typescript').SyntaxKind} token
+ */
+const isPropertyAssignmentTerminator = (token) =>
+  token === ts.SyntaxKind.EndOfFileToken ||
+  token === ts.SyntaxKind.CommaToken ||
+  token === ts.SyntaxKind.SemicolonToken ||
+  token === ts.SyntaxKind.CloseBraceToken;
+
+/**
+ * Mirrors the extension's `isPropertyAssignmentToStringOrStringInArray`. Returns whether the editor
+ * would recognise `offset` as sitting inside a supported decorator field.
+ *
+ * @param {string} text
+ * @param {number} offset
+ */
+const editorSeesDecoratorField = (text, offset) => {
+  const scanner = ts.createScanner(ts.ScriptTarget.ESNext, true);
+  scanner.setText(text);
+
+  let token = scanner.scan();
+  let lastToken;
+  let lastTokenText;
+  let unclosedBraces = 0;
+  let unclosedBrackets = 0;
+  let propertyAssignmentContext = false;
+
+  while (token !== ts.SyntaxKind.EndOfFileToken && scanner.getTokenFullStart() < offset) {
+    if (
+      lastToken === ts.SyntaxKind.Identifier &&
+      lastTokenText !== undefined &&
+      token === ts.SyntaxKind.ColonToken &&
+      ANGULAR_PROPERTY_ASSIGNMENTS.has(lastTokenText)
+    ) {
+      propertyAssignmentContext = true;
+      token = scanner.scan();
+      continue;
+    }
+
+    if (unclosedBraces === 0 && unclosedBrackets === 0 && isPropertyAssignmentTerminator(token)) {
+      propertyAssignmentContext = false;
+    }
+
+    if (token === ts.SyntaxKind.OpenBracketToken) unclosedBrackets++;
+    else if (token === ts.SyntaxKind.OpenBraceToken) unclosedBraces++;
+    else if (token === ts.SyntaxKind.CloseBracketToken) unclosedBrackets--;
+    else if (token === ts.SyntaxKind.CloseBraceToken) unclosedBraces--;
+
+    const isStringToken =
+      token === ts.SyntaxKind.StringLiteral || token === ts.SyntaxKind.NoSubstitutionTemplateLiteral;
+    const isCursorInToken =
+      scanner.getTokenFullStart() <= offset && scanner.getTokenFullStart() + scanner.getTokenText().length >= offset;
+
+    if (propertyAssignmentContext && isCursorInToken && isStringToken) return true;
+
+    lastTokenText = scanner.getTokenText();
+    lastToken = token;
+    token = scanner.scan();
+  }
+
+  return false;
+};
+
+/**
+ * @param {import('estree').Property['key']} key
+ */
+const getPropertyName = (key) => {
+  if (key.type === 'Identifier') return key.name;
+  if (key.type === 'Literal' && typeof key.value === 'string') return key.value;
+  return null;
+};
+
+/**
+ * @param {any} node
+ */
+const getDecoratorName = (node) => {
+  const expression = node.expression;
+  if (!expression) return null;
+  if (expression.type === 'CallExpression') {
+    return expression.callee.type === 'Identifier' ? expression.callee.name : null;
+  }
+
+  return expression.type === 'Identifier' ? expression.name : null;
+};
+
+/**
+ * The inline template text, or null when the property is not a plain non-empty string literal.
+ *
+ * @param {any} value
+ */
+const getInlineTemplateText = (value) => {
+  if (value.type === 'Literal') return typeof value.value === 'string' ? value.value : null;
+  if (value.type === 'TemplateLiteral' && value.expressions.length === 0) return value.quasis[0]?.value.raw ?? '';
+  return null;
+};
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noTemplateLiteralBeforeInlineTemplate = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Disallow a substituted template literal above an inline component template, which silently disables Angular language service completions for the rest of the file.',
+    },
+    schema: [],
+    messages: {
+      breaksLanguageService:
+        'The Angular language service gives no completions, hover or go-to-definition inside this template. Its editor-side scanner desynchronises on the interpolated template literal at line {{line}}, so every template request below it is dropped. Move that code below the component, extract it to a sibling file, or write it without an interpolation.',
+    },
+  },
+  create(context) {
+    const sourceCode = context.sourceCode;
+    const text = sourceCode.getText();
+
+    /** @type {number[]} */
+    const interpolatedLiteralStarts = [];
+    /** @type {any[]} */
+    const inlineTemplates = [];
+
+    return {
+      /** @param {any} node */
+      TemplateLiteral(node) {
+        if (node.expressions.length > 0) interpolatedLiteralStarts.push(node.range[0]);
+      },
+
+      /** @param {import('eslint').Rule.Node} node */
+      Decorator(node) {
+        const decoratorName = getDecoratorName(node);
+        if (decoratorName !== 'Component' && decoratorName !== 'Directive') return;
+
+        const expression = /** @type {any} */ (node).expression;
+        if (expression.type !== 'CallExpression') return;
+
+        const metadata = expression.arguments[0];
+        if (!metadata || metadata.type !== 'ObjectExpression') return;
+
+        for (const property of metadata.properties) {
+          if (property.type !== 'Property') continue;
+          if (getPropertyName(property.key) !== 'template') continue;
+
+          const templateText = getInlineTemplateText(property.value);
+          if (templateText === null || templateText.trim().length === 0) continue;
+
+          inlineTemplates.push(property);
+        }
+      },
+
+      'Program:exit'() {
+        for (const property of inlineTemplates) {
+          // Where the editor would put the cursor: just inside the opening quote or backtick.
+          const cursor = property.value.range[0] + 2;
+          if (editorSeesDecoratorField(text, cursor)) continue;
+
+          const culprit = interpolatedLiteralStarts.find((start) => start < property.value.range[0]);
+          if (culprit === undefined) continue;
+
+          context.report({
+            node: property.key,
+            messageId: 'breaksLanguageService',
+            data: { line: String(sourceCode.getLocFromIndex(culprit).line) },
+          });
+        }
+      },
+    };
+  },
+};
+
+module.exports = noTemplateLiteralBeforeInlineTemplate;