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

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 1.0.0-next.21
+
+### Minor Changes
+
+- [`3d44765`](https://github.com/ethlete-io/ethdk/commit/3d44765647e6d47b558c1395fe5ebcb20ed3ef83) Thanks [@TomTomB](https://github.com/TomTomB)! - New rule `ethlete/no-async-await`, replacing the `no-restricted-syntax` selectors that could not be
+  toggled on their own. It also catches bare `await` and `for await…of`.
+
+## 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.21",
   "license": "MIT",
   "type": "commonjs",
   "main": "./src/index.js",

package/src/configs/recommended.js

@@ -126,19 +126,8 @@ const recommendedTs = {
         selector: 'PropertyDefinition > ArrowFunctionExpression',
         message: 'No arrow function properties in classes. Use regular methods.',
       },
-      // No async/await — use RxJS
-      {
-        selector: 'FunctionDeclaration[async=true]',
-        message: 'No async/await. Use RxJS for all async operations.',
-      },
-      {
-        selector: 'ArrowFunctionExpression[async=true]',
-        message: 'No async/await. Use RxJS for all async operations.',
-      },
-      {
-        selector: 'FunctionExpression[async=true]',
-        message: 'No async/await. Use RxJS for all async operations.',
-      },
+      // async/await is owned by ethlete/no-async-await, so a lib can keep it on while it works
+      // through the rest of this rule's backlog.
       // No static class members — except ngTemplateContextGuard, which Angular's template
       // type checker requires to be static (it types a structural directive's `let-` bindings)
       {
@@ -253,6 +242,9 @@ const recommendedTs = {
     // No .subscribe() inside a .pipe() callback
     'ethlete/no-subscribe-in-pipe': 'error',
 
+    // No async/await — asynchronous work is modelled as cold Observables
+    'ethlete/no-async-await': 'error',
+
     // No .subscribe() inside effect() or computed()
     'ethlete/no-rxjs-in-effect': 'error',
 

package/src/index.js

@@ -58,6 +58,7 @@ const noLegacyPrepareWithoutInjector = require('./rules/no-legacy-prepare-withou
 const requireFormSubmit = require('./rules/require-form-submit');
 const noCdkImport = require('./rules/no-cdk-import');
 const noLegacyQueryImport = require('./rules/no-legacy-query-import');
+const noAsyncAwait = require('./rules/no-async-await');
 const { recommendedTs, recommendedTemplate, recommendedSpec } = require('./configs/recommended');
 
 /** @type {import('eslint').ESLint.Plugin} */
@@ -124,6 +125,7 @@ const plugin = {
     'require-form-submit': requireFormSubmit,
     'no-cdk-import': noCdkImport,
     'no-legacy-query-import': noLegacyQueryImport,
+    'no-async-await': noAsyncAwait,
   },
 };
 

package/src/rules/no-async-await.js

@@ -0,0 +1,80 @@
+// @ts-check
+'use strict';
+
+/**
+ * Disallow async/await — asynchronous work is modelled with RxJS.
+ *
+ * Every async API in the SDK returns a cold Observable, not a Promise, so a consumer can compose,
+ * cancel and retry it. Bridge a browser Promise in with from(); never await it.
+ *
+ * BAD:
+ *   async copy(text: string) {
+ *     await navigator.clipboard.writeText(text);
+ *     this.copied.set(true);
+ *   }
+ *
+ * GOOD:
+ *   copy(text: string) {
+ *     return from(navigator.clipboard.writeText(text)).pipe(tap(() => this.copied.set(true)));
+ *   }
+ */
+
+/** Storybook's play function is called by the test runner and has to be a promise. */
+const isStorybookPlayFunction = (node) => {
+  const { parent } = node;
+
+  return (
+    parent?.type === 'Property' &&
+    parent.value === node &&
+    parent.key.type === 'Identifier' &&
+    parent.key.name === 'play'
+  );
+};
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noAsyncAwait = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow async / await — model asynchronous work as RxJS Observables.',
+      recommended: true,
+    },
+    messages: {
+      noAsync:
+        "Don't declare an 'async' function. Return a cold Observable instead — 'defer()' for laziness, 'from()' to bridge a Promise-based browser API.",
+      noAwait:
+        "Don't 'await'. Compose the value into the stream with 'switchMap' / 'mergeMap' / 'from()' instead, and read a one-shot result with 'firstValueFrom()' only in tests.",
+      noForAwait: "Don't use 'for await…of'. Bridge the async iterable into a stream and compose it with RxJS.",
+    },
+    schema: [],
+  },
+  create(context) {
+    const isExempt = (node) => {
+      for (let current = node; current; current = current.parent) {
+        if (isStorybookPlayFunction(current)) return true;
+      }
+
+      return false;
+    };
+
+    const reportAsync = (node) => {
+      if (!node.async || isExempt(node)) return;
+
+      context.report({ node, messageId: 'noAsync' });
+    };
+
+    return {
+      FunctionDeclaration: reportAsync,
+      FunctionExpression: reportAsync,
+      ArrowFunctionExpression: reportAsync,
+      AwaitExpression(node) {
+        if (!isExempt(node)) context.report({ node, messageId: 'noAwait' });
+      },
+      ForOfStatement(node) {
+        if (node.await && !isExempt(node)) context.report({ node, messageId: 'noForAwait' });
+      },
+    };
+  },
+};
+
+module.exports = noAsyncAwait;

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"`.',
     },