@ethlete/eslint-plugin 1.0.0-next.22 → 1.0.0-next.24

package/src/rules/prefer-scroll-state.js

@@ -3,23 +3,13 @@
 
 /**
  * Prefers signalElementScrollState / signalHostElementScrollState from @ethlete/core
- * over imperatively reading scroll position properties inside reactive contexts,
- * and disallows adding raw scroll event listeners in favour of the same signal utilities.
+ * instead of raw scroll event listeners.
  *
  * The signal utilities:
  * - Set up a scroll event listener that keeps a reactive signal in sync
  * - Clean up automatically when the component is destroyed
  * - Provide debouncing and direction tracking built in
  *
- * NOTE: The property-read check is a WARNING — imperative one-shot reads of
- * scrollTop/scrollLeft are fine in event handlers and animations; only flag
- * inside effect() / computed().
- *
- * BAD (reactive context):
- *   effect(() => {
- *     const top = this.el.nativeElement.scrollTop;  // stale snapshot ❌
- *   });
- *
  * BAD (scroll listeners — always wrong):
  *   el.addEventListener('scroll', fn);              // ❌
  *   fromEvent(el, 'scroll').subscribe(fn);          // ❌
@@ -31,53 +21,17 @@
  *   // Or use <et-scrollable> / ScrollableComponent for list scrolling
  */
 
-/** Scroll position properties read from DOM elements. */
-const SCROLL_PROPS = new Set(['scrollTop', 'scrollLeft', 'scrollY', 'scrollX']);
-
-/**
- * Returns the name of the wrapping reactive context ('effect' | 'computed') if
- * the node is inside one, crossing at least one function boundary.
- * @param {import('eslint').Rule.Node} node
- * @returns {string | null}
- */
-const getReactiveContext = (node) => {
-  let crossedFunctionBoundary = false;
-  let current = node.parent;
-
-  while (current) {
-    if (current.type === 'ArrowFunctionExpression' || current.type === 'FunctionExpression') {
-      crossedFunctionBoundary = true;
-    }
-
-    if (
-      crossedFunctionBoundary &&
-      current.type === 'CallExpression' &&
-      current.callee.type === 'Identifier' &&
-      (current.callee.name === 'effect' || current.callee.name === 'computed')
-    ) {
-      return current.callee.name;
-    }
-
-    current = current.parent;
-  }
-
-  return null;
-};
-
 /** @type {import('eslint').Rule.RuleModule} */
 const preferScrollState = {
   meta: {
     type: 'suggestion',
     docs: {
-      description:
-        "Prefer 'signalElementScrollState()' / 'signalHostElementScrollState()' from '@ethlete/core' over reading scroll position properties inside reactive contexts.",
+      description: "Prefer the scroll signal utilities from '@ethlete/core' over raw scroll event listeners.",
       recommended: true,
     },
     messages: {
-      preferScrollState:
-        "Avoid reading '{{prop}}' inside {{context}}() — it creates a stale snapshot. Use 'signalElementScrollState(elementRef)' or 'signalHostElementScrollState()' from '@ethlete/core' instead. For scroll direction, use 'signalElementLastScrollDirection()' / 'signalHostElementLastScrollDirection()'.",
       noScrollListener:
-        "Do not add 'scroll' event listeners directly. Use 'signalElementScrollState(elementRef)' / 'signalHostElementScrollState()' for scroll position or state, 'signalElementLastScrollDirection(elementRef)' / 'signalHostElementLastScrollDirection()' for scroll direction, or the 'ScrollableComponent' (et-scrollable) from '@ethlete/cdk' for scrollable lists. All are imported from '@ethlete/core' or '@ethlete/cdk'.",
+        "Do not add 'scroll' event listeners directly. Use 'signalElementScrollState(elementRef)' / 'signalHostElementScrollState()' for scroll state, 'signalElementLastScrollDirection(elementRef)' / 'signalHostElementLastScrollDirection()' for direction, or 'ScrollableComponent' from '@ethlete/components'.",
     },
     schema: [],
   },
@@ -133,24 +87,6 @@ const preferScrollState = {
           context.report({ node, messageId: 'noScrollListener' });
         }
       },
