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

…be async

CHANGELOG.md

@@ -5,6 +5,12 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ## Unreleased
 
+### Added
+
+- [`async-server-action`]: add rule ([#3729][] @jorgezreik)
+
+[#3729]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3729
+
 ### Fixed
 * [`prop-types`]: null-check rootNode before calling getScope ([#3762][] @crnhrv)
 * [`boolean-prop-naming`]: avoid a crash with a spread prop ([#3733][] @ljharb)
@@ -40,6 +46,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

@@ -293,6 +293,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,55 @@
+# Require functions with the `use server` directive to be async (`react/async-server-action`)
+
+💡 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,59 @@
+/**
+ * @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',
+  suggestAsync: 'Make {{functionName}} 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 functionName = currentFunction.id ? `\`${currentFunction.id.name}\`` : 'this function';
+
+        const data = { functionName };
+        report(context, messages.asyncServerAction, 'asyncServerAction', {
+          node: currentFunction,
+          data,
+          suggest: [{
+            desc: messages.suggestAsync,
+            data,
+            fix(fixer) {
+              return fixer.insertTextBefore(currentFunction, 'async ');
+            },
+          }],
+        });
+      },
+    };
+  },
+};

lib/rules/index.js

@@ -4,6 +4,7 @@
 
 /** @type {Record<string, import('eslint').Rule.RuleModule>} */
 module.exports = {
+  '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'),