@ethlete/eslint-plugin 1.0.0-next.11 → 1.0.0-next.13

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 1.0.0-next.13
+
+### Minor Changes
+
+- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`5a43c83`](https://github.com/ethlete-io/ethdk/commit/5a43c8347a98a815562d1bb0f59bc0db1d765262) Thanks [@github-actions](https://github.com/apps/github-actions)! - Recommended config: the `@Injectable` ban now also flags Angular 22's `@Service` decorator — use `createProvider` / `createRootProvider` from `@ethlete/core` instead.
+
+- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`9be3738`](https://github.com/ethlete-io/ethdk/commit/9be3738e18ef1837841c79131127fa42406a3e92) Thanks [@github-actions](https://github.com/apps/github-actions)! - New template rule `ethlete/prefer-static-boolean-properties` (in `recommendedTemplate` as `warn`): flags property bindings of static booleans like `[isReadonly]="true"` and suggests the static-attribute form (`isReadonly` / `isReadonly="false"`). Suggestion-only, since the rewrite is only safe for inputs with a `booleanAttribute` transform.
+
+## 1.0.0-next.12
+
+### Minor Changes
+
+- [`44adcac`](https://github.com/ethlete-io/ethdk/commit/44adcac94d7e0f56742e02901221c6e04da7df47) Thanks [@TomTomB](https://github.com/TomTomB)! - Add two component I/O naming rules:
+  - `no-native-html-input-name` (error) — flags an `input()`/`model()` named after a global HTML attribute (`title`, `id`, `hidden`, `role`, `tabindex`, …), which collides with the attribute the host element carries natively.
+  - `prefer-present-tense-output` (warn) — nudges `output()` names toward the present tense like native DOM events (`playerSelect`, not `playerSelected`).
+
+  The `on`-prefix case is already covered by `@angular-eslint/no-output-on-prefix`, so no rule is added for it.
+
 ## 1.0.0-next.11
 
 ### Major Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/eslint-plugin",
-  "version": "1.0.0-next.11",
+  "version": "1.0.0-next.13",
   "license": "MIT",
   "type": "commonjs",
   "main": "./src/index.js",

package/src/configs/recommended.js

@@ -169,10 +169,12 @@ const recommendedTs = {
         message:
           'No legacy Angular lifecycle hooks. Use afterNextRender, inject(DestroyRef).onDestroy, or constructor-based effects instead.',
       },
-      // No @Injectable — use createRootProvider / createProvider from @ethlete/core
+      // No @Injectable / @Service — use createRootProvider / createProvider from @ethlete/core
       {
-        selector: "Decorator[expression.callee.name='Injectable'], Decorator[expression.name='Injectable']",
-        message: 'No @Injectable services. Use createRootProvider / createProvider from @ethlete/core instead.',
+        selector:
+          'Decorator[expression.callee.name=/^(Injectable|Service)$/], Decorator[expression.name=/^(Injectable|Service)$/]',
+        message:
+          'No @Injectable / @Service services. Use createRootProvider / createProvider from @ethlete/core instead.',
       },
       // No route guards — handle access control inside the component itself
       {
@@ -382,6 +384,13 @@ const recommendedTs = {
 
     // Routing components must use paths containing "-view" and class names ending in "ViewComponent"
     'ethlete/enforce-routing-view-naming': 'error',
+
+    // Inputs/models must not be named after a global HTML attribute (title, id, hidden, …) — it collides with the host element
+    'ethlete/no-native-html-input-name': 'error',
+
+    // Outputs should read in the present tense like native DOM events: (playerSelect), not (playerSelected)
+    // (The `on` prefix is already covered by @angular-eslint/no-output-on-prefix.)
+    'ethlete/prefer-present-tense-output': 'warn',
   },
 };
 
@@ -396,6 +405,10 @@ const recommendedTemplate = {
     '@angular-eslint/template/no-any': 'error',
     // Prefer plain attribute over unnecessary property binding for static strings: etIcon="foo" not [etIcon]="'foo'"
     '@angular-eslint/template/prefer-static-string-properties': 'error',
+    // Prefer plain attribute over unnecessary property binding for static booleans: isReadonly not [isReadonly]="true"
+    // (warn + suggestion-only: the rewrite is only safe when the input has a booleanAttribute transform,
+    // which a template rule cannot verify)
+    'ethlete/prefer-static-boolean-properties': 'warn',
   },
 };
 

package/src/index.js

@@ -48,6 +48,9 @@ const classConstantProperty = require('./rules/class-constant-property');
 const preferConciseAngularHostDirectives = require('./rules/prefer-concise-angular-host-directives');
 const preferConciseAngularStyleMetadata = require('./rules/prefer-concise-angular-style-metadata');
 const noTypedInjectedElementRef = require('./rules/no-typed-injected-element-ref');
+const noNativeHtmlInputName = require('./rules/no-native-html-input-name');
+const preferPresentTenseOutput = require('./rules/prefer-present-tense-output');
+const preferStaticBooleanProperties = require('./rules/prefer-static-boolean-properties');
 const { recommendedTs, recommendedTemplate, recommendedSpec } = require('./configs/recommended');
 
 /** @type {import('eslint').ESLint.Plugin} */
@@ -104,6 +107,9 @@ const plugin = {
     'prefer-concise-angular-host-directives': preferConciseAngularHostDirectives,
     'prefer-concise-angular-style-metadata': preferConciseAngularStyleMetadata,
     'no-typed-injected-element-ref': noTypedInjectedElementRef,
+    'no-native-html-input-name': noNativeHtmlInputName,
+    'prefer-present-tense-output': preferPresentTenseOutput,
+    'prefer-static-boolean-properties': preferStaticBooleanProperties,
   },
 };
 
