@ethlete/eslint-plugin 1.0.0-next.21 → 1.0.0-next.23

package/src/rules/prefer-match-media.js

@@ -6,7 +6,7 @@
  * calling window.matchMedia() directly or using Angular CDK's BreakpointObserver.
  *
  * The utilities:
- * - Return reactive signals that update when the media query result changes
+ * - Offer both one-shot boolean reads and reactive signals
  * - Are SSR-safe (no window access during server rendering)
  * - Are automatically cleaned up when the component is destroyed
  *
@@ -47,7 +47,7 @@ const preferMatchMedia = {
     },
     messages: {
       preferMatchMedia:
-        "Avoid 'window.matchMedia()' directly. Use 'injectMediaQueryIsMatched(query)' or a pre-built helper (injectCanHover, injectHasTouchInput, injectIsPortrait, injectBreakpointIsMatched, …) from '@ethlete/core' — they return reactive signals and are SSR-safe.",
+        "Avoid 'window.matchMedia()' directly. Use 'injectMediaQueryIsMatched(query)' for a one-shot SSR-safe boolean, or 'injectObserveMediaQuery(query)' when the result must update reactively.",
       noBreakpointObserver:
         "Do not use Angular CDK's 'BreakpointObserver' directly. Use 'injectBreakpointObserver()' from '@ethlete/core' instead, which wraps it with a reactive signal API and proper DI scoping.",
     },

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-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

@@ -87,11 +87,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 +147,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 +167,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 (
@@ -165,7 +188,7 @@ const getChangeDetectionInsertionTarget = (metadata) => {
  */
 const buildMetadataFix = (sourceCode, metadata) => {
   const changeDetectionText = 'changeDetection: ChangeDetectionStrategy.OnPush';
-  const properties = metadata.properties.filter((property) => property.type === 'Property');
+  const properties = metadata.properties;
   const insertionTarget = getChangeDetectionInsertionTarget(metadata);
   const isMultiline = Boolean(metadata.loc && metadata.loc.start.line !== metadata.loc.end.line);
 
@@ -282,10 +305,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) {

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

@@ -44,11 +44,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 +104,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 (
@@ -119,7 +142,7 @@ const getEncapsulationInsertionTarget = (metadata) => {
  */
 const buildMetadataFix = (sourceCode, metadata) => {
   const encText = 'encapsulation: ViewEncapsulation.None';
-  const properties = metadata.properties.filter((property) => property.type === 'Property');
+  const properties = metadata.properties;
   const insertionTarget = getEncapsulationInsertionTarget(metadata);
   const isMultiline = Boolean(metadata.loc && metadata.loc.start.line !== metadata.loc.end.line);
 
@@ -228,8 +251,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) {

package/src/rules/template-member-accessibility.js

@@ -7,6 +7,7 @@ const {
   isReferencedFromTemplateOrHost,
 } = require('./internals/angular-member-visibility');
 const { getImplementedContractMemberNames } = require('./internals/implemented-contract-members');
+const { buildAccessibilityFix } = require('./internals/member-accessibility-fix');
 
 /**
  * @param {any} node
@@ -17,24 +18,6 @@ const isInjectCall = (node) => {
   return node.value.callee.type === 'Identifier' && node.value.callee.name === 'inject';
 };
 
-/**
- * @param {any} node
- * @param {import('eslint').SourceCode} sourceCode
- */
-const buildPublicFix = (node, sourceCode) => {
-  const keyToken = sourceCode.getFirstToken(node.key);
-  if (!keyToken) return null;
-
-  if (node.accessibility) {
-    const firstToken = sourceCode.getFirstToken(node);
-    if (!firstToken) return null;
-
-    return (fixer) => fixer.replaceText(firstToken, 'public');
-  }
-
-  return (fixer) => fixer.insertTextBefore(keyToken, 'public ');
-};
-
 /**
  * @param {any} node
  * @param {import('eslint').SourceCode} sourceCode
@@ -127,7 +110,7 @@ const templateMemberAccessibility = {
           node,
           messageId: 'shouldBePublic',
           data: { name: memberName },
-          fix: buildPublicFix(node, sourceCode),
+          fix: buildAccessibilityFix(node, sourceCode, 'public'),
         });
 
         return;
@@ -142,7 +125,7 @@ const templateMemberAccessibility = {
           node,
           messageId: 'shouldBeExplicit',
           data: { name: memberName },
-          fix: buildPublicFix(node, sourceCode),
+          fix: buildAccessibilityFix(node, sourceCode, 'public'),
         });
 
         return;
@@ -184,7 +167,7 @@ const templateMemberAccessibility = {
         node,
         messageId: 'shouldBeExplicitPublic',
         data: { name: memberName },
-        fix: buildPublicFix(node, sourceCode),
+        fix: buildAccessibilityFix(node, sourceCode, 'public'),
       });
     };