@ethlete/eslint-plugin 0.1.0-next.0 → 0.1.0-next.10

package/src/rules/no-redundant-on-push-change-detection.js

@@ -0,0 +1,237 @@
+// @ts-check
+'use strict';
+
+/**
+ * Disallow explicit `changeDetection: ChangeDetectionStrategy.OnPush` on
+ * `@Component` decorators. Since Angular 22, OnPush is the default change
+ * detection strategy, so declaring it is redundant noise.
+ *
+ * The rule is version-aware: it only activates when the workspace's installed
+ * Angular is v22 or newer (or when the version cannot be determined). On older
+ * Angular versions — where OnPush is NOT the default — it stays silent so that
+ * removing it would not change behaviour.
+ *
+ * BAD (Angular >= 22):
+ *   @Component({ selector: 'et-x', template: '', changeDetection: ChangeDetectionStrategy.OnPush })
+ *
+ * GOOD (Angular >= 22):
+ *   @Component({ selector: 'et-x', template: '' })
+ */
+
+const REQUIRED_MAJOR = 22;
+
+/** @type {number | null | undefined} */
+let cachedAngularMajor;
+
+/**
+ * Detect the workspace's installed Angular major version. Cached across files.
+ *
+ * @returns {number | null} major version, or null when it cannot be determined
+ */
+const detectAngularMajor = () => {
+  if (cachedAngularMajor !== undefined) return cachedAngularMajor;
+
+  try {
+    const pkg = require('@angular/core/package.json');
+    const major = Number.parseInt(String(pkg.version).split('.')[0], 10);
+    cachedAngularMajor = Number.isNaN(major) ? null : major;
+  } catch {
+    cachedAngularMajor = null;
+  }
+
+  return cachedAngularMajor;
+};
+
+/**
+ * Resolve the Angular major version to gate on. An explicit
+ * `settings.ethlete.angularMajor` wins over auto-detection — handy for
+ * pinning behaviour and for tests.
+ *
+ * @param {import('eslint').Rule.RuleContext} context
+ * @returns {number | null}
+ */
+const getAngularMajor = (context) => {
+  const settings = /** @type {any} */ (context.settings);
+  const override = settings?.ethlete?.angularMajor;
+  if (typeof override === 'number') return override;
+
+  return detectAngularMajor();
+};
+
+/**
+ * @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 {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';
+};
+
+/**
+ * @param {any} value
+ */
+const isOnPushValue = (value) =>
+  value.type === 'MemberExpression' &&
+  value.object.type === 'Identifier' &&
+  value.object.name === 'ChangeDetectionStrategy' &&
+  value.property.type === 'Identifier' &&
+  value.property.name === 'OnPush';
+
+/**
+ * Range that removes a property together with the comma that joins it to its
+ * siblings (leading comma when it is the last property, otherwise trailing).
+ *
+ * @param {import('eslint').SourceCode} sourceCode
+ * @param {any} metadata
+ * @param {any} property
+ */
+const getPropertyRemovalRange = (sourceCode, metadata, property) => {
+  const properties = metadata.properties.filter((entry) => entry.type === 'Property');
+  const index = properties.indexOf(property);
+  const openingBrace = sourceCode.getFirstToken(metadata);
+  const closingBrace = sourceCode.getLastToken(metadata);
+
+  if (!openingBrace || !closingBrace) return property.range;
+  if (properties.length === 1) return [openingBrace.range[1], closingBrace.range[0]];
+  if (index < properties.length - 1) return [property.range[0], properties[index + 1].range[0]];
+
+  return [properties[index - 1].range[1], property.range[1]];
+};
+
+/**
+ * Range that removes a single named import specifier together with its comma.
+ *
+ * @param {import('eslint').SourceCode} sourceCode
+ * @param {any} importNode
+ * @param {any} specifier
+ */
+const getSpecifierRemovalRange = (sourceCode, importNode, specifier) => {
+  const named = importNode.specifiers.filter((entry) => entry.type === 'ImportSpecifier');
+  const index = named.indexOf(specifier);
+
+  // Sole specifier of the whole import — drop the entire declaration.
+  if (importNode.specifiers.length === 1) return importNode.range;
+  if (index < named.length - 1) return [specifier.range[0], named[index + 1].range[0]];
+
+  return [named[index - 1].range[1], specifier.range[1]];
+};
+
+/**
+ * True when every reference of the `ChangeDetectionStrategy` binding is a
+ * `changeDetection: ChangeDetectionStrategy.OnPush` property value — i.e.
+ * removing those properties leaves the import unused and safe to drop.
+ *
+ * @param {import('eslint').Scope.Reference} reference
+ */
+const isOnPushChangeDetectionReference = (reference) => {
+  const identifier = /** @type {any} */ (reference.identifier);
+  const member = identifier.parent;
+  if (!member || member.type !== 'MemberExpression' || member.object !== identifier) return false;
+  if (member.property.type !== 'Identifier' || member.property.name !== 'OnPush') return false;
+
+  const property = member.parent;
+  if (!property || property.type !== 'Property' || property.value !== member) return false;
+
+  return getPropertyName(property.key) === 'changeDetection';
+};
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noRedundantOnPushChangeDetection = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Disallow redundant `changeDetection: ChangeDetectionStrategy.OnPush`. OnPush is the default since Angular 22.',
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      redundant:
+        '`changeDetection: ChangeDetectionStrategy.OnPush` is redundant. OnPush is the default change detection strategy since Angular 22.',
+      redundantImport:
+        'Remove the now-unused `ChangeDetectionStrategy` import. OnPush is the default change detection strategy since Angular 22.',
+    },
+  },
+  create(context) {
+    // Only enforce on Angular >= 22, where OnPush is the default. Stay silent on
+    // older versions (removing it there would change behaviour) — but enforce
+    // when the version is unknown, since this workspace targets modern Angular.
+    const angularMajor = getAngularMajor(context);
+    if (angularMajor !== null && angularMajor < REQUIRED_MAJOR) return {};
+
+    const sourceCode = context.sourceCode;
+    /** @type {any} */
+    let changeDetectionSpecifier = null;
+
+    return {
+      Decorator(node) {
+        if (!isComponentDecorator(node)) return;
+
+        const expression = /** @type {any} */ (node).expression;
+        if (expression.type !== 'CallExpression' || expression.arguments.length === 0) return;
+
+        const metadata = expression.arguments[0];
+        if (!metadata || metadata.type !== 'ObjectExpression') return;
+
+        const property = metadata.properties.find(
+          (entry) => entry.type === 'Property' && getPropertyName(entry.key) === 'changeDetection',
+        );
+        if (!property || !isOnPushValue(property.value)) return;
+
+        context.report({
+          node: property,
+          messageId: 'redundant',
+          fix: (fixer) => fixer.replaceTextRange(getPropertyRemovalRange(sourceCode, metadata, property), ''),
+        });
+      },
+
+      ImportDeclaration(node) {
+        if (node.source.value !== '@angular/core') return;
+
+        for (const specifier of node.specifiers) {
+          if (
+            specifier.type === 'ImportSpecifier' &&
+            specifier.imported.type === 'Identifier' &&
+            specifier.imported.name === 'ChangeDetectionStrategy'
+          ) {
+            changeDetectionSpecifier = specifier;
+            return;
+          }
+        }
+      },
+
+      'Program:exit'() {
+        if (!changeDetectionSpecifier) return;
+
+        const [variable] = sourceCode.getDeclaredVariables(changeDetectionSpecifier);
+        if (!variable || variable.references.length === 0) return;
+        if (!variable.references.every(isOnPushChangeDetectionReference)) return;
+
+        const importNode = changeDetectionSpecifier.parent;
+        context.report({
+          node: changeDetectionSpecifier,
+          messageId: 'redundantImport',
+          fix: (fixer) =>
+            fixer.replaceTextRange(getSpecifierRemovalRange(sourceCode, importNode, changeDetectionSpecifier), ''),
+        });
+      },
+    };
+  },
+};
+
+module.exports = noRedundantOnPushChangeDetection;

