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

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

@@ -0,0 +1,320 @@
+// @ts-check
+'use strict';
+
+const COMPONENT_ORDER = ['selector', 'template', 'styleUrl', 'encapsulation', 'changeDetection'];
+
+// OnPush became the default change detection strategy in Angular 22, so from
+// v22 onward it must NOT be declared (see no-redundant-on-push-change-detection).
+// This rule therefore only applies to older Angular, where OnPush is opt-in.
+const MAX_MAJOR = 21;
+
+/** @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 {string | null} propertyName
+ */
+const getOrderKey = (propertyName) => {
+  if (propertyName === 'template' || propertyName === 'templateUrl') return 'template';
+  if (propertyName === 'styleUrl' || propertyName === 'styleUrls') return 'styleUrl';
+  return propertyName;
+};
+
+/**
+ * @param {import('eslint').SourceCode} sourceCode
+ * @param {import('eslint').AST.Token | import('eslint').Rule.Node} node
+ */
+const getIndent = (sourceCode, node) => {
+  if (!node.loc) return '';
+
+  const line = sourceCode.lines[node.loc.start.line - 1] ?? '';
+  return line.slice(0, node.loc.start.column);
+};
+
+/**
+ * @param {import('eslint').SourceCode} sourceCode
+ * @param {any} property
+ */
+const hasTrailingComma = (sourceCode, property) => {
+  const tokenAfter = sourceCode.getTokenAfter(property);
+  return Boolean(tokenAfter && tokenAfter.type === 'Punctuator' && tokenAfter.value === ',');
+};
+
+/**
+ * @param {import('eslint').SourceCode} sourceCode
+ */
+const findAngularCoreImport = (sourceCode) =>
+  sourceCode.ast.body.find(
+    (node) =>
+      node.type === 'ImportDeclaration' && node.source.type === 'Literal' && node.source.value === '@angular/core',
+  ) ?? null;
+
+/**
+ * @param {import('eslint').SourceCode} sourceCode
+ * @param {any} importNode
+ */
+const buildAngularCoreImportFix = (sourceCode, importNode) => {
+  const specifiers = importNode.specifiers ?? [];
+  const hasChangeDetectionStrategy = specifiers.some(
+    (specifier) =>
+      specifier.type === 'ImportSpecifier' &&
+      specifier.imported.type === 'Identifier' &&
+      specifier.imported.name === 'ChangeDetectionStrategy',
+  );
+  if (hasChangeDetectionStrategy) return null;
+
+  const defaultSpecifier = specifiers.find((specifier) => specifier.type === 'ImportDefaultSpecifier') ?? null;
+  const namespaceSpecifier = specifiers.find((specifier) => specifier.type === 'ImportNamespaceSpecifier') ?? null;
+  const namedSpecifiers = specifiers.filter((specifier) => specifier.type === 'ImportSpecifier');
+
+  if (namespaceSpecifier) {
+    return (fixer) => fixer.insertTextAfter(importNode, `\nimport { ChangeDetectionStrategy } from '@angular/core';`);
+  }
+
+  const importParts = [];
+  if (defaultSpecifier) {
+    importParts.push(sourceCode.getText(defaultSpecifier));
+  }
+
+  const namedTexts = namedSpecifiers.map((specifier) => sourceCode.getText(specifier));
+  importParts.push(`{ ${[...namedTexts, 'ChangeDetectionStrategy'].join(', ')} }`);
+
+  return (fixer) => fixer.replaceText(importNode, `import ${importParts.join(', ')} from '@angular/core';`);
+};
+
+/**
+ * @param {import('eslint').SourceCode} sourceCode
+ */
+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';`)
+    : (fixer) =>
+        fixer.replaceTextRange(
+          [0, sourceCode.ast.range[0]],
+          `import { ChangeDetectionStrategy } from '@angular/core';\n\n`,
+        );
+};
+
+/**
+ * @param {any} metadata
+ */
+const getChangeDetectionInsertionTarget = (metadata) => {
+  const changeDetectionIndex = COMPONENT_ORDER.indexOf('changeDetection');
+
+  return (
+    metadata.properties.find((property) => {
+      if (property.type !== 'Property') return false;
+
+      const propertyName = getOrderKey(getPropertyName(property.key));
+      const propertyIndex = propertyName === null ? COMPONENT_ORDER.length : COMPONENT_ORDER.indexOf(propertyName);
+      return propertyIndex > changeDetectionIndex || propertyIndex === -1;
+    }) ?? null
+  );
+};
+
+/**
+ * @param {import('eslint').SourceCode} sourceCode
+ * @param {any} metadata
+ */
+const buildMetadataFix = (sourceCode, metadata) => {
+  const changeDetectionText = 'changeDetection: ChangeDetectionStrategy.OnPush';
+  const properties = metadata.properties.filter((property) => property.type === 'Property');
+  const insertionTarget = getChangeDetectionInsertionTarget(metadata);
+  const isMultiline = Boolean(metadata.loc && metadata.loc.start.line !== metadata.loc.end.line);
+
+  if (properties.length === 0) {
+    return (fixer) => fixer.replaceText(metadata, `{ ${changeDetectionText} }`);
+  }
+
+  if (insertionTarget) {
+    if (isMultiline) {
+      const propertyIndent = getIndent(sourceCode, insertionTarget);
+      return (fixer) => fixer.insertTextBefore(insertionTarget, `${changeDetectionText},\n${propertyIndent}`);
+    }
+
+    return (fixer) => fixer.insertTextBefore(insertionTarget, `${changeDetectionText}, `);
+  }
+
+  const lastProperty = properties[properties.length - 1];
+  const closingBrace = sourceCode.getLastToken(metadata);
+  if (!lastProperty || !closingBrace) return null;
+
+  if (isMultiline) {
+    const closingIndent = getIndent(sourceCode, closingBrace);
+    const propertyIndent = getIndent(sourceCode, lastProperty);
+    const separator = hasTrailingComma(sourceCode, lastProperty) ? '' : ',';
+    const rangeStart =
+      separator === ''
+        ? (sourceCode.getTokenAfter(lastProperty)?.range[1] ?? lastProperty.range[1])
+        : lastProperty.range[1];
+
+    return (fixer) =>
+      fixer.replaceTextRange(
+        [rangeStart, closingBrace.range[0]],
+        `${separator}\n${propertyIndent}${changeDetectionText}\n${closingIndent}`,
+      );
+  }
+
+  const separator = hasTrailingComma(sourceCode, lastProperty) ? '' : ',';
+  return (fixer) =>
+    fixer.replaceTextRange([lastProperty.range[1], closingBrace.range[0]], `${separator} ${changeDetectionText} `);
+};
+
+/**
+ * @param {import('eslint').SourceCode} sourceCode
+ * @param {any} metadata
+ * @param {any} valueNode
+ */
+const buildFix = (sourceCode, metadata, valueNode) => {
+  const fixes = [];
+  const angularCoreImport = findAngularCoreImport(sourceCode);
+  const importFix = angularCoreImport
+    ? buildAngularCoreImportFix(sourceCode, angularCoreImport)
+    : buildMissingAngularCoreImportFix(sourceCode);
+
+  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);
+  }
+
+  return (fixer) => fixes.map((applyFix) => applyFix(fixer));
+};
+
+/** @type {import('eslint').Rule.RuleModule} */
+const requireOnPushChangeDetection = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Require `changeDetection: ChangeDetectionStrategy.OnPush` in all @Component decorators.',
+    },
+    fixable: 'code',
+    messages: {
+      missing:
+        'Add `changeDetection: ChangeDetectionStrategy.OnPush` to @Component. Default change detection is not allowed.',
+      notOnPush: '`changeDetection` must be `ChangeDetectionStrategy.OnPush`. Got `ChangeDetectionStrategy.{{value}}`.',
+    },
+    schema: [],
+  },
+  create(context) {
+    // Only enforce on Angular <= 21, where OnPush is opt-in. On v22+ (or when
+    // the version is unknown — this workspace targets modern Angular) stay
+    // silent so no-redundant-on-push-change-detection owns the metadata.
+    const angularMajor = getAngularMajor(context);
+    if (angularMajor === null || angularMajor > MAX_MAJOR) return {};
+
+    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;
+
+        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;
+
+        const changeDetectionProp = metadata.properties.find(
+          (property) =>
+            property.type === 'Property' &&
+            property.key.type === 'Identifier' &&
+            property.key.name === 'changeDetection',
+        );
+
+        if (!changeDetectionProp) {
+          context.report({
+            node: metadata,
+            messageId: 'missing',
+            fix: buildFix(sourceCode, metadata, null),
+          });
+          return;
+        }
+
+        const value = changeDetectionProp.value;
+        if (
+          value.type === 'MemberExpression' &&
+          value.object.type === 'Identifier' &&
+          value.object.name === 'ChangeDetectionStrategy' &&
+          value.property.type === 'Identifier' &&
+          value.property.name !== 'OnPush'
+        ) {
+          context.report({
+            node: value,
+            messageId: 'notOnPush',
+            data: { value: value.property.name },
+            fix: buildFix(sourceCode, metadata, value),
+          });
+        }
+      },
+    };
+  },
+};
+
+module.exports = requireOnPushChangeDetection;

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