@@ -117,6 +123,7 @@ const recommendedTsWithPlugin = {
 /** @type {import('eslint').Linter.Config} */
 const recommendedTemplateWithPlugin = {
   ...recommendedTemplate,
+  plugins: { ethlete: plugin },
 };
 
 const configs = {

package/src/rules/internals/angular-io.js

@@ -0,0 +1,78 @@
+// @ts-check
+'use strict';
+
+/**
+ * Shared detection for Angular signal-based inputs and outputs.
+ *
+ * This repo declares component I/O exclusively via the signal factory functions
+ * (no `@Input()` / `@Output()` decorators):
+ *
+ *   foo = input(...)                 → input
+ *   foo = input.required<T>(...)     → input
+ *   foo = model(...)                 → model  (two-way input)
+ *   foo = model.required<T>(...)     → model
+ *   foo = output<T>()                → output
+ *   foo = outputFromObservable(...)  → output
+ *
+ * `getReactiveIo` maps a class `PropertyDefinition` node onto one of those kinds
+ * (or null when the property is not a reactive I/O declaration).
+ */
+
+/** Factory identifier → I/O kind. */
+const IO_FACTORIES = {
+  input: 'input',
+  model: 'model',
+  output: 'output',
+  outputFromObservable: 'output',
+};
+
+/**
+ * Resolves the factory function name of a call expression, handling both the
+ * plain form (`input(...)`) and the `.required` member form
+ * (`input.required(...)`).
+ *
+ * @param {any} callee
+ * @returns {string | null}
+ */
+const getFactoryName = (callee) => {
+  if (!callee) return null;
+
+  if (callee.type === 'Identifier') return callee.name;
+
+  // input.required(...) / model.required(...)
+  if (
+    callee.type === 'MemberExpression' &&
+    !callee.computed &&
+    callee.object.type === 'Identifier' &&
+    callee.property.type === 'Identifier' &&
+    callee.property.name === 'required'
+  ) {
+    return callee.object.name;
+  }
+
+  return null;
+};
+
+/**
+ * Classifies a class property as an Angular signal input/model/output.
+ *
+ * @param {any} node  PropertyDefinition
+ * @returns {{ kind: 'input' | 'model' | 'output', name: string, keyNode: any } | null}
+ */
+const getReactiveIo = (node) => {
+  if (!node || node.type !== 'PropertyDefinition') return null;
+  if (node.computed || node.key.type !== 'Identifier') return null;
+
+  const value = node.value;
+  if (!value || value.type !== 'CallExpression') return null;
+
+  const factory = getFactoryName(value.callee);
+  if (!factory) return null;
+
+  const kind = /** @type {Record<string, 'input' | 'model' | 'output'>} */ (IO_FACTORIES)[factory];
+  if (!kind) return null;
+
+  return { kind, name: node.key.name, keyNode: node.key };
+};
+
+module.exports = { getReactiveIo };

package/src/rules/no-native-html-input-name.js

@@ -0,0 +1,94 @@
+// @ts-check
+'use strict';
+
+const { getReactiveIo } = require('./internals/angular-io');
+
+/**
+ * Disallows naming an `input()` / `model()` after a global HTML attribute.
+ *
+ * A component's host element carries every global attribute natively, so an
+ * input named `title`, `id`, `hidden`, `role`, … collides with the real DOM
+ * attribute: the browser applies its native behaviour (a `title` tooltip, a
+ * duplicated `id`, native `hidden`/`role` semantics) in addition to — or
+ * instead of — the component's intent. Rename the input (e.g. `label`,
+ * `overlayId`, `isHidden`) so it can't clash.
+ *
+ * Only the *global* attributes (those valid on any element) are flagged.
+ * Element-specific attributes that libraries routinely mirror on purpose
+ * (`disabled`, `value`, `placeholder`, `type`, `size`, `min`, `max`, …) are
+ * intentionally NOT flagged — they don't apply to an arbitrary host element and
+ * mirroring them is a deliberate, well-understood pattern.
+ *
+ * ❌ title = input('...')
+ * ❌ id = input(...)
+ * ❌ hidden = input(false)
+ * ✅ label = input('...')
+ * ✅ disabled = input(false)   // element-specific, intentional mirror
+ */
+
+// Global HTML attributes (valid on every element) + `role`, which behaves the
+// same way. Element-specific attributes are deliberately excluded — see above.
+//
+// Microdata (`itemid`, `itemprop`, …) and other niche globals (`is`, `nonce`,
+// `part`, `exportparts`, …) are also excluded: they are rarely used, so an input
+// named after one is almost never a real collision, whereas the names double as
+// common domain terms (e.g. `itemId` on a list item). Keeping them in would
+// produce more false positives than caught footguns.
+const GLOBAL_HTML_ATTRIBUTES = new Set([
+  'accesskey',
+  'autocapitalize',
+  'autofocus',
+  'class',
+  'contenteditable',
+  'dir',
+  'draggable',
+  'enterkeyhint',
+  'hidden',
+  'id',
+  'inert',
+  'inputmode',
+  'lang',
+  'popover',
+  'role',
+  'slot',
+  'spellcheck',
+  'style',
+  'tabindex',
+  'title',
+  'translate',
+]);
+
+/** @type {import('eslint').Rule.RuleModule} */
+const rule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow naming an input/model after a global HTML attribute (it collides with the host element).',
+      recommended: true,
+    },
+    schema: [],
+    messages: {
+      nativeName:
+        "Input '{{ name }}' shares its name with the global HTML attribute '{{ name }}', which every host element carries natively. Rename it to avoid the clash.",
+    },
+  },
+  create(context) {
+    return {
+      PropertyDefinition(node) {
+        const io = getReactiveIo(node);
+        if (!io) return;
+        if (io.kind === 'output') return;
+
+        if (!GLOBAL_HTML_ATTRIBUTES.has(io.name.toLowerCase())) return;
+
+        context.report({
+          node: io.keyNode,
+          messageId: 'nativeName',
+          data: { name: io.name },
+        });
+      },
+    };
+  },
+};
+
+module.exports = rule;