package/src/rules/no-rxjs-in-effect.js

@@ -0,0 +1,88 @@
+// @ts-check
+'use strict';
+
+/**
+ * Disallows calling .subscribe() inside Angular's effect() or computed() callbacks.
+ *
+ * This creates unmanaged subscriptions and causes memory leaks because neither
+ * effect() nor computed() provides a lifecycle-tied cleanup mechanism for subscriptions.
+ *
+ * BAD:
+ *   effect(() => {
+ *     const page = this.page();
+ *     this.api.fetch(page).subscribe(res => this.data.set(res)); // ❌
+ *   });
+ *
+ * GOOD:
+ *   toObservable(this.page)
+ *     .pipe(
+ *       switchMap(page => this.api.fetch(page)),
+ *       takeUntilDestroyed(),
+ *     )
+ *     .subscribe();
+ */
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noRxjsInEffect = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow .subscribe() inside effect() or computed() callbacks.',
+      recommended: true,
+    },
+    messages: {
+      noSubscribeInEffect:
+        'Avoid calling .subscribe() inside {{context}}(). Use toObservable() + switchMap() + takeUntilDestroyed() instead.',
+    },
+    schema: [],
+  },
+  create(context) {
+    /**
+     * Returns the name of the wrapping reactive context ('effect' | 'computed') if
+     * the given node is inside one, or null otherwise.
+     * @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;
+    };
+
+    return {
+      CallExpression(node) {
+        const { callee } = node;
+        if (
+          callee.type === 'MemberExpression' &&
+          callee.property.type === 'Identifier' &&
+          callee.property.name === 'subscribe'
+        ) {
+          const reactiveContext = getReactiveContext(node);
+          if (reactiveContext) {
+            context.report({
+              node,
+              messageId: 'noSubscribeInEffect',
+              data: { context: reactiveContext },
+            });
+          }
+        }
+      },
+    };
+  },
+};
+
+module.exports = noRxjsInEffect;

package/src/rules/no-screaming-case-local.js

@@ -0,0 +1,113 @@
+// @ts-check
+'use strict';
+
+/**
+ * Disallows SCREAMING_CASE variable names inside function bodies.
+ *
+ * At module level, SCREAMING_CASE is fine for true constants. Inside functions,
+ * all local variables must be camelCase — there is no meaningful distinction
+ * between a "constant" and a regular local variable inside a function body.
+ *
+ * Also disallows SCREAMING_CASE names for function-valued variables at any scope,
+ * since a function is never a static constant.
+ *
+ * BAD:
+ *   const myFn = () => {
+ *     const RANDOM = Math.random();     // ❌
+ *     const MY_LOCAL_FLAG = true;       // ❌
+ *   };
+ *
+ *   const MY_FUNCTION = () => {};       // ❌ function name must be camelCase
+ *
+ * GOOD:
+ *   const MY_GLOBAL = 'value';          // ✅ module level
+ *
+ *   const myFn = () => {
+ *     const random = Math.random();     // ✅
+ *     const myLocalFlag = true;         // ✅
+ *   };
+ */
+
+/** Matches ALL-CAPS identifiers: at least one char, all uppercase letters, digits, underscores */
+const SCREAMING_CASE_RE = /^[A-Z][A-Z0-9_]*$/;
+
+/**
+ * Returns true if the given node is inside a function body (arrow or regular).
+ * @param {import('eslint').Rule.Node} node
+ */
+const isInsideFunction = (node) => {
+  let current = node.parent;
+  while (current) {
+    if (
+      current.type === 'ArrowFunctionExpression' ||
+      current.type === 'FunctionExpression' ||
+      current.type === 'FunctionDeclaration'
+    ) {
+      return true;
+    }
+    current = current.parent;
+  }
+  return false;
+};
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noScreamingCaseLocal = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Disallow SCREAMING_CASE variable names inside function bodies. Use camelCase for all local variables.',
+      recommended: true,
+    },
+    messages: {
+      noScreamingCaseLocal: "'{{name}}' uses SCREAMING_CASE inside a function. Use camelCase for local variables.",
+      noScreamingCaseFunctionName:
+        "'{{name}}' uses SCREAMING_CASE for a function name. Use camelCase for function names.",
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      VariableDeclarator(node) {
+        // Only flag simple identifier bindings (not destructuring)
+        if (node.id.type !== 'Identifier') return;
+
+        const { name } = node.id;
+
+        // Must match the SCREAMING_CASE pattern
+        if (!SCREAMING_CASE_RE.test(name)) return;
+
+        // Only flag inside function bodies
+        if (!isInsideFunction(node)) return;
+
+        context.report({
+          node: node.id,
+          messageId: 'noScreamingCaseLocal',
+          data: { name },
+        });
+      },
+
+      // Catch SCREAMING_CASE names for function-valued variables at any scope:
+      // const MY_FUNCTION = () => {}  ❌
+      // const MY_FUNCTION = function() {}  ❌
+      /** @param {import('estree').VariableDeclarator & import('eslint').Rule.NodeParentExtension} node */
+      'VariableDeclarator[init.type="ArrowFunctionExpression"], VariableDeclarator[init.type="FunctionExpression"]'(
+        node,
+      ) {
+        if (node.id.type !== 'Identifier') return;
+
+        const { name } = /** @type {import('estree').Identifier} */ (node.id);
+
+        if (!SCREAMING_CASE_RE.test(name)) return;
+
+        context.report({
+          node: /** @type {import('eslint').Rule.Node} */ (node.id),
+          messageId: 'noScreamingCaseFunctionName',
+          data: { name },
+        });
+      },
+    };
+  },
+};
+
+module.exports = noScreamingCaseLocal;

