@tanstack/react-form 0.10.3 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (140) hide show
  1. package/dist/cjs/createFormFactory.d.ts +11 -0
  2. package/dist/cjs/formContext.d.ts +10 -0
  3. package/dist/cjs/index.cjs +181 -0
  4. package/dist/cjs/index.cjs.map +1 -0
  5. package/dist/cjs/index.d.cts +8 -0
  6. package/dist/cjs/index.d.ts +8 -0
  7. package/dist/cjs/index.js +181 -0
  8. package/dist/cjs/tests/createFormFactory.test.d.ts +1 -0
  9. package/dist/cjs/tests/useField.test-d.d.ts +1 -0
  10. package/dist/cjs/tests/useField.test.d.ts +1 -0
  11. package/dist/cjs/tests/useForm.test-d.d.ts +1 -0
  12. package/dist/cjs/tests/useForm.test.d.ts +1 -0
  13. package/dist/cjs/tests/utils.d.ts +1 -0
  14. package/dist/cjs/types.d.ts +4 -0
  15. package/dist/cjs/useField.d.ts +28 -0
  16. package/dist/cjs/useForm.d.ts +19 -0
  17. package/dist/cjs/useIsomorphicEffectOnce.d.ts +5 -0
  18. package/dist/cjs/useIsomorphicLayoutEffect.d.ts +3 -0
  19. package/dist/cjs/useTransform.d.ts +5 -0
  20. package/dist/cjs/validateFormData.d.ts +14 -0
  21. package/dist/mjs/createFormFactory.d.ts +11 -0
  22. package/dist/mjs/formContext.d.ts +10 -0
  23. package/dist/mjs/index.d.mts +8 -0
  24. package/dist/mjs/index.d.ts +8 -0
  25. package/dist/mjs/index.js +170 -0
  26. package/dist/mjs/index.mjs +170 -0
  27. package/dist/mjs/index.mjs.map +1 -0
  28. package/dist/mjs/tests/createFormFactory.test.d.ts +1 -0
  29. package/dist/mjs/tests/useField.test-d.d.ts +1 -0
  30. package/dist/mjs/tests/useField.test.d.ts +1 -0
  31. package/dist/mjs/tests/useForm.test-d.d.ts +1 -0
  32. package/dist/mjs/tests/useForm.test.d.ts +1 -0
  33. package/dist/mjs/tests/utils.d.ts +1 -0
  34. package/dist/mjs/types.d.ts +4 -0
  35. package/dist/mjs/useField.d.ts +28 -0
  36. package/dist/mjs/useForm.d.ts +19 -0
  37. package/dist/mjs/useIsomorphicEffectOnce.d.ts +5 -0
  38. package/dist/mjs/useIsomorphicLayoutEffect.d.ts +3 -0
  39. package/dist/mjs/useTransform.d.ts +5 -0
  40. package/dist/mjs/validateFormData.d.ts +14 -0
  41. package/package.json +21 -24
  42. package/src/createFormFactory.ts +25 -9
  43. package/src/formContext.ts +5 -5
  44. package/src/index.ts +7 -1
  45. package/src/tests/createFormFactory.test.tsx +1 -1
  46. package/src/tests/useField.test-d.tsx +12 -8
  47. package/src/tests/useField.test.tsx +45 -33
  48. package/src/tests/useForm.test-d.tsx +36 -0
  49. package/src/tests/useForm.test.tsx +59 -42
  50. package/src/types.ts +13 -4
  51. package/src/useField.tsx +82 -40
  52. package/src/useForm.tsx +20 -11
  53. package/src/useIsomorphicEffectOnce.ts +38 -0
  54. package/src/useIsomorphicLayoutEffect.ts +1 -1
  55. package/src/useTransform.ts +16 -0
  56. package/src/validateFormData.ts +70 -0
  57. package/build/legacy/createFormFactory.cjs +0 -42
  58. package/build/legacy/createFormFactory.cjs.map +0 -1
  59. package/build/legacy/createFormFactory.d.cts +0 -12
  60. package/build/legacy/createFormFactory.d.ts +0 -12
  61. package/build/legacy/createFormFactory.js +0 -17
  62. package/build/legacy/createFormFactory.js.map +0 -1
  63. package/build/legacy/formContext.cjs +0 -51
  64. package/build/legacy/formContext.cjs.map +0 -1
  65. package/build/legacy/formContext.d.cts +0 -13
  66. package/build/legacy/formContext.d.ts +0 -13
  67. package/build/legacy/formContext.js +0 -15
  68. package/build/legacy/formContext.js.map +0 -1
  69. package/build/legacy/index.cjs +0 -46
  70. package/build/legacy/index.cjs.map +0 -1
  71. package/build/legacy/index.d.cts +0 -7
  72. package/build/legacy/index.d.ts +0 -7
  73. package/build/legacy/index.js +0 -15
  74. package/build/legacy/index.js.map +0 -1
  75. package/build/legacy/types.cjs +0 -19
  76. package/build/legacy/types.cjs.map +0 -1
  77. package/build/legacy/types.d.cts +0 -7
  78. package/build/legacy/types.d.ts +0 -7
  79. package/build/legacy/types.js +0 -1
  80. package/build/legacy/types.js.map +0 -1
  81. package/build/legacy/useField.cjs +0 -88
  82. package/build/legacy/useField.cjs.map +0 -1
  83. package/build/legacy/useField.d.cts +0 -27
  84. package/build/legacy/useField.d.ts +0 -27
  85. package/build/legacy/useField.js +0 -52
  86. package/build/legacy/useField.js.map +0 -1
  87. package/build/legacy/useForm.cjs +0 -73
  88. package/build/legacy/useForm.cjs.map +0 -1
  89. package/build/legacy/useForm.d.cts +0 -23
  90. package/build/legacy/useForm.d.ts +0 -23
  91. package/build/legacy/useForm.js +0 -38
  92. package/build/legacy/useForm.js.map +0 -1
  93. package/build/legacy/useIsomorphicLayoutEffect.cjs +0 -35
  94. package/build/legacy/useIsomorphicLayoutEffect.cjs.map +0 -1
  95. package/build/legacy/useIsomorphicLayoutEffect.d.cts +0 -5
  96. package/build/legacy/useIsomorphicLayoutEffect.d.ts +0 -5
  97. package/build/legacy/useIsomorphicLayoutEffect.js +0 -10
  98. package/build/legacy/useIsomorphicLayoutEffect.js.map +0 -1
  99. package/build/modern/createFormFactory.cjs +0 -42
  100. package/build/modern/createFormFactory.cjs.map +0 -1
  101. package/build/modern/createFormFactory.d.cts +0 -12
  102. package/build/modern/createFormFactory.d.ts +0 -12
  103. package/build/modern/createFormFactory.js +0 -17
  104. package/build/modern/createFormFactory.js.map +0 -1
  105. package/build/modern/formContext.cjs +0 -51
  106. package/build/modern/formContext.cjs.map +0 -1
  107. package/build/modern/formContext.d.cts +0 -13
  108. package/build/modern/formContext.d.ts +0 -13
  109. package/build/modern/formContext.js +0 -15
  110. package/build/modern/formContext.js.map +0 -1
  111. package/build/modern/index.cjs +0 -46
  112. package/build/modern/index.cjs.map +0 -1
  113. package/build/modern/index.d.cts +0 -7
  114. package/build/modern/index.d.ts +0 -7
  115. package/build/modern/index.js +0 -15
  116. package/build/modern/index.js.map +0 -1
  117. package/build/modern/types.cjs +0 -19
  118. package/build/modern/types.cjs.map +0 -1
  119. package/build/modern/types.d.cts +0 -7
  120. package/build/modern/types.d.ts +0 -7
  121. package/build/modern/types.js +0 -1
  122. package/build/modern/types.js.map +0 -1
  123. package/build/modern/useField.cjs +0 -88
  124. package/build/modern/useField.cjs.map +0 -1
  125. package/build/modern/useField.d.cts +0 -27
  126. package/build/modern/useField.d.ts +0 -27
  127. package/build/modern/useField.js +0 -52
  128. package/build/modern/useField.js.map +0 -1
  129. package/build/modern/useForm.cjs +0 -73
  130. package/build/modern/useForm.cjs.map +0 -1
  131. package/build/modern/useForm.d.cts +0 -23
  132. package/build/modern/useForm.d.ts +0 -23
  133. package/build/modern/useForm.js +0 -38
  134. package/build/modern/useForm.js.map +0 -1
  135. package/build/modern/useIsomorphicLayoutEffect.cjs +0 -35
  136. package/build/modern/useIsomorphicLayoutEffect.cjs.map +0 -1
  137. package/build/modern/useIsomorphicLayoutEffect.d.cts +0 -5
  138. package/build/modern/useIsomorphicLayoutEffect.d.ts +0 -5
  139. package/build/modern/useIsomorphicLayoutEffect.js +0 -10
  140. package/build/modern/useIsomorphicLayoutEffect.js.map +0 -1
