[New] async-server-action: Add rule to require that server actions be async

Author: jorgezreik

CHANGELOG.md

@@ -7,6 +7,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 ## Unreleased
 
 ### Added
+* [`async-server-action`]: add rule ([#3729][] @jorgezreik)
 * [`jsx-props-no-multi-spaces`]: improve autofix for multi-line ([#3930][] @justisb)
 * [`jsx-handler-names`]: support namespaced component names ([#3943][] @takuji)
 * [`jsx-no-leaked-render`]: add `ignoreAttributes` option ([#3441][] @aleclarson)
@@ -34,6 +35,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 [#3928]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3928
 [#3923]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3923
 [#3441]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3441
+[#3729]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3729
 
 ## [7.37.5] - 2025.04.03
 
@@ -265,6 +267,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-unknown-property`]: support `popover`, `popovertarget`, `popovertargetaction` attributes ([#3707][] @ljharb)
 * [`no-unknown-property`]: only match `data-*` attributes containing `-` ([#3713][] @silverwind)
 * [`checked-requires-onchange-or-readonly`]: correct options that were behaving opposite ([#3715][] @jaesoekjjang)
+* [`boolean-prop-naming`]: avoid a crash with a non-TSTypeReference type ([#3718][] @developer-bandi)
 
 ### Changed
 * [`boolean-prop-naming`]: improve error message (@ljharb)

README.md

@@ -291,6 +291,7 @@ module.exports = [
 
 | Name                                                                                         | Description                                                                                                                                  | 💼 | 🚫 | 🔧 | 💡 | ❌  |
 | :------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------- | :- | :- | :- | :- | :- |
+| [async-server-action](docs/rules/async-server-action.md)                                     | Require functions with the `use server` directive to be async                                                                                |    |    |    | 💡 |    |
 | [boolean-prop-naming](docs/rules/boolean-prop-naming.md)                                     | Enforces consistent naming for boolean props                                                                                                 |    |    |    |    |    |
 | [button-has-type](docs/rules/button-has-type.md)                                             | Disallow usage of `button` elements without an explicit `type` attribute                                                                     |    |    |    |    |    |
 | [checked-requires-onchange-or-readonly](docs/rules/checked-requires-onchange-or-readonly.md) | Enforce using `onChange` or `readonly` attribute when `checked` is used                                                                      |    |    |    |    |    |

docs/rules/async-server-action.md

@@ -0,0 +1,57 @@
+# react/async-server-action
+
+📝 Require functions with the `use server` directive to be async.
+
+💡 This rule is manually fixable by [editor suggestions](https://eslint.org/docs/latest/use/core-concepts#rule-suggestions).
+
+<!-- end auto-generated rule header -->
+
+Require Server Actions (functions with the `use server` directive) to be async, as mandated by the `use server` [spec](https://react.dev/reference/react/use-server).
+
+This must be the case even if the function does not use `await` or `return` a promise.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+<form
+  action={() => {
+    'use server';
+    ...
+  }}
+>
+  ...
+</form>
+```
+
+```jsx
+function action() {
+  'use server';
+  ...
+}
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+<form
+  action={async () => {
+    'use server';
+    ...
+  }}
+>
+  ...
+</form>
+```
+
+```jsx
+async function action() {
+  'use server';
+  ...
+}
+```
+
+## When Not To Use It
+
+If you are not using React Server Components.

lib/rules/async-server-action.js

@@ -0,0 +1,72 @@
+/**
+ * @fileoverview Require functions with the `use server` directive to be async
+ * @author Jorge Zreik
+ */
+
+'use strict';
+
+const docsUrl = require('../util/docsUrl');
+const report = require('../util/report');
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+const messages = {
+  asyncServerAction: 'Server Actions must be async',
+  suggestAsyncNamed: 'Make {{functionName}} an `async` function',
+  suggestAsyncAnon: 'Make this function `async`',
+};
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Require functions with the `use server` directive to be async',
+      category: 'Possible Errors',
+      recommended: false,
+      url: docsUrl('async-server-action'),
+    },
+
+    messages,
+
+    type: 'suggestion',
+    hasSuggestions: true,
+
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      ':function[async=false][generator=false]>BlockStatement>:first-child[expression.value="use server"]'(node) {
+        const currentFunction = node.parent.parent;
+        const parent = currentFunction.parent;
+        const isMethod = parent.type === 'MethodDefinition' || (parent.type === 'Property' && parent.method);
+
+        let name;
+        if (currentFunction.id) {
+          name = currentFunction.id.name;
+        } else if (isMethod && parent.key && parent.key.type === 'Identifier') {
+          name = parent.key.name;
+        }
+
+        const suggestMessage = name ? messages.suggestAsyncNamed : messages.suggestAsyncAnon;
+        const data = name ? { functionName: `\`${name}\`` } : {};
+        report(context, messages.asyncServerAction, 'asyncServerAction', {
+          node: currentFunction,
+          data,
+          suggest: [{
+            desc: suggestMessage,
+            data,
+            fix(fixer) {
+              if (isMethod) {
+                return fixer.insertTextBefore(parent.key, 'async ');
+              }
+              return fixer.insertTextBefore(currentFunction, 'async ');
+            },
+          }],
+        });
+      },
+    };
+  },
+};

lib/rules/index.js

@@ -4,6 +4,7 @@
 
 /** @satisfies {Record<string, import('eslint').Rule.RuleModule>} */
 const rules = {
+  'async-server-action': require('./async-server-action'),
   'boolean-prop-naming': require('./boolean-prop-naming'),
   'button-has-type': require('./button-has-type'),
   'checked-requires-onchange-or-readonly': require('./checked-requires-onchange-or-readonly'),