@@ -1,25 +1,188 @@
 // @ts-check
 'use strict';
 
+const COMPONENT_ORDER = ['selector', 'template', 'styleUrl', 'encapsulation', 'changeDetection'];
+
+/**
+ * @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 {string | null} propertyName
+ */
+const getOrderKey = (propertyName) => {
+  if (propertyName === 'template' || propertyName === 'templateUrl') return 'template';
+  if (propertyName === 'styleUrl' || propertyName === 'styleUrls') return 'styleUrl';
+  return propertyName;
+};
+
+/**
+ * @param {import('eslint').SourceCode} sourceCode
+ * @param {import('eslint').AST.Token | import('eslint').Rule.Node} node
+ */
+const getIndent = (sourceCode, node) => {
+  if (!node.loc) return '';
+
+  const line = sourceCode.lines[node.loc.start.line - 1] ?? '';
+  return line.slice(0, node.loc.start.column);
+};
+
+/**
+ * @param {import('eslint').SourceCode} sourceCode
+ * @param {any} property
+ */
+const hasTrailingComma = (sourceCode, property) => {
+  const tokenAfter = sourceCode.getTokenAfter(property);
+  return Boolean(tokenAfter && tokenAfter.type === 'Punctuator' && tokenAfter.value === ',');
+};
+
+/**
+ * @param {import('eslint').SourceCode} sourceCode
+ */
+const findAngularCoreImport = (sourceCode) =>
+  sourceCode.ast.body.find(
+    (node) =>
+      node.type === 'ImportDeclaration' && node.source.type === 'Literal' && node.source.value === '@angular/core',
+  ) ?? null;
+
+/**
+ * @param {import('eslint').SourceCode} sourceCode
+ * @param {any} importNode
+ */
+const buildAngularCoreImportFix = (sourceCode, importNode) => {
+  const specifiers = importNode.specifiers ?? [];
+  const hasViewEncapsulation = specifiers.some(
+    (specifier) =>
+      specifier.type === 'ImportSpecifier' &&
+      specifier.imported.type === 'Identifier' &&
+      specifier.imported.name === 'ViewEncapsulation',
+  );
+  if (hasViewEncapsulation) return null;
+
+  const defaultSpecifier = specifiers.find((specifier) => specifier.type === 'ImportDefaultSpecifier') ?? null;
+  const namespaceSpecifier = specifiers.find((specifier) => specifier.type === 'ImportNamespaceSpecifier') ?? null;
+  const namedSpecifiers = specifiers.filter((specifier) => specifier.type === 'ImportSpecifier');
+
+  if (namespaceSpecifier) {
+    return (fixer) => fixer.insertTextAfter(importNode, `\nimport { ViewEncapsulation } from '@angular/core';`);
+  }
+
+  const importParts = [];
+  if (defaultSpecifier) {
+    importParts.push(sourceCode.getText(defaultSpecifier));
+  }
+
+  const namedTexts = namedSpecifiers.map((specifier) => sourceCode.getText(specifier));
+  importParts.push(`{ ${[...namedTexts, 'ViewEncapsulation'].join(', ')} }`);
+
+  return (fixer) => fixer.replaceText(importNode, `import ${importParts.join(', ')} from '@angular/core';`);
+};
+
 /**
- * Requires @Component decorators to explicitly set `encapsulation: ViewEncapsulation.None`.
- *
- * The Ethlete styleguide mandates `ViewEncapsulation.None` for all components
- * because styles are managed globally via design tokens and CSS custom properties.
- * Emulated or ShadowDom encapsulation would interfere with this system.
- *
- * ❌ Missing the property entirely (default is Emulated):
- *   @Component({ selector: 'my-cmp', template: '' })
- *
- * ❌ Explicitly set to Emulated:
- *   @Component({ encapsulation: ViewEncapsulation.Emulated, ... })
- *
- * ❌ ShadowDom:
- *   @Component({ encapsulation: ViewEncapsulation.ShadowDom, ... })
- *
- * ✅ Correct:
- *   @Component({ encapsulation: ViewEncapsulation.None, ... })
+ * @param {import('eslint').SourceCode} sourceCode
  */
