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

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 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.12",
   "license": "MIT",
   "type": "commonjs",
   "main": "./src/index.js",

package/src/configs/recommended.js

@@ -382,6 +382,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',
   },
 };
 

package/src/index.js

@@ -48,6 +48,8 @@ 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 { recommendedTs, recommendedTemplate, recommendedSpec } = require('./configs/recommended');
 
 /** @type {import('eslint').ESLint.Plugin} */
@@ -104,6 +106,8 @@ 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,
   },
 };
 

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;