package/src/rules/no-standalone-flag.js

@@ -0,0 +1,95 @@
+// @ts-check
+'use strict';
+
+/** @typedef {'Component' | 'Directive' | 'Pipe'} TDecoratorName */
+
+/**
+ * @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 {import('eslint').Rule.Node} node
+ * @returns {TDecoratorName | null}
+ */
+const getDecoratorName = (node) => {
+  const decorator = /** @type {any} */ (node);
+  if (decorator.type !== 'Decorator') return null;
+
+  const expression = decorator.expression;
+  if (expression.type === 'CallExpression') {
+    return expression.callee.type === 'Identifier' ? expression.callee.name : null;
+  }
+
+  return expression.type === 'Identifier' ? expression.name : null;
+};
+
+/**
+ * @param {import('eslint').SourceCode} sourceCode
+ * @param {any} metadata
+ * @param {any} property
+ */
+const getRemovalRange = (sourceCode, metadata, property) => {
+  const properties = metadata.properties.filter((entry) => entry.type === 'Property');
+  const propertyIndex = properties.indexOf(property);
+  const openingBrace = sourceCode.getFirstToken(metadata);
+  const closingBrace = sourceCode.getLastToken(metadata);
+
+  if (!openingBrace || !closingBrace) return property.range;
+  if (properties.length === 1) return [openingBrace.range[1], closingBrace.range[0]];
+  if (propertyIndex < properties.length - 1) return [property.range[0], properties[propertyIndex + 1].range[0]];
+
+  return [properties[propertyIndex - 1].range[1], property.range[1]];
+};
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noStandaloneFlag = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Disallow standalone metadata on Angular decorators because standalone is the default and should be omitted.',
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      noStandalone: 'Remove standalone from Angular metadata. Standalone is implicit and should not be declared.',
+    },
+  },
+  create(context) {
+    const sourceCode = context.sourceCode;
+
+    return {
+      Decorator(node) {
+        const decoratorName = getDecoratorName(node);
+        if (decoratorName !== 'Component' && decoratorName !== 'Directive' && decoratorName !== 'Pipe') return;
+
+        const decorator = /** @type {any} */ (node);
+        const expression = decorator.expression;
+        if (expression.type !== 'CallExpression' || expression.arguments.length === 0) 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) !== 'standalone') continue;
+
+          context.report({
+            node: property,
+            messageId: 'noStandalone',
+            fix(fixer) {
+              return fixer.replaceTextRange(getRemovalRange(sourceCode, metadata, property), '');
+            },
+          });
+        }
+      },
+    };
+  },
+};
+
+module.exports = noStandaloneFlag;

