refactor(adapters): improve coherence and expose return types (#911)

* refactor: define common params for validator adapters in form-code

* refactor: simplify types on validators

* test: add unit tests for async trasnform

* feat: expose validator types

* docs: typo

* docs: types

Author: Balastrong

packages/form-core/src/types.ts

@@ -9,6 +9,14 @@ export type Validator<Type, Fn = unknown> = () => {
   validateAsync(options: { value: Type }, fn: Fn): Promise<ValidationError>
 }
 
+/**
+ * Parameters in common for all validator adapters, making it easier to swap adapter
+ * @private
+ */
+export type ValidatorAdapterParams<TError = unknown> = {
+  transformErrors?: (errors: TError[]) => ValidationError
+}
+
 /**
  * "server" is only intended for SSR/SSG validation and should not execute anything
  * @private

packages/valibot-form-adapter/src/index.ts

@@ -1 +1,2 @@
 export * from './validator'
+export * from './types'

packages/valibot-form-adapter/src/types.ts

@@ -0,0 +1,6 @@
+import type { valibotValidator } from './validator'
+
+/**
+ * Utility to define your Form type as `FormApi<FormData, ValibotValidator>`
+ */
+export type ValibotValidator = ReturnType<typeof valibotValidator>

packages/valibot-form-adapter/src/validator.ts

@@ -1,13 +1,19 @@
-import { safeParse, safeParseAsync } from 'valibot'
-import type { BaseIssue, BaseSchema, BaseSchemaAsync } from 'valibot'
-import type { ValidationError, Validator } from '@tanstack/form-core'
+import {
+  type GenericIssue,
+  type GenericSchema,
+  type GenericSchemaAsync,
+  safeParse,
+  safeParseAsync,
+} from 'valibot'
+import type { Validator, ValidatorAdapterParams } from '@tanstack/form-core'
 
-type Params = {
-  transformErrors?: (errors: BaseIssue<unknown>[]) => ValidationError
-}
+type Params = ValidatorAdapterParams<GenericIssue>
 
-export const valibotValidator = (params: Params = {}) =>
-  (() => {
+export const valibotValidator =
+  (
+    params: Params = {},
+  ): Validator<unknown, GenericSchema | GenericSchemaAsync> =>
+  () => {
     return {
       validate({ value }, fn) {
         if (fn.async) return
@@ -27,8 +33,4 @@ export const valibotValidator = (params: Params = {}) =>
         return result.issues.map((i) => i.message).join(', ')
       },
     }
-  }) as Validator<
-    unknown,
-    | BaseSchema<unknown, unknown, BaseIssue<unknown>>
-    | BaseSchemaAsync<unknown, unknown, BaseIssue<unknown>>
-  >
+  }

packages/valibot-form-adapter/tests/FieldApi.spec.ts

@@ -159,4 +159,40 @@ describe('valibot field api', () => {
     field.setValue('aaa')
     expect(field.getMeta().errors).toEqual(['UUID'])
   })
+
+  it('should transform errors to display only the first error message with an async validator', async () => {
+    vi.useFakeTimers()
+    const form = new FormApi({
+      defaultValues: {
+        name: '',
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      validatorAdapter: valibotValidator({
+        transformErrors: (errors) => errors[0]?.message,
+      }),
+      name: 'name',
+      validators: {
+        onChange: v.pipe(
+          v.string(),
+          v.minLength(3, 'You must have a length of at least 3'),
+          v.uuid('UUID'),
+        ),
+      },
+    })
+
+    field.mount()
+
+    expect(field.getMeta().errors).toEqual([])
+    field.setValue('aa')
+    await vi.advanceTimersByTimeAsync(10)
+    expect(field.getMeta().errors).toEqual([
+      'You must have a length of at least 3',
+    ])
+    field.setValue('aaa')
+    await vi.advanceTimersByTimeAsync(10)
+    expect(field.getMeta().errors).toEqual(['UUID'])
+  })
 })

packages/yup-form-adapter/src/index.ts

@@ -1 +1,2 @@
 export * from './validator'
+export * from './types'

packages/yup-form-adapter/src/types.ts

@@ -0,0 +1,6 @@
+import type { yupValidator } from './validator'
+
+/**
+ * Utility to define your Form type as `FormApi<FormData, YupValidator>`
+ */
+export type YupValidator = ReturnType<typeof yupValidator>

packages/yup-form-adapter/src/validator.ts

@@ -1,15 +1,13 @@
+import type { Validator, ValidatorAdapterParams } from '@tanstack/form-core'
 import type { AnySchema, ValidationError as YupError } from 'yup'
-import type { ValidationError } from '@tanstack/form-core'
 
-type Params = {
-  transformErrors?: (errors: string[]) => ValidationError
-}
+type Params = ValidatorAdapterParams<string>
 
 export const yupValidator =
-  (params: Params = {}) =>
+  (params: Params = {}): Validator<unknown, AnySchema> =>
   () => {
     return {
-      validate({ value }: { value: unknown }, fn: AnySchema): ValidationError {
+      validate({ value }, fn) {
         try {
           fn.validateSync(value)
           return
@@ -21,10 +19,7 @@ export const yupValidator =
           return e.errors.join(', ')
         }
       },
-      async validateAsync(
-        { value }: { value: unknown },
-        fn: AnySchema,
-      ): Promise<ValidationError> {
+      async validateAsync({ value }, fn) {
         try {
           await fn.validate(value)
           return

packages/yup-form-adapter/tests/FieldApi.spec.ts

@@ -154,4 +154,39 @@ describe('yup field api', () => {
     field.setValue('aaa')
     expect(field.getMeta().errors).toEqual(['UUID'])
   })
+
+  it('should transform errors to display only the first error message with an async validator', async () => {
+    vi.useFakeTimers()
+    const form = new FormApi({
+      defaultValues: {
+        name: '',
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      validatorAdapter: yupValidator({
+        transformErrors: (errors) => errors[0],
+      }),
+      name: 'name',
+      validators: {
+        onChangeAsync: yup
+          .string()
+          .min(3, 'You must have a length of at least 3')
+          .uuid('UUID'),
+      },
+    })
+
+    field.mount()
+
+    expect(field.getMeta().errors).toEqual([])
+    field.setValue('aa')
+    await vi.advanceTimersByTimeAsync(10)
+    expect(field.getMeta().errors).toEqual([
+      'You must have a length of at least 3',
+    ])
+    field.setValue('aaa')
+    await vi.advanceTimersByTimeAsync(10)
+    expect(field.getMeta().errors).toEqual(['UUID'])
+  })
 })

packages/zod-form-adapter/src/index.ts

@@ -1 +1,2 @@
 export * from './validator'
+export * from './types'