package/src/useField.tsx CHANGED
@@ -1,59 +1,69 @@
1
- import React, { useState } from 'react'
1
+ import React, { useRef, useState } from 'rehackt'
2
2
  import { useStore } from '@tanstack/react-store'
3
- import type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core'
3
+ import type {
4
+ DeepKeys,
5
+ DeepValue,
6
+ Narrow,
7
+ Validator,
8
+ } from '@tanstack/form-core'
4
9
  import { FieldApi, functionalUpdate } from '@tanstack/form-core'
5
10
  import { useFormContext, formContext } from './formContext'
6
11
  import type { UseFieldOptions } from './types'
7
12
  import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
13
+ import { useIsomorphicEffectOnce } from './useIsomorphicEffectOnce'
8
14
 
9
15
  declare module '@tanstack/form-core' {
10
16
  // eslint-disable-next-line no-shadow
11
17
  interface FieldApi<
12
18
  TParentData,
13
19
  TName extends DeepKeys<TParentData>,
14
- ValidatorType,
15
- FormValidator,
20
+ TFieldValidator extends
21
+ | Validator<DeepValue<TParentData, TName>, unknown>
22
+ | undefined = undefined,
23
+ TFormValidator extends
24
+ | Validator<TParentData, unknown>
25
+ | undefined = undefined,
16
26
  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
17
27
  > {
18
- Field: FieldComponent<TData, FormValidator>
28
+ Field: FieldComponent<TParentData, TFormValidator>
19
29
  }
20
30
  }