+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';`)
+    : (fixer) =>
+        fixer.replaceTextRange([0, sourceCode.ast.range[0]], `import { ViewEncapsulation } from '@angular/core';\n\n`);
+};
+
+/**
+ * @param {any} metadata
+ */
+const getEncapsulationInsertionTarget = (metadata) => {
+  const encapsulationIndex = COMPONENT_ORDER.indexOf('encapsulation');
+
+  return (
+    metadata.properties.find((property) => {
+      if (property.type !== 'Property') return false;
+
+      const propertyName = getOrderKey(getPropertyName(property.key));
+      const propertyIndex = propertyName === null ? COMPONENT_ORDER.length : COMPONENT_ORDER.indexOf(propertyName);
+      return propertyIndex > encapsulationIndex || propertyIndex === -1;
+    }) ?? null
+  );
+};
+
+/**
+ * @param {import('eslint').SourceCode} sourceCode
+ * @param {any} metadata
+ */
+const buildMetadataFix = (sourceCode, metadata) => {
+  const encText = 'encapsulation: ViewEncapsulation.None';
+  const properties = metadata.properties.filter((property) => property.type === 'Property');
+  const insertionTarget = getEncapsulationInsertionTarget(metadata);
+  const isMultiline = Boolean(metadata.loc && metadata.loc.start.line !== metadata.loc.end.line);
+
+  if (properties.length === 0) {
+    return (fixer) => fixer.replaceText(metadata, `{ ${encText} }`);
+  }
+
+  if (insertionTarget) {
+    if (isMultiline) {
+      const propertyIndent = getIndent(sourceCode, insertionTarget);
+      return (fixer) => fixer.insertTextBefore(insertionTarget, `${encText},\n${propertyIndent}`);
+    }
+
+    return (fixer) => fixer.insertTextBefore(insertionTarget, `${encText}, `);
+  }
+
+  const lastProperty = properties[properties.length - 1];
+  const closingBrace = sourceCode.getLastToken(metadata);
+  if (!lastProperty || !closingBrace) return null;
+
+  if (isMultiline) {
+    const closingIndent = getIndent(sourceCode, closingBrace);
+    const propertyIndent = getIndent(sourceCode, lastProperty);
+    const separator = hasTrailingComma(sourceCode, lastProperty) ? '' : ',';
+    const rangeStart =
+      separator === ''
+        ? (sourceCode.getTokenAfter(lastProperty)?.range[1] ?? lastProperty.range[1])
+        : lastProperty.range[1];
+
+    return (fixer) =>
+      fixer.replaceTextRange(
+        [rangeStart, closingBrace.range[0]],
+        `${separator}\n${propertyIndent}${encText}\n${closingIndent}`,
+      );
+  }
+
+  const separator = hasTrailingComma(sourceCode, lastProperty) ? '' : ',';
+  return (fixer) => fixer.replaceTextRange([lastProperty.range[1], closingBrace.range[0]], `${separator} ${encText} `);
+};
+
+/**
+ * @param {import('eslint').SourceCode} sourceCode
+ * @param {any} metadata
+ * @param {any} valueNode
+ */
+const buildFix = (sourceCode, metadata, valueNode) => {
+  const fixes = [];
+  const angularCoreImport = findAngularCoreImport(sourceCode);
+  const importFix = angularCoreImport
+    ? buildAngularCoreImportFix(sourceCode, angularCoreImport)
+    : buildMissingAngularCoreImportFix(sourceCode);
+
+  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);
+  }
+
+  return (fixer) => fixes.map((applyFix) => applyFix(fixer));
+};
 
 /** @type {import('eslint').Rule.RuleModule} */
 const requireViewEncapsulationNone = {
@@ -28,6 +191,7 @@ const requireViewEncapsulationNone = {
     docs: {
       description: 'Require `encapsulation: ViewEncapsulation.None` in all @Component decorators.',
     },
+    fixable: 'code',
     messages: {
       missing: 'Add `encapsulation: ViewEncapsulation.None` to @Component. The default (Emulated) is not allowed.',
       notNone: '`encapsulation` must be `ViewEncapsulation.None`. Got `ViewEncapsulation.{{value}}`.',
@@ -35,64 +199,63 @@ const requireViewEncapsulationNone = {
     schema: [],
   },
   create(context) {
+    const sourceCode = context.sourceCode;
+
     /**
-     * Returns true if the node is a @Component decorator call.
      * @param {import('eslint').Rule.Node} node
      */
     const isComponentDecorator = (node) => {
-      const dec = /** @type {any} */ (node);
-      if (dec.type !== 'Decorator') return false;
-      const expr = dec.expression;
-      if (expr.type === 'CallExpression') return expr.callee.type === 'Identifier' && expr.callee.name === 'Component';
-      if (expr.type === 'Identifier') return expr.name === 'Component';
-      return false;
+      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;
 
-        const dec = /** @type {any} */ (node);
-        const expr = dec.expression;
-        if (expr.type !== 'CallExpression') return;
-
-        const args = expr.arguments;
-        if (!args || args.length === 0) return;
+        const decorator = /** @type {any} */ (node);
+        const expression = decorator.expression;
+        if (expression.type !== 'CallExpression' || expression.arguments.length === 0) return;
 
-        const metadata = args[0];
+        const metadata = expression.arguments[0];
         if (!metadata || metadata.type !== 'ObjectExpression') return;
 
-        // Look for an `encapsulation` property
         const encProp = metadata.properties.find(
-          (/** @type {any} */ p) =>
-            p.type === 'Property' && p.key.type === 'Identifier' && p.key.name === 'encapsulation',
+          (property) =>
+            property.type === 'Property' && property.key.type === 'Identifier' && property.key.name === 'encapsulation',
         );
 
         if (!encProp) {
-          // Property absent — default is Emulated, which is not allowed
-          context.report({ node: metadata, messageId: 'missing' });
+          context.report({
+            node: metadata,
+            messageId: 'missing',
+            fix: buildFix(sourceCode, metadata, null),
+          });
           return;
         }
 
-        // Must be ViewEncapsulation.None
-        const val = /** @type {any} */ (encProp).value;
+        const value = encProp.value;
         if (
-          val.type === 'MemberExpression' &&
-          val.object.type === 'Identifier' &&
-          val.object.name === 'ViewEncapsulation' &&
-          val.property.type === 'Identifier'
+          value.type === 'MemberExpression' &&
+          value.object.type === 'Identifier' &&
+          value.object.name === 'ViewEncapsulation' &&
+          value.property.type === 'Identifier' &&
+          value.property.name !== 'None'
         ) {
-          if (val.property.name !== 'None') {
-            context.report({
-              node: val,
-              messageId: 'notNone',
-              data: { value: val.property.name },
-            });
-          }
-          // .None — valid, do nothing
+          context.report({
+            node: value,
+            messageId: 'notNone',
+            data: { value: value.property.name },
+            fix: buildFix(sourceCode, metadata, value),
+          });
         }
-        // If it's not a MemberExpression at all we don't flag it
-        // (dynamic or unusual expression — let TypeScript catch it)
       },
     };
   },