-
-      MemberExpression(node) {
-        if (node.property.type !== 'Identifier') return;
-        if (!SCROLL_PROPS.has(node.property.name)) return;
-
-        // Only flag reads (not assignments like el.scrollTop = 0).
-        const parent = node.parent;
-        if (parent && parent.type === 'AssignmentExpression' && parent.left === node) return;
-
-        const reactiveCtx = getReactiveContext(node);
-        if (!reactiveCtx) return;
-
-        context.report({
-          node,
-          messageId: 'preferScrollState',
-          data: { prop: node.property.name, context: reactiveCtx },
-        });
-      },
     };
   },
 };

package/src/rules/prefer-static-boolean-properties.js

@@ -23,6 +23,33 @@
  * which covers the string-literal case (where the rewrite is always safe).
  */
 
+const NATIVE_BOOLEAN_PROPERTIES = new Set([
+  'allowFullscreen',
+  'async',
+  'autofocus',
+  'autoplay',
+  'checked',
+  'controls',
+  'default',
+  'defer',
+  'disabled',
+  'formNoValidate',
+  'hidden',
+  'inert',
+  'isMap',
+  'loop',
+  'multiple',
+  'muted',
+  'noModule',
+  'noValidate',
+  'open',
+  'playsInline',
+  'readOnly',
+  'required',
+  'reversed',
+  'selected',
+]);
+
 /** @type {import('eslint').Rule.RuleModule} */
 const preferStaticBooleanProperties = {
   meta: {
@@ -55,6 +82,9 @@ const preferStaticBooleanProperties = {
         // structural directives (*foo has no keySpan details)
         const isBindingProperty = keySpan?.details && !keySpan.details.includes('@') && !keySpan.details.includes('.');
         if (!isBindingProperty) return;
+        if (name.startsWith('ng') || NATIVE_BOOLEAN_PROPERTIES.has(name)) {
+          return;
+        }
 
         // Only literal `true` / `false` expressions. `value.ast` is a
         // LiteralPrimitive for literals; the raw-source check guards against

package/src/rules/prefer-viewport-size.js

@@ -21,13 +21,7 @@
  */
 
 /** Properties on window that report viewport dimensions. */
-const VIEWPORT_PROPERTIES = new Set([
-  'innerWidth',
-  'innerHeight',
-  'outerWidth',
-  'outerHeight',
-  'screen', // window.screen.width / window.screen.height
-]);
+const VIEWPORT_PROPERTIES = new Set(['innerWidth', 'innerHeight']);
 
 /** @type {import('eslint').Rule.RuleModule} */
 const preferViewportSize = {

package/src/rules/require-dollar-suffix.js

@@ -1,6 +1,8 @@
 // @ts-check
 'use strict';
 
+const { getImportedName } = require('./internals/import-resolution');
+
 /**
  * Requires observable variables and class properties to be suffixed with `$`.
  *
@@ -45,9 +47,10 @@ const RXJS_SUBJECT_CTORS = new Set(['Subject', 'BehaviorSubject', 'ReplaySubject
 
 /**
  * Returns true if the expression looks like an Observable.
+ * @param {import('eslint').SourceCode} sourceCode
  * @param {any} node
  */
-const isObservableInit = (node) => {
+const isObservableInit = (sourceCode, node) => {
   if (!node) return false;
 
   // someObs.pipe(...)
@@ -61,12 +64,12 @@ const isObservableInit = (node) => {
   }
 
   // from(...), of(...), interval(...), etc.
-  if (node.type === 'CallExpression' && node.callee.type === 'Identifier' && RXJS_CREATORS.has(node.callee.name)) {
+  if (node.type === 'CallExpression' && RXJS_CREATORS.has(getImportedName(sourceCode, node.callee, 'rxjs') ?? '')) {
     return true;
   }
 
   // new Subject(), new BehaviorSubject(...), etc.
-  if (node.type === 'NewExpression' && node.callee.type === 'Identifier' && RXJS_SUBJECT_CTORS.has(node.callee.name)) {
+  if (node.type === 'NewExpression' && RXJS_SUBJECT_CTORS.has(getImportedName(sourceCode, node.callee, 'rxjs') ?? '')) {
     return true;
   }
 
@@ -92,7 +95,7 @@ const rule = {
      * @param {any} initNode
      */
     const checkBinding = (name, reportNode, initNode) => {
-      if (!isObservableInit(initNode)) return;
+      if (!isObservableInit(context.sourceCode, initNode)) return;
       if (name.endsWith('$')) return;
 
       context.report({

package/src/rules/require-form-submit.js

@@ -2,17 +2,12 @@
 'use strict';
 
 /**
- * Checks the two ends of the same wire: that a `<form>` handles its own submission, and that a
- * submit control reaches a form at all.
+ * Checks that a `<form>` handles its own submission.
  *
  *   <form (ngSubmit)="save()">          ✔
  *   <form [etForm]="form">              ✔ signal forms - the directive submits the field tree
  *   <form>                              ✘ pressing Enter in a field does nothing, or reloads the page
  *
- *   <form …><button type="submit">      ✔
- *   <button type="submit" form="edit">  ✔ associated by id, outside the form's subtree
- *   <button type="submit">              ✘ submits nothing
- *
  * A form declaring native submission (`action`, `ngNoForm`, `method="dialog"`) is left alone - it is
  * handled by the platform rather than by a handler.
  */
@@ -35,23 +30,17 @@ const handlesSubmit = (node) =>
 const submitsNatively = (node) =>
   hasBinding(node, 'action') || hasBinding(node, 'ngNoForm') || attribute(node, 'method')?.value === 'dialog';
 
-/** @param {any} node */
-const isSubmitControl = (node) =>
-  (node.name === 'button' || node.name === 'input') && attribute(node, 'type')?.value === 'submit';
-
 /** @type {import('eslint').Rule.RuleModule} */
 const requireFormSubmit = {
   meta: {
     type: 'problem',
     docs: {
-      description: 'Require a `<form>` to handle its own submission, and a submit control to reach a form.',
+      description: 'Require a `<form>` to handle its own submission.',
     },
     schema: [],
     messages: {
       missingSubmitHandler:
         'This `<form>` handles no submission - pressing Enter in a field either does nothing or reloads the page. Bind `[etForm]` (signal forms), `(ngSubmit)` (reactive forms) or `(submit)`, or use a plain element if this is not a form.',
-      submitOutsideForm:
-        'A `type="submit"` control outside a `<form>` submits nothing. Put it inside the form, or associate it with one by id: `form="the-form-id"`.',
     },
   },
   create(context) {
@@ -59,8 +48,6 @@ const requireFormSubmit = {
 
     if (!parserServices?.convertNodeSourceSpanToLoc) return {};
 
-    let formDepth = 0;
-
     /** @param {any} node */
     const report = (node, messageId) =>
       context.report({
@@ -72,21 +59,8 @@ const requireFormSubmit = {
       /** @param {any} node */
       Element(node) {
         if (node.name === 'form') {
-          formDepth++;
-
           if (!handlesSubmit(node) && !submitsNatively(node)) report(node, 'missingSubmitHandler');
-
-          return;
         }
-
-        if (formDepth > 0 || !isSubmitControl(node) || hasBinding(node, 'form')) return;
-
-        report(node, 'submitOutsideForm');
-      },
-
-      /** @param {any} node */
-      'Element:exit'(node) {
-        if (node.name === 'form') formDepth--;
       },
     };
   },

package/src/rules/require-on-push-change-detection.js

@@ -1,6 +1,14 @@
 // @ts-check
 'use strict';
 
+const {
+  ANGULAR_CORE,
+  getAngularDecoratorName,
+  getImportLocalName,
+  isImportedAs,
+  resolveIdentifier,
+} = require('./internals/import-resolution');
+
 const COMPONENT_ORDER = ['selector', 'template', 'styleUrl', 'encapsulation', 'changeDetection'];
 
 // OnPush became the default change detection strategy in Angular 22, so from
@@ -87,11 +95,25 @@ const hasTrailingComma = (sourceCode, property) => {
 /**
  * @param {import('eslint').SourceCode} sourceCode
  */
-const findAngularCoreImport = (sourceCode) =>
-  sourceCode.ast.body.find(
+const findAngularCoreImport = (sourceCode) => {
+  const imports = sourceCode.ast.body.filter(
     (node) =>
       node.type === 'ImportDeclaration' && node.source.type === 'Literal' && node.source.value === '@angular/core',
-  ) ?? null;
+  );
+
+  return (
+    imports.find((node) =>
+      node.specifiers.some(
+        (specifier) =>
+          specifier.type === 'ImportSpecifier' &&
+          specifier.imported.type === 'Identifier' &&
+          specifier.imported.name === 'ChangeDetectionStrategy',
+      ),
+    ) ??
+    imports.find((node) => node.importKind !== 'type') ??
+    null
+  );
+};
 
 /**
  * @param {import('eslint').SourceCode} sourceCode
@@ -133,11 +155,18 @@ const buildMissingAngularCoreImportFix = (sourceCode) => {
   const importDeclarations = sourceCode.ast.body.filter((node) => node.type === 'ImportDeclaration');
   const lastImport = importDeclarations[importDeclarations.length - 1] ?? null;
 
-  return lastImport
-    ? (fixer) => fixer.insertTextAfter(lastImport, `\nimport { ChangeDetectionStrategy } from '@angular/core';`)
+  if (lastImport) {
+    return (fixer) => fixer.insertTextAfter(lastImport, `\nimport { ChangeDetectionStrategy } from '@angular/core';`);
+  }
+
+  const firstNode = sourceCode.ast.body[0];
+  const lastComment = firstNode ? sourceCode.getCommentsBefore(firstNode).at(-1) : null;
+
+  return lastComment
+    ? (fixer) => fixer.insertTextAfter(lastComment, `\nimport { ChangeDetectionStrategy } from '@angular/core';\n`)
     : (fixer) =>
         fixer.replaceTextRange(
-          [0, sourceCode.ast.range[0]],
+          [0, firstNode?.range[0] ?? 0],
           `import { ChangeDetectionStrategy } from '@angular/core';\n\n`,
         );
 };
@@ -146,6 +175,8 @@ const buildMissingAngularCoreImportFix = (sourceCode) => {
  * @param {any} metadata
  */
 const getChangeDetectionInsertionTarget = (metadata) => {
+  if (metadata.properties.some((property) => property.type === 'SpreadElement')) return null;
+
   const changeDetectionIndex = COMPONENT_ORDER.indexOf('changeDetection');
 
   return (
@@ -164,8 +195,8 @@ const getChangeDetectionInsertionTarget = (metadata) => {
  * @param {any} metadata
  */
 const buildMetadataFix = (sourceCode, metadata) => {
-  const changeDetectionText = 'changeDetection: ChangeDetectionStrategy.OnPush';
-  const properties = metadata.properties.filter((property) => property.type === 'Property');
+  const changeDetectionText = `changeDetection: ${getImportLocalName(sourceCode, ANGULAR_CORE, 'ChangeDetectionStrategy') ?? 'ChangeDetectionStrategy'}.OnPush`;
+  const properties = metadata.properties;
   const insertionTarget = getChangeDetectionInsertionTarget(metadata);
   const isMultiline = Boolean(metadata.loc && metadata.loc.start.line !== metadata.loc.end.line);
 
@@ -213,6 +244,10 @@ const buildMetadataFix = (sourceCode, metadata) => {
  * @param {any} valueNode
  */
 const buildFix = (sourceCode, metadata, valueNode) => {
+  const valueFix = valueNode && ((fixer) => fixer.replaceText(valueNode.property, 'OnPush'));
+  if (valueNode && valueNode.object.type !== 'Identifier') return valueFix;
+  if (valueNode && resolveIdentifier(sourceCode, valueNode.object)?.source) return valueFix;
+
   const fixes = [];
   const angularCoreImport = findAngularCoreImport(sourceCode);
   const importFix = angularCoreImport
@@ -221,12 +256,8 @@ const buildFix = (sourceCode, metadata, valueNode) => {
 
   if (importFix) fixes.push(importFix);
 
-  if (valueNode) {
-    fixes.push((fixer) => fixer.replaceText(valueNode, 'ChangeDetectionStrategy.OnPush'));
-  } else {
-    const metadataFix = buildMetadataFix(sourceCode, metadata);
-    if (metadataFix) fixes.push(metadataFix);
-  }
+  const metadataFix = valueFix ?? buildMetadataFix(sourceCode, metadata);
+  if (metadataFix) fixes.push(metadataFix);
 
   return (fixer) => fixes.map((applyFix) => applyFix(fixer));
 };
@@ -255,24 +286,9 @@ const requireOnPushChangeDetection = {
 
     const sourceCode = context.sourceCode;
 
-    /**
-     * @param {import('eslint').Rule.Node} node
-     */
-    const isComponentDecorator = (node) => {
-      const decorator = /** @type {any} */ (node);
-      if (decorator.type !== 'Decorator') return false;
-
-      const expression = decorator.expression;
-      if (expression.type === 'CallExpression') {
-        return expression.callee.type === 'Identifier' && expression.callee.name === 'Component';
-      }
-
-      return expression.type === 'Identifier' && expression.name === 'Component';
-    };
-
     return {
       Decorator(node) {
-        if (!isComponentDecorator(node)) return;
+        if (getAngularDecoratorName(sourceCode, node) !== 'Component') return;
 
         const decorator = /** @type {any} */ (node);
         const expression = decorator.expression;
@@ -282,10 +298,7 @@ const requireOnPushChangeDetection = {
         if (!metadata || metadata.type !== 'ObjectExpression') return;
 
         const changeDetectionProp = metadata.properties.find(
-          (property) =>
-            property.type === 'Property' &&
-            property.key.type === 'Identifier' &&
-            property.key.name === 'changeDetection',
+          (property) => property.type === 'Property' && getPropertyName(property.key) === 'changeDetection',
         );
 
         if (!changeDetectionProp) {
@@ -300,8 +313,7 @@ const requireOnPushChangeDetection = {
         const value = changeDetectionProp.value;
         if (
           value.type === 'MemberExpression' &&
-          value.object.type === 'Identifier' &&
-          value.object.name === 'ChangeDetectionStrategy' &&
+          isImportedAs(sourceCode, value.object, 'ChangeDetectionStrategy') &&
           value.property.type === 'Identifier' &&
           value.property.name !== 'OnPush'
         ) {

package/src/rules/require-view-encapsulation-none.js

@@ -1,6 +1,14 @@
 // @ts-check
 'use strict';
 
+const {
+  ANGULAR_CORE,
+  getAngularDecoratorName,
+  getImportLocalName,
+  isImportedAs,
+  resolveIdentifier,
+} = require('./internals/import-resolution');
+
 const COMPONENT_ORDER = ['selector', 'template', 'styleUrl', 'encapsulation', 'changeDetection'];
 
 /**
@@ -44,11 +52,25 @@ const hasTrailingComma = (sourceCode, property) => {
 /**
  * @param {import('eslint').SourceCode} sourceCode
  */
-const findAngularCoreImport = (sourceCode) =>
-  sourceCode.ast.body.find(
+const findAngularCoreImport = (sourceCode) => {
+  const imports = sourceCode.ast.body.filter(
     (node) =>
       node.type === 'ImportDeclaration' && node.source.type === 'Literal' && node.source.value === '@angular/core',
-  ) ?? null;
+  );
+
+  return (
+    imports.find((node) =>
+      node.specifiers.some(
+        (specifier) =>
+          specifier.type === 'ImportSpecifier' &&
+          specifier.imported.type === 'Identifier' &&
+          specifier.imported.name === 'ViewEncapsulation',
+      ),
+    ) ??
+    imports.find((node) => node.importKind !== 'type') ??
+    null
+  );
+};
 
 /**
  * @param {import('eslint').SourceCode} sourceCode
@@ -90,16 +112,25 @@ const buildMissingAngularCoreImportFix = (sourceCode) => {
   const importDeclarations = sourceCode.ast.body.filter((node) => node.type === 'ImportDeclaration');
   const lastImport = importDeclarations[importDeclarations.length - 1] ?? null;
 
-  return lastImport
-    ? (fixer) => fixer.insertTextAfter(lastImport, `\nimport { ViewEncapsulation } from '@angular/core';`)
+  if (lastImport) {
+    return (fixer) => fixer.insertTextAfter(lastImport, `\nimport { ViewEncapsulation } from '@angular/core';`);
+  }
+
+  const firstNode = sourceCode.ast.body[0];
+  const lastComment = firstNode ? sourceCode.getCommentsBefore(firstNode).at(-1) : null;
+
+  return lastComment
+    ? (fixer) => fixer.insertTextAfter(lastComment, `\nimport { ViewEncapsulation } from '@angular/core';\n`)
     : (fixer) =>
-        fixer.replaceTextRange([0, sourceCode.ast.range[0]], `import { ViewEncapsulation } from '@angular/core';\n\n`);
+        fixer.replaceTextRange([0, firstNode?.range[0] ?? 0], `import { ViewEncapsulation } from '@angular/core';\n\n`);
 };
 
 /**
  * @param {any} metadata
  */
 const getEncapsulationInsertionTarget = (metadata) => {
+  if (metadata.properties.some((property) => property.type === 'SpreadElement')) return null;
+
   const encapsulationIndex = COMPONENT_ORDER.indexOf('encapsulation');
 
   return (
@@ -118,8 +149,8 @@ const getEncapsulationInsertionTarget = (metadata) => {
  * @param {any} metadata
  */
 const buildMetadataFix = (sourceCode, metadata) => {
-  const encText = 'encapsulation: ViewEncapsulation.None';
-  const properties = metadata.properties.filter((property) => property.type === 'Property');
+  const encText = `encapsulation: ${getImportLocalName(sourceCode, ANGULAR_CORE, 'ViewEncapsulation') ?? 'ViewEncapsulation'}.None`;
+  const properties = metadata.properties;
   const insertionTarget = getEncapsulationInsertionTarget(metadata);
   const isMultiline = Boolean(metadata.loc && metadata.loc.start.line !== metadata.loc.end.line);
 
@@ -166,6 +197,10 @@ const buildMetadataFix = (sourceCode, metadata) => {
  * @param {any} valueNode
  */
 const buildFix = (sourceCode, metadata, valueNode) => {
+  const valueFix = valueNode && ((fixer) => fixer.replaceText(valueNode.property, 'None'));
+  if (valueNode && valueNode.object.type !== 'Identifier') return valueFix;
+  if (valueNode && resolveIdentifier(sourceCode, valueNode.object)?.source) return valueFix;
+
   const fixes = [];
   const angularCoreImport = findAngularCoreImport(sourceCode);
   const importFix = angularCoreImport
@@ -174,12 +209,8 @@ const buildFix = (sourceCode, metadata, valueNode) => {
 
   if (importFix) fixes.push(importFix);
 
-  if (valueNode) {
-    fixes.push((fixer) => fixer.replaceText(valueNode, 'ViewEncapsulation.None'));
-  } else {
-    const metadataFix = buildMetadataFix(sourceCode, metadata);
-    if (metadataFix) fixes.push(metadataFix);
-  }
+  const metadataFix = valueFix ?? buildMetadataFix(sourceCode, metadata);
+  if (metadataFix) fixes.push(metadataFix);
 
   return (fixer) => fixes.map((applyFix) => applyFix(fixer));
 };
@@ -201,24 +232,9 @@ const requireViewEncapsulationNone = {
   create(context) {
     const sourceCode = context.sourceCode;
 
-    /**
-     * @param {import('eslint').Rule.Node} node
-     */
-    const isComponentDecorator = (node) => {
-      const decorator = /** @type {any} */ (node);
-      if (decorator.type !== 'Decorator') return false;
-
-      const expression = decorator.expression;
-      if (expression.type === 'CallExpression') {
-        return expression.callee.type === 'Identifier' && expression.callee.name === 'Component';
-      }
-
-      return expression.type === 'Identifier' && expression.name === 'Component';
-    };
-
     return {
       Decorator(node) {
-        if (!isComponentDecorator(node)) return;
+        if (getAngularDecoratorName(sourceCode, node) !== 'Component') return;
 
         const decorator = /** @type {any} */ (node);
         const expression = decorator.expression;
@@ -228,8 +244,7 @@ const requireViewEncapsulationNone = {
         if (!metadata || metadata.type !== 'ObjectExpression') return;
 
         const encProp = metadata.properties.find(
-          (property) =>
-            property.type === 'Property' && property.key.type === 'Identifier' && property.key.name === 'encapsulation',
+          (property) => property.type === 'Property' && getPropertyName(property.key) === 'encapsulation',
         );
 
         if (!encProp) {
@@ -244,8 +259,7 @@ const requireViewEncapsulationNone = {
         const value = encProp.value;
         if (
           value.type === 'MemberExpression' &&
-          value.object.type === 'Identifier' &&
-          value.object.name === 'ViewEncapsulation' &&
+          isImportedAs(sourceCode, value.object, 'ViewEncapsulation') &&
           value.property.type === 'Identifier' &&
           value.property.name !== 'None'
         ) {

package/src/rules/take-until-destroyed-last.js

@@ -0,0 +1,64 @@
+// @ts-check
+'use strict';
+
+const { isImportedAs } = require('./internals/import-resolution');
+
+/**
+ * Requires takeUntilDestroyed() to be the last operator in a .pipe().
+ *
+ * BAD:
+ *   obs$.pipe(
+ *     takeUntilDestroyed(),
+ *     switchMap(() => fromEvent(el, 'scroll')), // ❌ the inner subscription outlives the component
+ *   ).subscribe();
+ *
+ * GOOD:
+ *   obs$.pipe(
+ *     switchMap(() => fromEvent(el, 'scroll')),
+ *     takeUntilDestroyed(), // ✅ tears down everything above it
+ *   ).subscribe();
+ */
+
+/** @type {import('eslint').Rule.RuleModule} */
+const takeUntilDestroyedLast = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Require takeUntilDestroyed() to be the last operator in a .pipe().',
+      recommended: true,
+    },
+    messages: {
+      takeUntilDestroyedLast:
+        'takeUntilDestroyed() must be the last operator in the pipe. An operator after it (switchMap, shareReplay, …) can keep the subscription alive after destroy.',
+    },
+    schema: [],
+  },
+  create(context) {
+    /** @param {import('estree').Node} node */
+    const isTakeUntilDestroyedCall = (node) =>
+      node.type === 'CallExpression' &&
+      isImportedAs(context.sourceCode, node.callee, 'takeUntilDestroyed', '@angular/core/rxjs-interop');
+
+    return {
+      CallExpression(node) {
+        const { callee } = node;
+        if (
+          callee.type !== 'MemberExpression' ||
+          callee.property.type !== 'Identifier' ||
+          callee.property.name !== 'pipe'
+        ) {
+          return;
+        }
+
+        const lastIndex = node.arguments.length - 1;
+        node.arguments.forEach((arg, index) => {
+          if (index < lastIndex && isTakeUntilDestroyedCall(arg)) {
+            context.report({ node: arg, messageId: 'takeUntilDestroyedLast' });
+          }
+        });
+      },
+    };
+  },
+};
+
+module.exports = takeUntilDestroyedLast;