21
31
 
22
32
  export type UseField<TParentData> = <
23
33
  TName extends DeepKeys<TParentData>,
24
- ValidatorType,
25
- FormValidator,
34
+ TFieldValidator extends
35
+ | Validator<DeepValue<TParentData, TName>, unknown>
36
+ | undefined = undefined,
37
+ TFormValidator extends
38
+ | Validator<TParentData, unknown>
39
+ | undefined = undefined,
26
40
  >(
27
41
  opts?: { name: Narrow<TName> } & UseFieldOptions<
28
42
  TParentData,
29
43
  TName,
30
- ValidatorType,
31
- FormValidator
44
+ TFieldValidator,
45
+ TFormValidator
32
46
  >,
33
47
  ) => FieldApi<
34
48
  TParentData,
35
49
  TName,
36
- ValidatorType,
37
- FormValidator,
50
+ TFieldValidator,
51
+ TFormValidator,
38
52
  DeepValue<TParentData, TName>
39
53
  >
40
54
 
41
55
  export function useField<
42
56
  TParentData,
43
57
  TName extends DeepKeys<TParentData>,
44
- ValidatorType,
45
- FormValidator,
58
+ TFieldValidator extends
59
+ | Validator<DeepValue<TParentData, TName>, unknown>
60
+ | undefined = undefined,
61
+ TFormValidator extends
62
+ | Validator<TParentData, unknown>
63
+ | undefined = undefined,
46
64
  >(
47
- opts: UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>,
48
- ): FieldApi<
49
- TParentData,
50
- TName,
51
- ValidatorType,
52
- FormValidator
53
- // Omit<typeof opts, 'onMount'> & {
54
- // form: FormApi<TParentData>
55
- // }
56
- > {
65
+ opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,
66
+ ): FieldApi<TParentData, TName, TFieldValidator, TFormValidator> {
57
67
  // Get the form API either manually or from context
58
68
  const { formApi, parentFieldName } = useFormContext()
59
69
 
@@ -68,9 +78,9 @@ export function useField<
68
78
 
69
79
  const api = new FieldApi({
70
80
  ...opts,
71
- form: formApi,
81
+ form: formApi as never,
72
82
  // TODO: Fix typings to include `index` and `parentFieldName`, if present
73
- name: name as typeof opts.name,
83
+ name: name as typeof opts.name as never,
74
84
  })
75
85
 
76
86
  api.Field = Field as never
@@ -94,21 +104,42 @@ export function useField<
94
104
  }
95
105
  : undefined,
96
106
  )