package/src/rules/prefer-present-tense-output.js

@@ -0,0 +1,92 @@
+// @ts-check
+'use strict';
+
+const { getReactiveIo } = require('./internals/angular-io');
+
+/**
+ * Nudges `output()` names toward the present tense, matching native DOM events.
+ *
+ * Native events are named in the present tense after the thing that happens:
+ * `input`, `change`, `select`, `mousedown`, `dragstart`. Components should read
+ * the same way in a template — `(playerSelect)`, not `(playerSelected)`. A
+ * past-tense name describes a state after the fact rather than the event.
+ *
+ * ❌ playerSelected = output<...>()
+ * ❌ filesRejected = output<...>()
+ * ✅ playerSelect = output<...>()
+ * ✅ filesReject = output<...>()
+ *
+ * Detection is heuristic: the final camel-case segment is flagged when it ends
+ * in `-ed` (the dominant past-participle pattern), excluding an allowlist of
+ * base-form words that merely happen to end that way (`succeed`, `feed`,
+ * `speed`, …). Irregular past tenses that don't end in `-ed` (`sent`, `shown`,
+ * `built`, …) are NOT detected — this rule catches the common case, not every
+ * one. No auto-fix: de-conjugating a verb reliably (and renaming the matching
+ * template bindings) is out of scope, so the corrected name is left to the
+ * author.
+ */
+
+// Base-form / noun words ending in "-ed" that are not past participles.
+const NON_PAST_ED_WORDS = new Set([
+  'succeed',
+  'proceed',
+  'exceed',
+  'feed',
+  'need',
+  'breed',
+  'bleed',
+  'speed',
+  'seed',
+  'weed',
+  'embed',
+  'shed',
+  'wed',
+  'indeed',
+]);
+
+/**
+ * Returns the final camel-case segment of an identifier, lower-cased.
+ * `filesRejected` → `rejected`, `removed` → `removed`.
+ *
+ * @param {string} name
+ */
+const lastWord = (name) => {
+  const segments = name.split(/(?=[A-Z])/);
+  return segments[segments.length - 1].toLowerCase();
+};
+
+/** @type {import('eslint').Rule.RuleModule} */
+const rule = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Prefer present-tense output names (like native DOM events) over past-tense ones.',
+      recommended: true,
+    },
+    schema: [],
+    messages: {
+      pastTense:
+        "Output '{{ name }}' looks past tense ('{{ word }}'). Name outputs after the present-tense event like native DOM events (e.g. 'change', 'select'), not their past participle ('changed', 'selected').",
+    },
+  },
+  create(context) {
+    return {
+      PropertyDefinition(node) {
+        const io = getReactiveIo(node);
+        if (!io || io.kind !== 'output') return;
+
+        const word = lastWord(io.name);
+        if (word.length <= 2 || !word.endsWith('ed')) return;
+        if (NON_PAST_ED_WORDS.has(word)) return;
+
+        context.report({
+          node: io.keyNode,
+          messageId: 'pastTense',
+          data: { name: io.name, word },
+        });
+      },
+    };
+  },
+};
+
+module.exports = rule;

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

