diff --git a/src/content/docs/en/reference/cli-reference.mdx b/src/content/docs/en/reference/cli-reference.mdx index 45b5844e98871..afe217ebaa227 100644 --- a/src/content/docs/en/reference/cli-reference.mdx +++ b/src/content/docs/en/reference/cli-reference.mdx @@ -268,7 +268,7 @@ Generates TypeScript types for all Astro modules. This sets up a [`src/env.d.ts` - The `astro:content` module for the [Content Collections API](/en/guides/content-collections/). - The `astro:db` module for [Astro DB](/en/guides/astro-db/). - The `astro:env` module for [experimental Astro Env](/en/reference/configuration-reference/#experimentalenv). -- The `astro:actions` module for [experimental Astro Actions](/en/reference/configuration-reference/#experimentalactions) +- The `astro:actions` module for [Astro Actions](/en/guides/actions/) ## `astro add` diff --git a/src/content/docs/en/reference/configuration-reference.mdx b/src/content/docs/en/reference/configuration-reference.mdx index 022621a9c0e86..e6aef532d400b 100644 --- a/src/content/docs/en/reference/configuration-reference.mdx +++ b/src/content/docs/en/reference/configuration-reference.mdx @@ -1285,106 +1285,6 @@ This option will be enabled by default in Astro 5.0. } ``` -### experimental.actions - -

- -**Type:** `boolean`
-**Default:** `false`
- -

- -Actions help you write type-safe backend functions you can call from anywhere. Enable server rendering [using the `output` property](/en/basics/rendering-modes/#on-demand-rendered) and add the `actions` flag to the `experimental` object: - -```js -{ - output: 'hybrid', // or 'server' - experimental: { - actions: true, - }, -} -``` - -Declare all your actions in `src/actions/index.ts`. This file is the global actions handler. - -Define an action using the `defineAction()` utility from the `astro:actions` module. An action accepts the `handler` property to define your server-side request handler. If your action accepts arguments, apply the `input` property to validate parameters with Zod. - -This example defines two actions: `like` and `comment`. The `like` action accepts a JSON object with a `postId` string, while the `comment` action accepts [FormData](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects) with `postId`, `author`, and `body` strings. Each `handler` updates your database and return a type-safe response. - -```ts -// src/actions/index.ts -import { defineAction, z } from "astro:actions"; - -export const server = { - like: defineAction({ - input: z.object({ postId: z.string() }), - handler: async ({ postId }) => { - // update likes in db - - return likes; - }, - }), - comment: defineAction({ - accept: 'form', - input: z.object({ - postId: z.string(), - author: z.string(), - body: z.string(), - }), - handler: async ({ postId }) => { - // insert comments in db - - return comment; - }, - }), -}; -``` - -Then, call an action from your client components using the `actions` object from `astro:actions`. You can pass a type-safe object when using JSON, or a [FormData](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects) object when using `accept: 'form'` in your action definition. - -This example calls the `like` and `comment` actions from a React component: - -```tsx "actions" -// src/components/blog.tsx -import { actions } from "astro:actions"; -import { useState } from "react"; - -export function Like({ postId }: { postId: string }) { - const [likes, setLikes] = useState(0); - return ( - - ); -} - -export function Comment({ postId }: { postId: string }) { - return ( -
{ - e.preventDefault(); - const formData = new FormData(e.target as HTMLFormElement); - const result = await actions.blog.comment(formData); - // handle result - }} - > - - - - - -
- ); -} -``` - -For a complete overview, and to give feedback on this experimental API, see the [Actions RFC](https://github.com/withastro/roadmap/blob/actions/proposals/0046-actions.md). - ### experimental.contentCollectionCache