97
- // Instantiates field meta and removes it when unrendered
98
- useIsomorphicLayoutEffect(() => fieldApi.mount(), [fieldApi])
107
+ const unmountFn = useRef<(() => void) | null>(null)
108
+
109
+ useIsomorphicEffectOnce(() => {
110
+ return () => {
111
+ unmountFn.current?.()
112
+ }
113
+ })
114
+
115
+ // We have to mount it right as soon as it renders, otherwise we get:
116
+ // https://github.com/TanStack/form/issues/523
117
+ if (!unmountFn.current) {
118
+ unmountFn.current = fieldApi.mount()
119
+ }
99
120
 
100
- return fieldApi
121
+ return fieldApi as never
101
122
  }
102
123
 
103
124
  type FieldComponentProps<
104
125
  TParentData,
105
126
  TName extends DeepKeys<TParentData>,
106
- ValidatorType,
107
- FormValidator,
127
+ TFieldValidator extends
128
+ | Validator<DeepValue<TParentData, TName>, unknown>
129
+ | undefined = undefined,
130
+ TFormValidator extends
131
+ | Validator<TParentData, unknown>
132
+ | undefined = undefined,
108
133
  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
109
134
  > = {
110
135
  children: (
111
- fieldApi: FieldApi<TParentData, TName, ValidatorType, FormValidator, TData>,
136
+ fieldApi: FieldApi<
137
+ TParentData,
138
+ TName,
139
+ TFieldValidator,
140
+ TFormValidator,
141
+ TData
142
+ >,
112
143
  ) => any
113
144
  } & (TParentData extends any[]
114
145
  ? {
@@ -120,13 +151,20 @@ type FieldComponentProps<
120
151
  index?: never
121
152
  }) &
122
153
  Omit<
123
- UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>,
154
+ UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,
124
155
  'name' | 'index'
125
156
  >
126
157
 
127
- export type FieldComponent<TParentData, FormValidator> = <
158
+ export type FieldComponent<
159
+ TParentData,
160
+ TFormValidator extends
161
+ | Validator<TParentData, unknown>
162
+ | undefined = undefined,
163
+ > = <
128
164
  TName extends DeepKeys<TParentData>,
129
- ValidatorType,
165
+ TFieldValidator extends
166
+ | Validator<DeepValue<TParentData, TName>, unknown>
167
+ | undefined = undefined,
130
168
  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
131
169
  >({
132
170
  children,
@@ -134,24 +172,28 @@ export type FieldComponent<TParentData, FormValidator> = <
134
172
  }: FieldComponentProps<
135
173
  TParentData,
136
174
  TName,
137
- ValidatorType,
138
- FormValidator,
175
+ TFieldValidator,
176
+ TFormValidator,
139
177
  TData
140
178
  >) => any
141
179
 
142
180
  export function Field<
143
181
  TParentData,
144
182
  TName extends DeepKeys<TParentData>,
