From 1925b6744b4a1857b492d1f83670a7c331afbb55 Mon Sep 17 00:00:00 2001 From: Fabian Hiller <35291865+fabian-hiller@users.noreply.github.com> Date: Fri, 10 Nov 2023 00:25:16 -0500 Subject: [PATCH] docs: Improve text and Valibot example (#518) * docs: improve validation adapter text * fix: simplify async Valibot string validation --- docs/guides/validation.md | 2 +- docs/installation.md | 2 +- examples/react/valibot/src/index.tsx | 20 ++++---------------- examples/solid/valibot/src/index.tsx | 20 ++++---------------- examples/vue/valibot/src/App.vue | 20 ++++---------------- 5 files changed, 14 insertions(+), 50 deletions(-) diff --git a/docs/guides/validation.md b/docs/guides/validation.md index 2a55de481..5f60a1a48 100644 --- a/docs/guides/validation.md +++ b/docs/guides/validation.md @@ -250,7 +250,7 @@ This will debounce every async call with a 500ms delay. You can even override th 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. -Luckily, we support both of these libraries through official adapters: +Luckily, we support all of these libraries through official adapters: ```bash $ npm install @tanstack/zod-form-adapter zod diff --git a/docs/installation.md b/docs/installation.md index ac67fb734..3cf6dd86d 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -15,7 +15,7 @@ $ yarn add @tanstack/solid-form > Depending on your environment, you might need to add polyfills. If you want to support older browsers, you need to transpile the library from `node_modules` yourselves. -In addition, we support both Zod and Yup as validators through official validator packages: +In addition, we support Zod, Yup, and Valibot as validators through official validator packages: ```bash $ npm i @tanstack/zod-form-adapter zod diff --git a/examples/react/valibot/src/index.tsx b/examples/react/valibot/src/index.tsx index 4e44b5d98..5de0cb430 100644 --- a/examples/react/valibot/src/index.tsx +++ b/examples/react/valibot/src/index.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { createRoot } from "react-dom/client"; import { useForm } from "@tanstack/react-form"; import { valibotValidator } from "@tanstack/valibot-form-adapter"; -import { string, minLength, stringAsync, PipeResult } from "valibot"; +import { customAsync, minLength, string, stringAsync } from "valibot"; import type { FieldApi } from "@tanstack/react-form"; function FieldInfo({ field }: { field: FieldApi }) { @@ -50,22 +50,10 @@ export default function App() { ])} onChangeAsyncDebounceMs={500} onChangeAsync={stringAsync([ - async (value) => { + customAsync(async (value) => { await new Promise((resolve) => setTimeout(resolve, 1000)); - return ( - value.includes("error") - ? { - issues: [ - { - input: value, - validation: "firstName", - message: "No 'error' allowed in first name", - }, - ], - } - : { output: value } - ) as PipeResult; - }, + return value.includes("error"); + }, "No 'error' allowed in first name"), ])} children={(field) => { // Avoid hasty abstractions. Render props are great! diff --git a/examples/solid/valibot/src/index.tsx b/examples/solid/valibot/src/index.tsx index d433937a6..e229876fc 100644 --- a/examples/solid/valibot/src/index.tsx +++ b/examples/solid/valibot/src/index.tsx @@ -3,7 +3,7 @@ import { render } from 'solid-js/web' import { createForm, type FieldApi } from '@tanstack/solid-form' import { valibotValidator } from '@tanstack/valibot-form-adapter' -import { string, minLength, stringAsync, PipeResult } from 'valibot' +import { customAsync, minLength, string, stringAsync } from 'valibot' interface FieldInfoProps { field: FieldApi @@ -54,22 +54,10 @@ function App() { ])} onChangeAsyncDebounceMs={500} onChangeAsync={stringAsync([ - async (value) => { + customAsync(async (value) => { await new Promise((resolve) => setTimeout(resolve, 1000)) - return ( - value.includes('error') - ? { - issues: [ - { - input: value, - validation: 'firstName', - message: "No 'error' allowed in first name", - }, - ], - } - : { output: value } - ) as PipeResult - }, + return value.includes('error') + }, "No 'error' allowed in first name"), ])} children={(field) => { // Avoid hasty abstractions. Render props are great! diff --git a/examples/vue/valibot/src/App.vue b/examples/vue/valibot/src/App.vue index c23dc8b68..eb4199301 100644 --- a/examples/vue/valibot/src/App.vue +++ b/examples/vue/valibot/src/App.vue @@ -2,7 +2,7 @@ import { useForm } from '@tanstack/vue-form' import FieldInfo from './FieldInfo.vue' import { valibotValidator } from '@tanstack/valibot-form-adapter' -import { string, minLength, stringAsync, PipeResult } from 'valibot' +import { customAsync, minLength, string, stringAsync } from 'valibot' const form = useForm({ defaultValues: { @@ -20,22 +20,10 @@ const form = useForm({ form.provideFormContext() const onChangeFirstName = stringAsync([ - async (value) => { + customAsync(async (value) => { await new Promise((resolve) => setTimeout(resolve, 1000)) - return ( - value.includes('error') - ? { - issues: [ - { - input: value, - validation: 'firstName', - message: "No 'error' allowed in first name", - }, - ], - } - : { output: value } - ) as PipeResult - }, + return value.includes('error') + }, "No 'error' allowed in first name"), ])