@@ -0,0 +1,85 @@
+// @ts-check
+'use strict';
+
+/**
+ * Flags property bindings whose value is a static boolean literal:
+ *
+ *   <my-cmp [isReadonly]="true" />
+ *   <my-cmp [isReadonly]="false" />
+ *
+ * If the target input uses a `booleanAttribute` transform (the styleguide
+ * default for boolean inputs), the binding is unnecessary — a static attribute
+ * expresses the same thing without a change-detection expression:
+ *
+ *   <my-cmp isReadonly />          (true)
+ *   <my-cmp isReadonly="false" />  (false — `booleanAttribute` coerces the string 'false' to false)
+ *
+ * Whether the input actually has that transform is invisible to a template
+ * rule (no type information), so the rewrite is offered as a suggestion, not
+ * an auto-fix: without the transform a static attribute would pass the string
+ * 'true' / 'false' instead of a boolean.
+ *
+ * Companion to `@angular-eslint/template/prefer-static-string-properties`,
+ * which covers the string-literal case (where the rewrite is always safe).
+ */
+
+/** @type {import('eslint').Rule.RuleModule} */
+const preferStaticBooleanProperties = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Prefer a static attribute over a property binding for static boolean values when the input uses a booleanAttribute transform.',
+    },
+    hasSuggestions: true,
+    schema: [],
+    messages: {
+      preferStaticBooleanProperty:
+        'Binding a static boolean is unnecessary if the `{{ name }}` input uses a `booleanAttribute` transform — use a static attribute instead. Keep the binding if the input takes a plain boolean without a transform.',
+      useBareAttribute: 'Replace with the bare attribute `{{ name }}`',
+      useStaticAttribute: 'Replace with the static attribute `{{ name }}="false"`',
+    },
+  },
+  create(context) {
+    const parserServices = /** @type {any} */ (context.sourceCode.parserServices);
+
+    // Only meaningful when parsed with @angular-eslint/template-parser
+    if (!parserServices?.convertNodeSourceSpanToLoc) return {};
+
+    return {
+      /** @param {any} node */
+      ['BoundAttribute.inputs'](node) {
+        const { name, sourceSpan, keySpan, value } = node;
+
+        // Exclude @animation, class./style./attr. sub-properties, and
+        // structural directives (*foo has no keySpan details)
+        const isBindingProperty = keySpan?.details && !keySpan.details.includes('@') && !keySpan.details.includes('.');
+        if (!isBindingProperty) return;
+
+        // Only literal `true` / `false` expressions. `value.ast` is a
+        // LiteralPrimitive for literals; the raw-source check guards against
+        // other node shapes that happen to carry a boolean `value`.
+        const source = typeof value?.source === 'string' ? value.source.trim() : null;
+        if (typeof value?.ast?.value !== 'boolean' || (source !== 'true' && source !== 'false')) return;
+
+        const isTrue = value.ast.value === true;
+        const replacement = isTrue ? name : `${name}="false"`;
+
+        context.report({
+          loc: parserServices.convertNodeSourceSpanToLoc(sourceSpan),
+          messageId: 'preferStaticBooleanProperty',
+          data: { name },
+          suggest: [
+            {
+              messageId: isTrue ? 'useBareAttribute' : 'useStaticAttribute',
+              data: { name },
+              fix: (fixer) => fixer.replaceTextRange([sourceSpan.start.offset, sourceSpan.end.offset], replacement),
+            },
+          ],
+        });
+      },
+    };
+  },
+};
+
+module.exports = preferStaticBooleanProperties;