@ethlete/eslint-plugin 1.0.0-next.19 → 1.0.0-next.20

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.0.0-next.20
+
+### Patch Changes
+
+- [`085c95e`](https://github.com/ethlete-io/ethdk/commit/085c95ebe1ecb8489b00b042066997a7a9dc8e5e) Thanks [@TomTomB](https://github.com/TomTomB)! - `require-form-submit` accepts `[etForm]` and `[formRoot]` as a form's submit handling.
+
+- [`4350d8e`](https://github.com/ethlete-io/ethdk/commit/4350d8e1eca00447ba130ec5a0ce43a64cfc4496) Thanks [@TomTomB](https://github.com/TomTomB)! - `no-trivial-wrapper-method` no longer flags `focus`, `blur` or `reset` on a component or directive - Angular resolves those by name on the instance.
+
 ## 1.0.0-next.19
 
 ### Minor Changes

package/package.json

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

package/src/rules/no-trivial-wrapper-method.js

@@ -16,14 +16,41 @@
  * GOOD:
  *   // Call this.value.set(val) directly at the call sites.
  *   // If the method wraps something non-trivially (transforms args, adds logic), it is fine.
+ *   // `focus`/`blur`/`reset` on a @Component/@Directive are exempt - see CONTRACT_METHOD_NAMES.
  */
 
+/**
+ * Imperative members Angular and the DOM look up **by name on the instance**. A component that
+ * wraps a control in a host directive has to re-expose them itself: signal forms resolves a custom
+ * control to the wrapper component, not to its host directives, so a `focus()` that only forwards
+ * is the whole contract - there is no call site to inline it into.
+ */
+const CONTRACT_METHOD_NAMES = new Set(['focus', 'blur', 'reset']);
+
 /**
  * Returns true when the param is a plain identifier (no default, no destructuring, no rest).
  * @param {import('@typescript-eslint/types').TSESTree.Parameter} param
  */
 const isSimpleParam = (param) => param.type === 'Identifier';
 
+/**
+ * Whether the class holding this method is an Angular component or directive.
+ * @param {import('eslint').Rule.Node} methodNode MethodDefinition node
+ */
+const isInAngularClass = (methodNode) => {
+  const classNode = methodNode.parent?.parent;
+  const decorators = classNode && 'decorators' in classNode ? classNode.decorators : null;
+
+  if (!decorators) return false;
+
+  return decorators.some((decorator) => {
+    const expression = decorator.expression;
+    const callee = expression.type === 'CallExpression' ? expression.callee : expression;
+
+    return callee.type === 'Identifier' && (callee.name === 'Component' || callee.name === 'Directive');
+  });
+};
+
 /**
  * Returns the single CallExpression in the method body when the method is a
  * trivial all-args-forwarding wrapper, or null otherwise.
@@ -97,6 +124,8 @@ const noTrivialWrapperMethod = {
         const methodName = node.key.type === 'Identifier' ? node.key.name : null;
         if (!methodName) return;
 
+        if (CONTRACT_METHOD_NAMES.has(methodName) && isInAngularClass(node)) return;
+
         const callee = callExpr.callee;
         const targetName =
           callee.type === 'MemberExpression'

package/src/rules/require-form-submit.js

@@ -6,6 +6,7 @@
  * submit control reaches a form at all.
  *
  *   <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">      ✔
@@ -26,7 +27,9 @@ const hasBinding = (node, name) =>
 
 /** @param {any} node */
 const handlesSubmit = (node) =>
-  node.outputs?.some(/** @param {any} o */ (o) => o.name === 'submit' || o.name === 'ngSubmit');
+  node.outputs?.some(/** @param {any} o */ (o) => o.name === 'submit' || o.name === 'ngSubmit') ||
+  hasBinding(node, 'etForm') ||
+  hasBinding(node, 'formRoot');
 
 /** @param {any} node */
 const submitsNatively = (node) =>
@@ -46,7 +49,7 @@ const requireFormSubmit = {
     schema: [],
     messages: {
       missingSubmitHandler:
-        'This `<form>` handles no submission - pressing Enter in a field either does nothing or reloads the page. Bind `(ngSubmit)` (reactive forms) or `(submit)`, or use a plain element if this is not a form.',
+        '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"`.',
     },