docs: Improve text and Valibot example (#518)

* docs: improve validation adapter text * fix: simplify async Valibot string validation
TanStack · Nov 10, 2023 · 1925b67 · 1925b67
1 parent 0c88ee8
commit 1925b67
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 50 deletions.
diff --git 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
@@ -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
@@ -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<any, any, unknown, unknown> }) {
@@ -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<string>;
-                },
+                  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
@@ -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<any, any, unknown, unknown>
@@ -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<string>
-                },
+                  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
@@ -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<string>
-  },
+    return value.includes('error')
+  }, "No 'error' allowed in first name"),
 ])
 </script>