From f6e677b42ff69ddced4fa9f2a6014c0573e5f84b Mon Sep 17 00:00:00 2001 From: Leonardo Montini Date: Mon, 18 Nov 2024 21:45:50 +0100 Subject: [PATCH] docs: mention standard schema --- docs/framework/angular/guides/validation.md | 57 +++++++++++++++++---- docs/framework/react/guides/ssr.md | 6 +-- docs/framework/react/guides/validation.md | 48 +++++++++++++---- docs/framework/solid/guides/validation.md | 48 +++++++++++++---- docs/framework/vue/guides/validation.md | 53 +++++++++++++++---- 5 files changed, 172 insertions(+), 40 deletions(-) diff --git a/docs/framework/angular/guides/validation.md b/docs/framework/angular/guides/validation.md index d5b2f44b2..8fd2645d1 100644 --- a/docs/framework/angular/guides/validation.md +++ b/docs/framework/angular/guides/validation.md @@ -382,18 +382,57 @@ This will debounce every async call with a 500ms delay. You can even override th > This will run `onChangeAsync` every 1500ms while `onBlurAsync` will run every 500ms. -## Adapter-Based Validation (Zod, Yup, Valibot) +## Validation through Schema Libraries -While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries like [Valibot](https://valibot.dev/), [Yup](https://github.com/jquense/yup), and [Zod](https://zod.dev/) that provide schema-based validation to make shorthand and type-strict validation substantially easier. +While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries that provide schema-based validation to make shorthand and type-strict validation substantially easier. -Luckily, we support all of these libraries through official adapters: +### Standard Schema Libraries + +TanStack Form natively supports all libraries following the [Standard Schema specification](https://github.com/standard-schema/standard-schema), most notably: +- [Valibot](https://valibot.dev/) +- [ArkType](https://arktype.io/) + +To use schemas from these libraries you can simply pass them to the `validators` props as you would do with a custom function: + +```angular-ts +import { z } from 'zod' + +@Component({ + selector: 'app-root', + standalone: true, + imports: [TanStackField], + template: ` + + + + `, +}) +export class AppComponent { + form = injectForm({ + // ... + }) + + z = z + + // ... +} +``` + +### Other Schema Libraries (Zod, Yup) + +We also support other libraries, [Zod](https://zod.dev/) and [Yup](https://github.com/jquense/yup) through an official adapter: ```bash $ npm install @tanstack/zod-form-adapter zod # or $ npm install @tanstack/yup-form-adapter yup -# or -$ npm install @tanstack/valibot-form-adapter valibot ``` Once done, we can add the adapter to the `validator` property on the form or field: @@ -469,18 +508,18 @@ export class AppComponent { } ``` -### Form Level Adapter Validation +### Form Level Schema Validation -You can also use the adapter at the form level: +You can also use a Standard Schema or an adapter at the form level: ```typescript -import { zodValidator } from '@tanstack/zod-form-adapter' +import { zodValidator } from '@tanstack/zod-form-adapter' // Not required for Standard Schema libraries import { z } from 'zod' // ... const form = injectForm({ - validatorAdapter: zodValidator(), + validatorAdapter: zodValidator(), // Not required for Standard Schema libraries validators: { onChange: z.object({ age: z.number().gte(13, 'You must be 13 to make an account'), diff --git a/docs/framework/react/guides/ssr.md b/docs/framework/react/guides/ssr.md index 159797675..8f31d680e 100644 --- a/docs/framework/react/guides/ssr.md +++ b/docs/framework/react/guides/ssr.md @@ -20,7 +20,7 @@ This section focuses on integrating TanStack Form with TanStack Start. - Start a new `TanStack Start` project, following the steps in the [TanStack Start Quickstart Guide](https://tanstack.com/router/latest/docs/framework/react/guide/tanstack-start) - Install `@tanstack/react-form` -- Install any [form validator](/form/latest/docs/framework/react/guides/validation#adapter-based-validation-zod-yup-valibot) of your choice. [Optional] +- Install any [form validator](/form/latest/docs/framework/react/guides/validation#validation-through-schema-libraries) of your choice. [Optional] ### Start integration @@ -169,7 +169,7 @@ This section focuses on integrating TanStack Form with `Next.js`, particularly u - Start a new `Next.js` project, following the steps in the [Next.js Documentation](https://nextjs.org/docs/getting-started/installation). Ensure you select `yes` for `Would you like to use App Router?` during the setup to access all new features provided by Next.js. - Install `@tanstack/react-form` -- Install any [form validator](/form/latest/docs/framework/react/guides/validation#adapter-based-validation-zod-yup-valibot) of your choice. [Optional] +- Install any [form validator](/form/latest/docs/framework/react/guides/validation#validation-through-schema-libraries) of your choice. [Optional] ## App Router integration @@ -315,7 +315,7 @@ Here, we're using [React's `useActionState` hook](https://unicorn-utterances.com - Start a new `Remix` project, following the steps in the [Remix Documentation](https://remix.run/docs/en/main/start/quickstart). - Install `@tanstack/react-form` -- Install any [form validator](/form/latest/docs/framework/react/guides/validation#adapter-based-validation-zod-yup-valibot) of your choice. [Optional] +- Install any [form validator](/form/latest/docs/framework/react/guides/validation#validation-through-schema-libraries) of your choice. [Optional] ## Remix integration diff --git a/docs/framework/react/guides/validation.md b/docs/framework/react/guides/validation.md index 21a6d4424..f96f36274 100644 --- a/docs/framework/react/guides/validation.md +++ b/docs/framework/react/guides/validation.md @@ -413,18 +413,48 @@ This will debounce every async call with a 500ms delay. You can even override th > This will run `onChangeAsync` every 1500ms while `onBlurAsync` will run every 500ms. -## Adapter-Based Validation (Zod, Yup, Valibot) +## Validation through Schema Libraries -While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries like [Valibot](https://valibot.dev/), [Yup](https://github.com/jquense/yup), and [Zod](https://zod.dev/) that provide schema-based validation to make shorthand and type-strict validation substantially easier. +While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries that provide schema-based validation to make shorthand and type-strict validation substantially easier. -Luckily, we support all of these libraries through official adapters: +### Standard Schema Libraries + +TanStack Form natively supports all libraries following the [Standard Schema specification](https://github.com/standard-schema/standard-schema), most notably: +- [Valibot](https://valibot.dev/) +- [ArkType](https://arktype.io/) + +To use schemas from these libraries you can simply pass them to the `validators` props as you would do with a custom function: + +```tsx +import { z } from 'zod' + +// ... + +const form = useForm({ + // ... +}) + + { + return <>{/* ... */} + }} +/> +``` + + +### Other Schema Libraries (Zod, Yup) + +We also support other libraries, [Zod](https://zod.dev/) and [Yup](https://github.com/jquense/yup) through an official adapter: ```bash $ npm install @tanstack/zod-form-adapter zod # or $ npm install @tanstack/yup-form-adapter yup -# or -$ npm install @tanstack/valibot-form-adapter valibot ``` Once done, we can add the adapter to the `validator` property on the form or field: @@ -477,12 +507,12 @@ These adapters also support async operations using the proper property names: /> ``` -### Form Level Adapter Validation +### Form Level Schema Validation -You can also use the adapter at the form level: +You can also use a Standard Schema or an adapter at the form level: ```tsx -import { zodValidator } from '@tanstack/zod-form-adapter' +import { zodValidator } from '@tanstack/zod-form-adapter' // Not required for Standard Schema libraries import { z } from 'zod' // ... @@ -492,7 +522,7 @@ const formSchema = z.object({ }) const form = useForm({ - validatorAdapter: zodValidator(), + validatorAdapter: zodValidator(), // Not required for Standard Schema libraries validators: { onChange: formSchema }, diff --git a/docs/framework/solid/guides/validation.md b/docs/framework/solid/guides/validation.md index 50ef40a7a..52662a5ec 100644 --- a/docs/framework/solid/guides/validation.md +++ b/docs/framework/solid/guides/validation.md @@ -312,18 +312,47 @@ This will debounce every async call with a 500ms delay. You can even override th > This will run `onChangeAsync` every 1500ms while `onBlurAsync` will run every 500ms. -## Adapter-Based Validation (Zod, Yup, Valibot) +## Validation through Schema Libraries -While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries like [Valibot](https://valibot.dev/), [Yup](https://github.com/jquense/yup), and [Zod](https://zod.dev/) that provide schema-based validation to make shorthand and type-strict validation substantially easier. +While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries that provide schema-based validation to make shorthand and type-strict validation substantially easier. -Luckily, we support all of these libraries through official adapters: +### Standard Schema Libraries + +TanStack Form natively supports all libraries following the [Standard Schema specification](https://github.com/standard-schema/standard-schema), most notably: +- [Valibot](https://valibot.dev/) +- [ArkType](https://arktype.io/) + +To use schemas from these libraries you can simply pass them to the `validators` props as you would do with a custom function: + +```tsx +import { z } from 'zod' + +// ... + +const form = createForm(() => ({ + // ... +})); + + { + return <>{/* ... */} + }} +/> +``` + +### Other Schema Libraries (Zod, Yup) + +We also support other libraries, [Zod](https://zod.dev/) and [Yup](https://github.com/jquense/yup) through an official adapter: ```bash $ npm install @tanstack/zod-form-adapter zod # or $ npm install @tanstack/yup-form-adapter yup -# or -$ npm install @tanstack/valibot-form-adapter valibot ``` Once done, we can add the adapter to the `validator` property on the form or field: @@ -376,19 +405,18 @@ These adapters also support async operations using the proper property names: /> ``` -### Form Level Adapter Validation +### Form Level Schema Validation - -You can also use the adapter at the form level: +You can also use a Standard Schema or an adapter at the form level: ```tsx -import { zodValidator } from '@tanstack/zod-form-adapter' +import { zodValidator } from '@tanstack/zod-form-adapter' // Not required for Standard Schema libraries import { z } from 'zod' // ... const form = createForm(() => ({ - validatorAdapter: zodValidator(), + validatorAdapter: zodValidator(), // Not required for Standard Schema libraries validators: { onChange: z.object({ age: z.number().gte(13, 'You must be 13 to make an account'), diff --git a/docs/framework/vue/guides/validation.md b/docs/framework/vue/guides/validation.md index a9aea2c5f..ba90a418a 100644 --- a/docs/framework/vue/guides/validation.md +++ b/docs/framework/vue/guides/validation.md @@ -322,18 +322,53 @@ This will debounce every async call with a 500ms delay. You can even override th This will run `onChangeAsync` every 1500ms while `onBlurAsync` will run every 500ms. -## Adapter-Based Validation (Zod, Yup, Valibot) +## Validation through Schema Libraries -While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries like [Valibot](https://valibot.dev/), [Yup](https://github.com/jquense/yup), and [Zod](https://zod.dev/) that provide schema-based validation to make shorthand and type-strict validation substantially easier. +While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries that provide schema-based validation to make shorthand and type-strict validation substantially easier. -Luckily, we support all of these libraries through official adapters: +### Standard Schema Libraries + +TanStack Form natively supports all libraries following the [Standard Schema specification](https://github.com/standard-schema/standard-schema), most notably: +- [Valibot](https://valibot.dev/) +- [ArkType](https://arktype.io/) + +To use schemas from these libraries you can simply pass them to the `validators` props as you would do with a custom function: + +```vue + + + +``` + +### Other Schema Libraries (Zod, Yup) + +We also support other libraries, [Zod](https://zod.dev/) and [Yup](https://github.com/jquense/yup) through an official adapter: ```bash $ npm install @tanstack/zod-form-adapter zod # or $ npm install @tanstack/yup-form-adapter yup -# or -$ npm install @tanstack/valibot-form-adapter valibot ``` Once done, we can add the adapter to the `validator` property on the form or field: @@ -397,18 +432,18 @@ These adapters also support async operations using the proper property names: ``` -### Form Level Adapter Validation +### Form Level Schema Validation -You can also use the adapter at the form level: +You can also use a Standard Schema or an adapter at the form level: ```typescript -import { zodValidator } from '@tanstack/zod-form-adapter' +import { zodValidator } from '@tanstack/zod-form-adapter' // Not required for Standard Schema libraries import { z } from 'zod' // ... const form = useForm({ - validatorAdapter: zodValidator(), + validatorAdapter: zodValidator(), // Not required for Standard Schema libraries validators: { onChange: z.object({ age: z.number().gte(13, 'You must be 13 to make an account'),