Skip to content

Commit 427875d

Browse files
BalastrongBalastrong
authored
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
1 parent 403ea0f commit 427875d

File tree

13 files changed

+171
-58
lines changed

13 files changed

+171
-58
lines changed

‎packages/form-core/src/types.ts

+8
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,14 @@ export type Validator<Type, Fn = unknown> = () => {
99
validateAsync(options: { value: Type }, fn: Fn): Promise<ValidationError>
1010
}
1111

12+
/**
13+
* Parameters in common for all validator adapters, making it easier to swap adapter
14+
* @private
15+
*/
16+
export type ValidatorAdapterParams<TError = unknown> = {
17+
transformErrors?: (errors: TError[]) => ValidationError
18+
}
19+
1220
/**
1321
* "server" is only intended for SSR/SSG validation and should not execute anything
1422
* @private

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

+1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export * from './validator'
2+
export * from './types'

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

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import type { valibotValidator } from './validator'
2+
3+
/**
4+
* Utility to define your Form type as `FormApi<FormData, ValibotValidator>`
5+
*/
6+
export type ValibotValidator = ReturnType<typeof valibotValidator>

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

+15-13
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
1-
import { safeParse, safeParseAsync } from 'valibot'
2-
import type { BaseIssue, BaseSchema, BaseSchemaAsync } from 'valibot'
3-
import type { ValidationError, Validator } from '@tanstack/form-core'
1+
import {
2+
type GenericIssue,
3+
type GenericSchema,
4+
type GenericSchemaAsync,
5+
safeParse,
6+
safeParseAsync,
7+
} from 'valibot'
8+
import type { Validator, ValidatorAdapterParams } from '@tanstack/form-core'
49

5-
type Params = {
6-
transformErrors?: (errors: BaseIssue<unknown>[]) => ValidationError
7-
}
10+
type Params = ValidatorAdapterParams<GenericIssue>
811

9-
export const valibotValidator = (params: Params = {}) =>
10-
(() => {
12+
export const valibotValidator =
13+
(
14+
params: Params = {},
15+
): Validator<unknown, GenericSchema | GenericSchemaAsync> =>
16+
() => {
1117
return {
1218
validate({ value }, fn) {
1319
if (fn.async) return
@@ -27,8 +33,4 @@ export const valibotValidator = (params: Params = {}) =>
2733
return result.issues.map((i) => i.message).join(', ')
2834
},
2935
}
30-
}) as Validator<
31-
unknown,
32-
| BaseSchema<unknown, unknown, BaseIssue<unknown>>
33-
| BaseSchemaAsync<unknown, unknown, BaseIssue<unknown>>
34-
>
36+
}

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

+36
Original file line numberDiff line numberDiff line change
@@ -159,4 +159,40 @@ describe('valibot field api', () => {
159159
field.setValue('aaa')
160160
expect(field.getMeta().errors).toEqual(['UUID'])
161161
})
162+
163+
it('should transform errors to display only the first error message with an async validator', async () => {
164+
vi.useFakeTimers()
165+
const form = new FormApi({
166+
defaultValues: {
167+
name: '',
168+
},
169+
})
170+
171+
const field = new FieldApi({
172+
form,
173+
validatorAdapter: valibotValidator({
174+
transformErrors: (errors) => errors[0]?.message,
175+
}),
176+
name: 'name',
177+
validators: {
178+
onChange: v.pipe(
179+
v.string(),
180+
v.minLength(3, 'You must have a length of at least 3'),
181+
v.uuid('UUID'),
182+
),
183+
},
184+
})
185+
186+
field.mount()
187+
188+
expect(field.getMeta().errors).toEqual([])
189+
field.setValue('aa')
190+
await vi.advanceTimersByTimeAsync(10)
191+
expect(field.getMeta().errors).toEqual([
192+
'You must have a length of at least 3',
193+
])
194+
field.setValue('aaa')
195+
await vi.advanceTimersByTimeAsync(10)
196+
expect(field.getMeta().errors).toEqual(['UUID'])
197+
})
162198
})

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

+1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export * from './validator'
2+
export * from './types'

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

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import type { yupValidator } from './validator'
2+
3+
/**
4+
* Utility to define your Form type as `FormApi<FormData, YupValidator>`
5+
*/
6+
export type YupValidator = ReturnType<typeof yupValidator>

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

+5-10
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
1+
import type { Validator, ValidatorAdapterParams } from '@tanstack/form-core'
12
import type { AnySchema, ValidationError as YupError } from 'yup'
2-
import type { ValidationError } from '@tanstack/form-core'
33

4-
type Params = {
5-
transformErrors?: (errors: string[]) => ValidationError
6-
}
4+
type Params = ValidatorAdapterParams<string>
75

