Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/content/docs/en/guides/actions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -329,14 +329,14 @@ export const server = {
// Matches when the `type` field has the value `create`
type: z.literal('create'),
name: z.string(),
email: z.string().email(),
email: z.email(),
}),
z.object({
// Matches when the `type` field has the value `update`
type: z.literal('update'),
id: z.number(),
name: z.string(),
email: z.string().email(),
email: z.email(),
}),
]),
async handler(input) {
Expand Down Expand Up @@ -374,7 +374,7 @@ The following example shows a validated newsletter registration form that accept
</form>
```

2. Define a `newsletter` action to handle the submitted form. Validate the `email` field using the `z.string().email()` validator, and the `terms` checkbox using `z.boolean()`:
2. Define a `newsletter` action to handle the submitted form. Validate the `email` field using the `z.email()` validator, and the `terms` checkbox using `z.boolean()`:

```ts title="src/actions/index.ts" ins={5-12}
import { defineAction } from 'astro:actions';
Expand All @@ -384,7 +384,7 @@ The following example shows a validated newsletter registration form that accept
newsletter: defineAction({
accept: 'form',
input: z.object({
email: z.string().email(),
email: z.email(),
terms: z.boolean(),
}),
handler: async ({ email, terms }) => { /* ... */ },
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/guides/content-collections.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -364,7 +364,7 @@ export const collections = { blog, dogs };

Astro uses [Zod](https://github.com/colinhacks/zod) to power its content schemas. With Zod, Astro is able to validate every file's data within a collection *and* provide automatic TypeScript types when you query content from inside your project.

To use Zod in Astro, import the `z` utility from `"astro/zod"`. This is a re-export of the Zod library, and it supports all of the features of Zod 3.
To use Zod in Astro, import the `z` utility from `"astro/zod"`. This is a re-export of the Zod library, and it supports all of the features of Zod 4.

<ReadMore>See the [`z` utility reference](/en/reference/modules/astro-zod/) for a cheatsheet of common datatypes and to learn how Zod works and what features are available.</ReadMore>

Expand Down
22 changes: 10 additions & 12 deletions src/content/docs/en/reference/modules/astro-zod.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ import ReadMore from '~/components/ReadMore.astro';

[Zod](https://github.com/colinhacks/zod) is a TypeScript-based schema declaration and validation library. This allows you to define schemas you can use to validate data and transform data, from a simple type (e.g. `string`, `number`) to complex data structures (e.g. nested objects).

The `astro/zod` module exposes a re-export of Zod that gives you access to all the features of Zod v3. By using this module, you do not need to install Zod yourself. This also ensures that your project uses the same API versions as Astro when using features such as [Content Collections](/en/guides/content-collections/) or [Actions](/en/guides/actions/).
The `astro/zod` module exposes a re-export of Zod that gives you access to all the features of Zod v4. By using this module, you do not need to install Zod yourself. This also ensures that your project uses the same API versions as Astro when using features such as [Content Collections](/en/guides/content-collections/) or [Actions](/en/guides/actions/).

<ReadMore>See [Zod v3 website](https://v3.zod.dev/) for complete documentation on how Zod works and what features are available.</ReadMore>
<ReadMore>See the [Zod website](https://zod.dev/) for complete documentation on how Zod works and what features are available.</ReadMore>

## Imports from `astro/zod`

Expand All @@ -30,11 +30,11 @@ import { z } from 'astro/zod';

The `z` utility gives you access to validators for a wide range of data types, methods and types for working with your data.

<ReadMore>Learn more about the `z` utility in [Zod documentation](https://v3.zod.dev/?id=basic-usage)</ReadMore>
<ReadMore>Learn more about the `z` utility in [Zod documentation](https://zod.dev/basics)</ReadMore>

#### Common data type validators

With Zod, you can validate any type of data, such as [primitives](https://v3.zod.dev/?id=primitives), [objects](https://v3.zod.dev/?id=objects), [arrays](https://v3.zod.dev/?id=arrays) and more.
With Zod, you can validate any type of data, such as [primitives](https://zod.dev/api#primitives), [objects](https://zod.dev/api#objects), [arrays](https://zod.dev/api#arrays) and more.

The following example shows a cheatsheet of many common Zod data types to create a `user` schema:

Expand All @@ -44,20 +44,20 @@ import { z } from 'astro/zod';
const user = z.object({
username: z.string(),
name: z.string().min(2),
email: z.string().email(),
email: z.email(),
role: z.enum(["admin", "editor"]),
language: z.enum(["en", "fr", "es"]).default("en"),
hobbies: z.array(z.string()),
age: z.number(),
isEmailConfirmed: z.boolean(),
inscriptionDate: z.date(),
website: z.string().url().optional(),
website: z.url().optional(),
});
```

#### Extracting a Typescript type

Zod allows you to create a Typescript type from any schema [using Zod type inference](https://v3.zod.dev/?id=type-inference). This can be useful for describing an expected data structure when [defining component props](/en/guides/typescript/#component-props).
Zod allows you to create a Typescript type from any schema [using Zod type inference](https://zod.dev/basics#inferring-types). This can be useful for describing an expected data structure when [defining component props](/en/guides/typescript/#component-props).

The following example create a `User` type based on the previous schema:

Expand All @@ -82,13 +82,11 @@ type User = z.infer<typeof user>;

#### Using Zod methods

Zod provides various [schema methods](https://v3.zod.dev/?id=schema-methods) to customize error messages, transform data, or create custom validation logics.
Zod provides various schema methods to [customize error messages](https://zod.dev/error-customization), [transform data](https://zod.dev/api#transforms), or create [custom validation logics](https://zod.dev/api#refinements).

```ts
// Customize the error message
const nonEmptyStrings = z.string().array().nonempty({
message: "Can't be empty!",
});
const nonEmptyStrings = z.array(z.string()).nonempty("Can't be empty!");

// Validate a data from a schema
nonEmptyStrings.parse([]); // will throws our custom error
Expand All @@ -102,7 +100,7 @@ const decorativeImg = z.string().transform((value) => {
const constrainedString = z
.string()
.refine((val) => val.length > 0 && val.length <= 255, {
message: "Must be between 1 and 255 characters.",
error: "Must be between 1 and 255 characters.",
});
```

Expand Down