package/src/rules/no-subscribe-in-pipe.js

@@ -0,0 +1,89 @@
+// @ts-check
+'use strict';
+
+/**
+ * Disallows calling .subscribe() inside a .pipe() callback.
+ *
+ * BAD:
+ *   obs$.pipe(
+ *     tap(() => {
+ *       other$.subscribe(); // ❌ creates an unmanaged subscription
+ *     }),
+ *   ).subscribe();
+ *
+ * GOOD:
+ *   obs$.pipe(
+ *     switchMap(() => other$), // ✅ compose instead
+ *   ).subscribe();
+ *
+ *   obs$.pipe(...operators).subscribe(); // ✅ subscribe on the result of pipe
+ */
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noSubscribeInPipe = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow .subscribe() calls inside .pipe() callbacks.',
+      recommended: true,
+    },
+    messages: {
+      noSubscribeInPipe:
+        'Avoid calling .subscribe() inside a .pipe() callback. Compose with operators (switchMap, mergeMap, etc.) instead.',
+    },
+    schema: [],
+  },
+  create(context) {
+    /**
+     * Returns true if the given node is nested inside a callback function that
+     * is itself (directly or indirectly) an argument to a .pipe() call.
+     * @param {import('eslint').Rule.Node} node
+     */
+    const isInsidePipeCallback = (node) => {
+      let crossedFunctionBoundary = false;
+      let current = node.parent;
+      while (current) {
+        // A `new Observable(factory)` is its own subscription boundary — subscribing
+        // inside it is intentional (inner subscription management) and should not
+        // be flagged even if the Observable itself is passed into a .pipe() operator.
+        if (
+          current.type === 'NewExpression' &&
+          current.callee.type === 'Identifier' &&
+          current.callee.name === 'Observable'
+        ) {
+          return false;
+        }
+        if (current.type === 'ArrowFunctionExpression' || current.type === 'FunctionExpression') {
+          crossedFunctionBoundary = true;
+        }
+        if (
+          crossedFunctionBoundary &&
+          current.type === 'CallExpression' &&
+          current.callee.type === 'MemberExpression' &&
+          current.callee.property.type === 'Identifier' &&
+          current.callee.property.name === 'pipe'
+        ) {
+          return true;
+        }
+        current = current.parent;
+      }
+      return false;
+    };
+
+    return {
+      CallExpression(node) {
+        const { callee } = node;
+        if (
+          callee.type === 'MemberExpression' &&
+          callee.property.type === 'Identifier' &&
+          callee.property.name === 'subscribe' &&
+          isInsidePipeCallback(node)
+        ) {
+          context.report({ node, messageId: 'noSubscribeInPipe' });
+        }
+      },
+    };
+  },
+};
+
+module.exports = noSubscribeInPipe;