86
export const yupValidator =
9-
(params: Params = {}) =>
7+
(params: Params = {}): Validator<unknown, AnySchema> =>
108
() => {
119
return {
12-
validate({ value }: { value: unknown }, fn: AnySchema): ValidationError {
10+
validate({ value }, fn) {
1311
try {
1412
fn.validateSync(value)
1513
return
@@ -21,10 +19,7 @@ export const yupValidator =
2119
return e.errors.join(', ')
2220
}
2321
},
24-
async validateAsync(
25-
{ value }: { value: unknown },
26-
fn: AnySchema,
27-
): Promise<ValidationError> {
22+
async validateAsync({ value }, fn) {
2823
try {
2924
await fn.validate(value)
3025
return

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

+35
Original file line numberDiff line numberDiff line change
@@ -154,4 +154,39 @@ describe('yup field api', () => {
154154
field.setValue('aaa')
155155
expect(field.getMeta().errors).toEqual(['UUID'])
156156
})
157+
158+
it('should transform errors to display only the first error message with an async validator', async () => {
159+
vi.useFakeTimers()
160+
const form = new FormApi({
161+
defaultValues: {
162+
name: '',
163+
},
164+
})
165+
166+
const field = new FieldApi({
167+
form,
168+
validatorAdapter: yupValidator({
169+
transformErrors: (errors) => errors[0],
170+
}),
171+
name: 'name',
172+
validators: {
173+
onChangeAsync: yup
174+
.string()
175+
.min(3, 'You must have a length of at least 3')
176+
.uuid('UUID'),
177+
},
178+
})
179+
180+
field.mount()
181+
182+
expect(field.getMeta().errors).toEqual([])
183+
field.setValue('aa')
184+
await vi.advanceTimersByTimeAsync(10)
185+
expect(field.getMeta().errors).toEqual([
186+
'You must have a length of at least 3',
187+
])
188+
field.setValue('aaa')
189+
await vi.advanceTimersByTimeAsync(10)
190+
expect(field.getMeta().errors).toEqual(['UUID'])
191+
})
157192
})

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

+1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export * from './validator'
2+
export * from './types'

‎packages/zod-form-adapter/src/types.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import type { zodValidator } from './validator'
2+
3+
/**
4+
* Utility to define your Form type as `FormApi<FormData, ZodValidator>`
5+
*/
6+
export type ZodValidator = ReturnType<typeof zodValidator>

‎packages/zod-form-adapter/src/validator.ts

+16-35
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,27 @@
1-
import type { ValidationError } from '@tanstack/form-core'
2-
import type { SafeParseError, ZodIssue, ZodType, ZodTypeAny } from 'zod'
1+
import type { Validator, ValidatorAdapterParams } from '@tanstack/form-core'
2+
import type { ZodIssue, ZodType } from 'zod'
33

4-
type Params = {
5-
transformErrors?: (errors: ZodIssue[]) => ValidationError
6-
}
4+
type Params = ValidatorAdapterParams<ZodIssue>
75

86
export const zodValidator =
9-
(params: Params = {}) =>
7+
(params: Params = {}): Validator<unknown, ZodType> =>
108
() => {
119
return {
12-
validate({ value }: { value: unknown }, fn: ZodType): ValidationError {
13-
// Call Zod on the value here and return the error message
14-
const result = (fn as ZodTypeAny).safeParse(value)
15-
if (!result.success) {
16-
if (params.transformErrors) {
17-
return params.transformErrors(
18-
(result as SafeParseError<any>).error.issues,
19-
)
20-
}
21-
return (result as SafeParseError<any>).error.issues
22-
.map((issue) => issue.message)
23-
.join(', ')
10+
validate({ value }, fn) {
11+
const result = fn.safeParse(value)
12+
if (result.success) return
13+
if (params.transformErrors) {
14+
return params.transformErrors(result.error.issues)
2415
}
25-
return
16+
return result.error.issues.map((issue) => issue.message).join(', ')
2617
},
27-
async validateAsync(
28-
{ value }: { value: unknown },
29-
fn: ZodType,
30-
): Promise<ValidationError> {
31-
// Call Zod on the value here and return the error message
32-
const result = await (fn as ZodTypeAny).safeParseAsync(value)
33-
if (!result.success) {
34-
if (params.transformErrors) {
35-
return params.transformErrors(
36-
(result as SafeParseError<any>).error.issues,
37-
)
38-
}
39-
return (result as SafeParseError<any>).error.issues
40-
.map((issue) => issue.message)
41-
.join(', ')
18+
async validateAsync({ value }, fn) {
19+
const result = await fn.safeParseAsync(value)
20+
if (result.success) return
21+
if (params.transformErrors) {
22+
return params.transformErrors(result.error.issues)
4223
}
43-
return
24+
return result.error.issues.map((issue) => issue.message).join(', ')
4425
},
4526
}
4627
}

‎packages/zod-form-adapter/tests/FieldApi.spec.ts

+35
Original file line numberDiff line numberDiff line change
@@ -158,4 +158,39 @@ describe('zod field api', () => {
158158
field.setValue('aaa')
159159
expect(field.getMeta().errors).toEqual(['UUID'])
160160
})
161+
162+
it('should transform errors to display only the first error message with an async validator', async () => {
163+
vi.useFakeTimers()
164+
const form = new FormApi({
165+
defaultValues: {
166+
name: '',
167+
},
168+
})
169+
170+
const field = new FieldApi({
171+
form,
172+
validatorAdapter: zodValidator({
173+
transformErrors: (errors) => errors[0]?.message,
174+
}),
175+
name: 'name',
176+
validators: {
177+
onChangeAsync: z
178+
.string()
179+
.min(3, 'You must have a length of at least 3')
180+
.uuid('UUID'),
181+
},
182+
})
183+
184+
field.mount()
185+
186+
expect(field.getMeta().errors).toEqual([])
187+
field.setValue('aa')
188+
await vi.advanceTimersByTimeAsync(10)
189+
expect(field.getMeta().errors).toEqual([
190+
'You must have a length of at least 3',
191+
])
192+
field.setValue('aaa')
193+
await vi.advanceTimersByTimeAsync(10)
194+
expect(field.getMeta().errors).toEqual(['UUID'])
195+
})
161196
})

0 commit comments

Comments
 (0)