@tanstack/react-form 0.42.1 → 0.43.0

package/src/remix/createServerValidate.ts

@@ -1,83 +1,111 @@
 import { decode } from 'decode-formdata'
+import {
+  isGlobalFormValidationError,
+  isStandardSchemaValidator,
+  standardSchemaValidators,
+} from '@tanstack/form-core'
 import { ServerValidateError } from './error'
 import type {
+  FormAsyncValidateOrFn,
   FormOptions,
-  FormValidationError,
-  ValidationError,
-  Validator,
+  FormValidateAsyncFn,
+  FormValidateOrFn,
+  UnwrapFormAsyncValidateOrFn,
 } from '@tanstack/form-core'
 import type { ServerFormState } from './types'
 
-type OnServerValidateFn<TFormData> = (props: {
-  value: TFormData
-}) => ValidationError | Promise<ValidationError>
-
-type OnServerValidateOrFn<
-  TFormData,
-  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
-> =
-  TFormValidator extends Validator<TFormData, infer FFN>
-    ? FFN | OnServerValidateFn<TFormData>
-    : OnServerValidateFn<TFormData>
-
 interface CreateServerValidateOptions<
   TFormData,
-  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
-> extends FormOptions<TFormData, TFormValidator> {
-  onServerValidate: OnServerValidateOrFn<TFormData, TFormValidator>
-}
-
-const isFormValidationError = (
-  error: unknown,
-): error is FormValidationError<unknown> => {
-  return typeof error === 'object'
+  TOnMount extends undefined | FormValidateOrFn<TFormData>,
+  TOnChange extends undefined | FormValidateOrFn<TFormData>,
+  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnBlur extends undefined | FormValidateOrFn<TFormData>,
+  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
+  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+> extends FormOptions<
+    TFormData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnServer
+  > {
+  onServerValidate: TOnServer
 }
 
 export const createServerValidate =
   <
     TFormData,
-    TFormValidator extends
-      | Validator<TFormData, unknown>
-      | undefined = undefined,
+    TOnMount extends undefined | FormValidateOrFn<TFormData>,
+    TOnChange extends undefined | FormValidateOrFn<TFormData>,
+    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnBlur extends undefined | FormValidateOrFn<TFormData>,
+    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
+    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
   >(
-    defaultOpts: CreateServerValidateOptions<TFormData, TFormValidator>,
+    defaultOpts: CreateServerValidateOptions<
+      TFormData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnServer
+    >,
   ) =>
   async (formData: FormData, info?: Parameters<typeof decode>[1]) => {
-    const { validatorAdapter, onServerValidate } = defaultOpts
+    const { onServerValidate } = defaultOpts
 
-    const runValidator = async (propsValue: {
+    const runValidator = async ({
+      value,
+      validationSource,
+    }: {
       value: TFormData
       validationSource: 'form'
     }) => {
-      if (validatorAdapter && typeof onServerValidate !== 'function') {
-        return validatorAdapter().validateAsync(propsValue, onServerValidate)
+      if (isStandardSchemaValidator(onServerValidate)) {
+        return await standardSchemaValidators.validateAsync(
+          { value, validationSource },
+          onServerValidate,
+        )
       }
-
-      return (onServerValidate as OnServerValidateFn<TFormData>)(propsValue)
+      return (onServerValidate as FormValidateAsyncFn<TFormData>)({
+        value,
+        signal: undefined as never,
+        formApi: undefined as never,
+      })
     }
 
     const values = decode(formData, info) as never as TFormData
 
-    const onServerError = await runValidator({
+    const onServerError = (await runValidator({
       value: values,
       validationSource: 'form',
-    })
+    })) as UnwrapFormAsyncValidateOrFn<TOnServer> | undefined
 
     if (!onServerError) return
 
-    const onServerErrorStr =
-      onServerError &&
-      typeof onServerError !== 'string' &&
-      isFormValidationError(onServerError)
+    const onServerErrorVal = (
+      isGlobalFormValidationError(onServerError)
         ? onServerError.form
         : onServerError
+    ) as UnwrapFormAsyncValidateOrFn<TOnServer>
 
-    const formState: ServerFormState<TFormData> = {
+    const formState: ServerFormState<TFormData, TOnServer> = {
       errorMap: {
         onServer: onServerError,
       },
       values,
-      errors: onServerErrorStr ? [onServerErrorStr] : [],
+      errors: onServerErrorVal ? [onServerErrorVal] : [],
     }
 
     throw new ServerValidateError({
@@ -85,7 +113,7 @@ export const createServerValidate =
     })
   }
 
-export const initialFormState: ServerFormState<any> = {
+export const initialFormState: ServerFormState<any, undefined> = {
   errorMap: {
     onServer: undefined,
   },

package/src/remix/error.ts

@@ -1,16 +1,23 @@
 import type { ServerFormState } from './types'
+import type { FormAsyncValidateOrFn } from '@tanstack/form-core'
 
-interface ServerValidateErrorState<TFormData> {
-  formState: ServerFormState<TFormData>
+interface ServerValidateErrorState<
+  TFormData,
+  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+> {
+  formState: ServerFormState<TFormData, TOnServer>
 }
 
-export class ServerValidateError<TFormData>
+export class ServerValidateError<
+    TFormData,
+    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+  >
   extends Error
-  implements ServerValidateErrorState<TFormData>
+  implements ServerValidateErrorState<TFormData, TOnServer>
 {
-  formState: ServerFormState<TFormData>
+  formState: ServerFormState<TFormData, TOnServer>
 
-  constructor(options: ServerValidateErrorState<TFormData>) {
+  constructor(options: ServerValidateErrorState<TFormData, TOnServer>) {
     super('Your form has errors. Please check the fields and try again.')
     this.name = 'ServerValidateError'
     this.formState = options.formState

package/src/remix/types.ts

@@ -1,6 +1,19 @@
-import type { FormState } from '@tanstack/form-core'
+import type { FormAsyncValidateOrFn, FormState } from '@tanstack/form-core'
 
-export type ServerFormState<TFormData> = Pick<
-  FormState<TFormData>,
+export type ServerFormState<
+  TFormData,
+  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+> = Pick<
+  FormState<
+    TFormData,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    TOnServer
+  >,
   'values' | 'errors' | 'errorMap'
 >

package/src/start/createServerValidate.tsx

@@ -1,89 +1,115 @@
 import { decode } from 'decode-formdata'
+import {
+  isGlobalFormValidationError,
+  isStandardSchemaValidator,
+  standardSchemaValidators,
+} from '@tanstack/form-core'
+import { getHeader } from 'vinxi/http'
 import { _tanstackInternalsCookie } from './utils'
 import { ServerValidateError } from './error'
 import type {
+  FormAsyncValidateOrFn,
   FormOptions,
-  FormValidationError,
-  ValidationError,
-  Validator,
+  FormValidateAsyncFn,
+  FormValidateOrFn,
+  UnwrapFormAsyncValidateOrFn,
 } from '@tanstack/form-core'
-import type { FetchFn } from '@tanstack/start'
 import type { ServerFormState } from './types'
 
-type Ctx = Parameters<FetchFn<FormData, unknown>>[1]
-
-type OnServerValidateFn<TFormData> = (props: {
-  value: TFormData
-}) => ValidationError | Promise<ValidationError>
-
-type OnServerValidateOrFn<
-  TFormData,
-  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
-> =
-  TFormValidator extends Validator<TFormData, infer FFN>
-    ? FFN | OnServerValidateFn<TFormData>
-    : OnServerValidateFn<TFormData>
-
 interface CreateServerValidateOptions<
   TFormData,
-  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
-> extends FormOptions<TFormData, TFormValidator> {
-  onServerValidate: OnServerValidateOrFn<TFormData, TFormValidator>
-}
-
-const isFormValidationError = (
-  error: unknown,
-): error is FormValidationError<unknown> => {
-  return typeof error === 'object'
+  TOnMount extends undefined | FormValidateOrFn<TFormData>,
+  TOnChange extends undefined | FormValidateOrFn<TFormData>,
+  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnBlur extends undefined | FormValidateOrFn<TFormData>,
+  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
+  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+> extends FormOptions<
+    TFormData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnServer
+  > {
+  onServerValidate: TOnServer
 }
 
 export const createServerValidate =
   <
     TFormData,
-    TFormValidator extends
-      | Validator<TFormData, unknown>
-      | undefined = undefined,
+    TOnMount extends undefined | FormValidateOrFn<TFormData>,
+    TOnChange extends undefined | FormValidateOrFn<TFormData>,
+    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnBlur extends undefined | FormValidateOrFn<TFormData>,
+    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
+    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
   >(
-    defaultOpts: CreateServerValidateOptions<TFormData, TFormValidator>,
+    defaultOpts: CreateServerValidateOptions<
+      TFormData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnServer
+    >,
   ) =>
-  async (ctx: Ctx, formData: FormData, info?: Parameters<typeof decode>[1]) => {
-    const { validatorAdapter, onServerValidate } = defaultOpts
+  async (formData: FormData, info?: Parameters<typeof decode>[1]) => {
+    const { onServerValidate } = defaultOpts
 
-    const runValidator = async (propsValue: {
+    const runValidator = async ({
+      value,
+      validationSource,
+    }: {
       value: TFormData
       validationSource: 'form'
     }) => {
-      if (validatorAdapter && typeof onServerValidate !== 'function') {
-        return validatorAdapter().validateAsync(propsValue, onServerValidate)
+      if (isStandardSchemaValidator(onServerValidate)) {
+        return await standardSchemaValidators.validateAsync(
+          { value, validationSource },
+          onServerValidate,
+        )
       }
-
-      return (onServerValidate as OnServerValidateFn<TFormData>)(propsValue)
+      return (onServerValidate as FormValidateAsyncFn<TFormData>)({
+        value,
+        signal: undefined as never,
+        formApi: undefined as never,
+      })
     }
 
-    const referer = ctx.request.headers.get('referer')!
+    const referer = getHeader('referer')!
 
     const data = decode(formData, info) as never as TFormData
 
-    const onServerError = await runValidator({
+    const onServerError = (await runValidator({
       value: data,
       validationSource: 'form',
-    })
+    })) as UnwrapFormAsyncValidateOrFn<TOnServer> | undefined
 
     if (!onServerError) return
 
-    const onServerErrorStr =
-      onServerError &&
-      typeof onServerError !== 'string' &&
-      isFormValidationError(onServerError)
+    const onServerErrorVal = (
+      isGlobalFormValidationError(onServerError)
         ? onServerError.form
         : onServerError
+    ) as UnwrapFormAsyncValidateOrFn<TOnServer>
 
-    const formState: ServerFormState<TFormData> = {
+    const formState: ServerFormState<TFormData, TOnServer> = {
       errorMap: {
         onServer: onServerError,
       },
       values: data,
-      errors: onServerErrorStr ? [onServerErrorStr] : [],
+      errors: onServerErrorVal ? [onServerErrorVal] : [],
     }
 
     const cookie = await _tanstackInternalsCookie.serialize(formState)

package/src/start/error.ts

@@ -1,18 +1,25 @@
 import type { ServerFormState } from './types'
+import type { FormAsyncValidateOrFn } from '@tanstack/form-core'
 
-interface ServerValidateErrorState<TFormData> {
-  formState: ServerFormState<TFormData>
+interface ServerValidateErrorState<
+  TFormData,
+  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+> {
+  formState: ServerFormState<TFormData, TOnServer>
   response: Response
 }
 
-export class ServerValidateError<TFormData>
+export class ServerValidateError<
+    TFormData,
+    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+  >
   extends Error
-  implements ServerValidateErrorState<TFormData>
+  implements ServerValidateErrorState<TFormData, TOnServer>
 {
+  formState: ServerFormState<TFormData, TOnServer>
   response: Response
-  formState: ServerFormState<TFormData>
 
-  constructor(options: ServerValidateErrorState<TFormData>) {
+  constructor(options: ServerValidateErrorState<TFormData, TOnServer>) {
     super('Your form has errors. Please check the fields and try again.')
     this.name = 'ServerValidateError'
     this.response = options.response

package/src/start/getFormData.tsx

@@ -1,5 +1,5 @@
+import { getHeader, removeResponseHeader } from 'vinxi/http'
 import { _tanstackInternalsCookie } from './utils'
-import type { FetchFnCtx } from '@tanstack/start'
 import type { ServerFormState } from './types'
 
 export const initialFormState = {
@@ -9,12 +9,12 @@ export const initialFormState = {
   errors: [],
 }
 
-export const getFormData = async (ctx: FetchFnCtx) => {
-  const data = (await _tanstackInternalsCookie.parse(
-    ctx.request.headers.get('Cookie'),
-  )) as undefined | ServerFormState<any>
+export const getFormData = async () => {
+  const data = (await _tanstackInternalsCookie.parse(getHeader('Cookie')!)) as
+    | undefined
+    | ServerFormState<any, undefined>
   // Delete the cookie before it hits the client again¸
-  ctx.request.headers.delete('Cookie')
+  removeResponseHeader('Cookie')
   if (!data) return initialFormState
   return data
 }

package/src/start/types.ts

@@ -1,6 +1,19 @@
-import type { FormState } from '@tanstack/form-core'
+import type { FormAsyncValidateOrFn, FormState } from '@tanstack/form-core'
 
-export type ServerFormState<TFormData> = Pick<
-  FormState<TFormData>,
+export type ServerFormState<
+  TFormData,
+  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+> = Pick<
+  FormState<
+    TFormData,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    TOnServer
+  >,
   'values' | 'errors' | 'errorMap'
 >

package/src/types.ts

@@ -2,9 +2,11 @@ import type {
   DeepKeys,
   DeepValue,
   FieldApiOptions,
-  Validator,
+  FieldAsyncValidateOrFn,
+  FieldValidateOrFn,
+  FormAsyncValidateOrFn,
+  FormValidateOrFn,
 } from '@tanstack/form-core'
-import type { FunctionComponent } from 'react'
 
 /**
  * The field options.
@@ -12,19 +14,47 @@ import type { FunctionComponent } from 'react'
 export type UseFieldOptions<
   TParentData,
   TName extends DeepKeys<TParentData>,
-  TFieldValidator extends
-    | Validator<DeepValue<TParentData, TName>, unknown>
-    | undefined = undefined,
-  TFormValidator extends
-    | Validator<TParentData, unknown>
-    | undefined = undefined,
-  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+  TData extends DeepValue<TParentData, TName>,
+  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+  TOnChangeAsync extends
+    | undefined
+    | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+  TOnBlurAsync extends
+    | undefined
+    | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+  TOnSubmitAsync extends
+    | undefined
+    | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
+  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
+  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
+  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
+  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
 > = FieldApiOptions<
   TParentData,
   TName,
-  TFieldValidator,
-  TFormValidator,
-  TData
+  TData,
+  TOnMount,
+  TOnChange,
+  TOnChangeAsync,
+  TOnBlur,
+  TOnBlurAsync,
+  TOnSubmit,
+  TOnSubmitAsync,
+  TFormOnMount,
+  TFormOnChange,
+  TFormOnChangeAsync,
+  TFormOnBlur,
+  TFormOnBlurAsync,
+  TFormOnSubmit,
+  TFormOnSubmitAsync,
+  TFormOnServer
 > & {
   mode?: 'value' | 'array'
 }