145
- ValidatorType,
146
- FormValidator,
183
+ TFieldValidator extends
184
+ | Validator<DeepValue<TParentData, TName>, unknown>
185
+ | undefined = undefined,
186
+ TFormValidator extends
187
+ | Validator<TParentData, unknown>
188
+ | undefined = undefined,
147
189
  >({
148
190
  children,
149
191
  ...fieldOptions
150
192
  }: {
151
193
  children: (
152
- fieldApi: FieldApi<TParentData, TName, ValidatorType, FormValidator>,
194
+ fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator>,
153
195
  ) => any
154
- } & UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>) {
196
+ } & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>) {
155
197
  const fieldApi = useField(fieldOptions as any)
156
198
 
157
199
  return (
package/src/useForm.tsx CHANGED
@@ -1,17 +1,21 @@
1
- import type { FormState, FormOptions } from '@tanstack/form-core'
1
+ import type { FormState, FormOptions, Validator } from '@tanstack/form-core'
2
2
  import { FormApi, functionalUpdate } from '@tanstack/form-core'
3
3
  import type { NoInfer } from '@tanstack/react-store'
4
4
  import { useStore } from '@tanstack/react-store'
5
- import React, { type ReactNode, useState } from 'react'
5
+ import React, {
6
+ type PropsWithChildren,
7
+ type ReactNode,
8
+ useState,
9
+ } from 'rehackt'
6
10
  import { type UseField, type FieldComponent, Field, useField } from './useField'
7
11
  import { formContext } from './formContext'
8
12
  import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
9
13
 
10
14
  declare module '@tanstack/form-core' {
11
15
  // eslint-disable-next-line no-shadow
12
- interface FormApi<TFormData, ValidatorType> {
13
- Provider: (props: { children: any }) => any
14
- Field: FieldComponent<TFormData, ValidatorType>
16
+ interface FormApi<TFormData, TFormValidator> {
17
+ Provider: (props: PropsWithChildren) => JSX.Element
18
+ Field: FieldComponent<TFormData, TFormValidator>
15
19
  useField: UseField<TFormData>
16
20
  useStore: <TSelected = NoInfer<FormState<TFormData>>>(
17
21
  selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
@@ -19,20 +23,25 @@ declare module '@tanstack/form-core' {
19
23
  Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
20
24
  selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
21
25
  children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode
22
- }) => any
26
+ }) => JSX.Element
23
27
  }
24
28
  }
25
29
 
26
- export function useForm<TData, FormValidator>(
27
- opts?: FormOptions<TData, FormValidator>,
28
- ): FormApi<TData, FormValidator> {
30
+ export function useForm<
31
+ TFormData,
32
+ TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
33
+ >(
34
+ opts?: FormOptions<TFormData, TFormValidator>,
35
+ ): FormApi<TFormData, TFormValidator> {
29
36
  const [formApi] = useState(() => {
30
37
  // @ts-ignore
31
- const api = new FormApi<TData>(opts)
38
+ const api = new FormApi<TFormData, TFormValidator>(opts)
32
39
 
33
40
  api.Provider = function Provider(props) {
34
41
  useIsomorphicLayoutEffect(api.mount, [])
35
- return <formContext.Provider {...props} value={{ formApi: api }} />
42
+ return (
43
+ <formContext.Provider {...props} value={{ formApi: api as never }} />
44
+ )
36
45
  }
37
46
  api.Field = Field as any
38
47
  api.useField = useField as any
@@ -0,0 +1,38 @@
1
+ import { useRef, useState, type EffectCallback } from 'rehackt'
2
+ import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
3
+
4
+ /**
5
+ * This hook handles StrictMode and prod mode
6
+ */
7
+ export const useIsomorphicEffectOnce = (effect: EffectCallback) => {
8
+ const destroyFunc = useRef<void | (() => void)>()
9
+ const effectCalled = useRef(false)
10
+ const renderAfterCalled = useRef(false)
11
+ const [val, setVal] = useState(0)
12
+
13
+ if (effectCalled.current) {
14
+ renderAfterCalled.current = true
15
+ }
16
+
17
+ useIsomorphicLayoutEffect(() => {
18
+ // only execute the effect first time around
19
+ if (!effectCalled.current) {
20
+ destroyFunc.current = effect()
21
+ effectCalled.current = true
22
+ }
23
+
24
+ // this forces one render after the effect is run
25
+ setVal((v) => v + 1)
26
+
27
+ return () => {
28
+ // if the comp didn't render since the useEffect was called,
29
+ // we know it's the dummy React cycle
30
+ if (!renderAfterCalled.current) {
31
+ return
32
+ }
33
+ if (destroyFunc.current) {
34
+ destroyFunc.current()
35
+ }
36
+ }
37
+ }, [])
38
+ }
@@ -1,4 +1,4 @@
1
- import { useEffect, useLayoutEffect } from 'react'
1
+ import { useEffect, useLayoutEffect } from 'rehackt'
2
2
 
3
3
  export const useIsomorphicLayoutEffect =
4
4
  // @ts-ignore
@@ -0,0 +1,16 @@
1
+ import type { FormApi, Validator } from '@tanstack/form-core'
2
+
3
+ export function useTransform<
4
+ TFormData,
5
+ TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
6
+ >(
7
+ fn: (
8
+ formBase: FormApi<TFormData, TFormValidator>,
9
+ ) => FormApi<TFormData, TFormValidator>,
10
+ deps: unknown[],
11
+ ) {
12
+ return {
13
+ fn,
14
+ deps,
15
+ }
16
+ }
@@ -0,0 +1,70 @@
1
+ import { decode } from 'decode-formdata'
2
+ import type {
3
+ FormApi,
4
+ FormOptions,
5
+ ValidationError,
6
+ Validator,
7
+ } from '@tanstack/form-core'
8
+
9
+ type OnServerValidateFn<TFormData> = (props: {
10
+ value: TFormData
11
+ }) => ValidationError
12
+
13
+ type OnServerValidateOrFn<
14
+ TFormData,
15
+ TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
16
+ > = TFormValidator extends Validator<TFormData, infer FFN>
17
+ ? FFN | OnServerValidateFn<TFormData>
18
+ : OnServerValidateFn<TFormData>
19
+
20
+ declare module '@tanstack/form-core' {
21
+ // eslint-disable-next-line no-shadow
22
+ interface FormOptions<
23
+ TFormData,
24
+ TFormValidator extends
25
+ | Validator<TFormData, unknown>
26
+ | undefined = undefined,
27
+ > {
28
+ onServerValidate?: OnServerValidateOrFn<TFormData, TFormValidator>
29
+ }
30
+ }
31
+
32
+ export type ValidateFormData<
33
+ TFormData,
34
+ TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
35
+ > = (
36
+ formData: FormData,
37
+ info?: Parameters<typeof decode>[1],
38
+ ) => Promise<Partial<FormApi<TFormData, TFormValidator>['state']>>
39
+
40
+ export const getValidateFormData = <
41
+ TFormData,
42
+ TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
43
+ >(
44
+ defaultOpts?: FormOptions<TFormData, TFormValidator>,
45
+ ) =>
46
+ (async (
47
+ formData: FormData,
48
+ info?: Parameters<typeof decode>[1],
49
+ ): Promise<Partial<FormApi<TFormData, TFormValidator>['state']>> => {
50
+ const { validatorAdapter, onServerValidate } = defaultOpts || {}
51
+
52
+ const runValidator = (propsValue: { value: TFormData }) => {
53
+ if (validatorAdapter && typeof onServerValidate !== 'function') {
54
+ return validatorAdapter().validate(propsValue, onServerValidate)
55
+ }
56
+
57
+ return (onServerValidate as OnServerValidateFn<TFormData>)(propsValue)
58
+ }
59
+
60
+ const data = decode(formData, info) as never as TFormData
61
+
62
+ const onServerError = runValidator({ value: data })
63
+
64
+ return {
65
+ errorMap: {
66
+ onServer: onServerError,
67
+ },
68
+ errors: onServerError ? [onServerError] : [],
69
+ }
70
+ }) as ValidateFormData<TFormData, TFormValidator>
@@ -1,42 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
-
20
- // src/createFormFactory.ts
21
- var createFormFactory_exports = {};
22
- __export(createFormFactory_exports, {
23
- createFormFactory: () => createFormFactory
24
- });
25
- module.exports = __toCommonJS(createFormFactory_exports);
26
- var import_useField = require("./useField.cjs");
27
- var import_useForm = require("./useForm.cjs");
28
- function createFormFactory(defaultOpts) {
29
- return {
30
- useForm: (opts) => {
31
- const formOptions = Object.assign({}, defaultOpts, opts);
32
- return (0, import_useForm.useForm)(formOptions);
33
- },
34
- useField: import_useField.useField,
35
- Field: import_useField.Field
36
- };
37
- }
38
- // Annotate the CommonJS export names for ESM import in node:
39
- 0 && (module.exports = {
40
- createFormFactory
41
- });
42
- //# sourceMappingURL=createFormFactory.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, FormOptions } from '@tanstack/form-core'\n\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<TFormData, FormValidator> = {\n useForm: (\n opts?: FormOptions<TFormData, FormValidator>,\n ) => FormApi<TFormData, FormValidator>\n useField: UseField<TFormData>\n Field: FieldComponent<TFormData, FormValidator>\n}\n\nexport function createFormFactory<TFormData, FormValidator>(\n defaultOpts?: FormOptions<TFormData, FormValidator>,\n): FormFactory<TFormData, FormValidator> {\n return {\n useForm: (opts) => {\n const formOptions = Object.assign({}, defaultOpts, opts)\n return useForm<TFormData, FormValidator>(formOptions)\n },\n useField: useField as any,\n Field: Field as any,\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAAoE;AACpE,qBAAwB;AAUjB,SAAS,kBACd,aACuC;AACvC,SAAO;AAAA,IACL,SAAS,CAAC,SAAS;AACjB,YAAM,cAAc,OAAO,OAAO,CAAC,GAAG,aAAa,IAAI;AACvD,iBAAO,wBAAkC,WAAW;AAAA,IACtD;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;","names":[]}
@@ -1,12 +0,0 @@
1
- import { FormOptions, FormApi } from '@tanstack/form-core';
2
- import { UseField, FieldComponent } from './useField.cjs';
3
- import './types.cjs';
4
-
5
- type FormFactory<TFormData, FormValidator> = {
6
- useForm: (opts?: FormOptions<TFormData, FormValidator>) => FormApi<TFormData, FormValidator>;
7
- useField: UseField<TFormData>;
8
- Field: FieldComponent<TFormData, FormValidator>;
9
- };
10
- declare function createFormFactory<TFormData, FormValidator>(defaultOpts?: FormOptions<TFormData, FormValidator>): FormFactory<TFormData, FormValidator>;
11
-
12
- export { FormFactory, createFormFactory };
@@ -1,12 +0,0 @@
1
- import { FormOptions, FormApi } from '@tanstack/form-core';
2
- import { UseField, FieldComponent } from './useField.js';
3
- import './types.js';
4
-
5
- type FormFactory<TFormData, FormValidator> = {
6
- useForm: (opts?: FormOptions<TFormData, FormValidator>) => FormApi<TFormData, FormValidator>;
7
- useField: UseField<TFormData>;
8
- Field: FieldComponent<TFormData, FormValidator>;
9
- };
10
- declare function createFormFactory<TFormData, FormValidator>(defaultOpts?: FormOptions<TFormData, FormValidator>): FormFactory<TFormData, FormValidator>;
11
-
12
- export { FormFactory, createFormFactory };
@@ -1,17 +0,0 @@
1
- // src/createFormFactory.ts
2
- import { Field, useField } from "./useField.js";
3
- import { useForm } from "./useForm.js";
4
- function createFormFactory(defaultOpts) {
5
- return {
6
- useForm: (opts) => {
7
- const formOptions = Object.assign({}, defaultOpts, opts);
8
- return useForm(formOptions);
9
- },
10
- useField,
11
- Field
12
- };
13
- }
14
- export {
15
- createFormFactory
16
- };
17
- //# sourceMappingURL=createFormFactory.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, FormOptions } from '@tanstack/form-core'\n\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<TFormData, FormValidator> = {\n useForm: (\n opts?: FormOptions<TFormData, FormValidator>,\n ) => FormApi<TFormData, FormValidator>\n useField: UseField<TFormData>\n Field: FieldComponent<TFormData, FormValidator>\n}\n\nexport function createFormFactory<TFormData, FormValidator>(\n defaultOpts?: FormOptions<TFormData, FormValidator>,\n): FormFactory<TFormData, FormValidator> {\n return {\n useForm: (opts) => {\n const formOptions = Object.assign({}, defaultOpts, opts)\n return useForm<TFormData, FormValidator>(formOptions)\n },\n useField: useField as any,\n Field: Field as any,\n }\n}\n"],"mappings":";AAEA,SAA6C,OAAO,gBAAgB;AACpE,SAAS,eAAe;AAUjB,SAAS,kBACd,aACuC;AACvC,SAAO;AAAA,IACL,SAAS,CAAC,SAAS;AACjB,YAAM,cAAc,OAAO,OAAO,CAAC,GAAG,aAAa,IAAI;AACvD,aAAO,QAAkC,WAAW;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
@@ -1,51 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
-
30
- // src/formContext.ts
31
- var formContext_exports = {};
32
- __export(formContext_exports, {
33
- formContext: () => formContext,
34
- useFormContext: () => useFormContext
35
- });
36
- module.exports = __toCommonJS(formContext_exports);
37
- var React = __toESM(require("react"), 1);
38
- var formContext = React.createContext(null);
39
- function useFormContext() {
40
- const formApi = React.useContext(formContext);
41
- if (!formApi) {
42
- throw new Error(`You are trying to use the form API outside of a form!`);
43
- }
44
- return formApi;
45
- }
46
- // Annotate the CommonJS export names for ESM import in node:
47
- 0 && (module.exports = {
48
- formContext,
49
- useFormContext
50
- });
51
- //# sourceMappingURL=formContext.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/formContext.ts"],"sourcesContent":["import type { FormApi } from '@tanstack/form-core'\nimport * as React from 'react'\n\nexport const formContext = React.createContext<{\n formApi: FormApi<any, unknown>\n parentFieldName?: string\n} | null>(null!)\n\nexport function useFormContext() {\n const formApi = React.useContext(formContext)\n\n if (!formApi) {\n throw new Error(`You are trying to use the form API outside of a form!`)\n }\n\n return formApi\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AAEhB,IAAM,cAAoB,oBAGvB,IAAK;AAER,SAAS,iBAAiB;AAC/B,QAAM,UAAgB,iBAAW,WAAW;AAE5C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEA,SAAO;AACT;","names":[]}
@@ -1,13 +0,0 @@
1
- import { FormApi } from '@tanstack/form-core';
2
- import * as React from 'react';
3
-
4
- declare const formContext: React.Context<{
5
- formApi: FormApi<any, unknown>;
6
- parentFieldName?: string | undefined;
7
- } | null>;
8
- declare function useFormContext(): {
9
- formApi: FormApi<any, unknown>;
10
- parentFieldName?: string | undefined;
11
- };
12
-
13
- export { formContext, useFormContext };
@@ -1,13 +0,0 @@
1
- import { FormApi } from '@tanstack/form-core';
2
- import * as React from 'react';
3
-
4
- declare const formContext: React.Context<{
5
- formApi: FormApi<any, unknown>;
6
- parentFieldName?: string | undefined;
7
- } | null>;
8
- declare function useFormContext(): {
9
- formApi: FormApi<any, unknown>;
10
- parentFieldName?: string | undefined;
11
- };
12
-
13
- export { formContext, useFormContext };
@@ -1,15 +0,0 @@
1
- // src/formContext.ts
2
- import * as React from "react";
3
- var formContext = React.createContext(null);
4
- function useFormContext() {
5
- const formApi = React.useContext(formContext);
6
- if (!formApi) {
7
- throw new Error(`You are trying to use the form API outside of a form!`);
8
- }
9
- return formApi;
10
- }
11
- export {
12
- formContext,
13
- useFormContext
14
- };
15
- //# sourceMappingURL=formContext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/formContext.ts"],"sourcesContent":["import type { FormApi } from '@tanstack/form-core'\nimport * as React from 'react'\n\nexport const formContext = React.createContext<{\n formApi: FormApi<any, unknown>\n parentFieldName?: string\n} | null>(null!)\n\nexport function useFormContext() {\n const formApi = React.useContext(formContext)\n\n if (!formApi) {\n throw new Error(`You are trying to use the form API outside of a form!`)\n }\n\n return formApi\n}\n"],"mappings":";AACA,YAAY,WAAW;AAEhB,IAAM,cAAoB,oBAGvB,IAAK;AAER,SAAS,iBAAiB;AAC/B,QAAM,UAAgB,iBAAW,WAAW;AAE5C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEA,SAAO;AACT;","names":[]}
@@ -1,46 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
-
20
- // src/index.ts
21
- var src_exports = {};
22
- __export(src_exports, {
23
- Field: () => import_useField.Field,
24
- FieldApi: () => import_form_core.FieldApi,
25
- FormApi: () => import_form_core.FormApi,
26
- createFormFactory: () => import_createFormFactory.createFormFactory,
27
- functionalUpdate: () => import_form_core.functionalUpdate,
28
- useField: () => import_useField.useField,
29
- useForm: () => import_useForm.useForm
30
- });
31
- module.exports = __toCommonJS(src_exports);
32
- var import_form_core = require("@tanstack/form-core");
33
- var import_useForm = require("./useForm.cjs");
34
- var import_useField = require("./useField.cjs");
35
- var import_createFormFactory = require("./createFormFactory.cjs");
36
- // Annotate the CommonJS export names for ESM import in node:
37
- 0 && (module.exports = {
38
- Field,
39
- FieldApi,
40
- FormApi,
41
- createFormFactory,
42
- functionalUpdate,
43
- useField,
44
- useForm
45
- });
46
- //# sourceMappingURL=index.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export type {\n DeepKeys,\n DeepValue,\n FieldApiOptions,\n FieldInfo,\n FieldMeta,\n FieldOptions,\n FieldState,\n FormOptions,\n FormState,\n RequiredByKey,\n Updater,\n UpdaterFn,\n ValidationCause,\n ValidationError,\n ValidationMeta,\n} from '@tanstack/form-core'\n\nexport { FormApi, FieldApi, functionalUpdate } from '@tanstack/form-core'\n\nexport { useForm } from './useForm'\n\nexport type { UseField, FieldComponent } from './useField'\nexport { useField, Field } from './useField'\n\nexport type { FormFactory } from './createFormFactory'\nexport { createFormFactory } from './createFormFactory'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBA,uBAAoD;AAEpD,qBAAwB;AAGxB,sBAAgC;AAGhC,+BAAkC;","names":[]}