@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.
- package/dist/cjs/createFormFactory.d.ts +11 -0
- package/dist/cjs/formContext.d.ts +10 -0
- package/dist/cjs/index.cjs +181 -0
- package/dist/cjs/index.cjs.map +1 -0
- package/dist/cjs/index.d.cts +8 -0
- package/dist/cjs/index.d.ts +8 -0
- package/dist/cjs/index.js +181 -0
- package/dist/cjs/tests/createFormFactory.test.d.ts +1 -0
- package/dist/cjs/tests/useField.test-d.d.ts +1 -0
- package/dist/cjs/tests/useField.test.d.ts +1 -0
- package/dist/cjs/tests/useForm.test-d.d.ts +1 -0
- package/dist/cjs/tests/useForm.test.d.ts +1 -0
- package/dist/cjs/tests/utils.d.ts +1 -0
- package/dist/cjs/types.d.ts +4 -0
- package/dist/cjs/useField.d.ts +28 -0
- package/dist/cjs/useForm.d.ts +19 -0
- package/dist/cjs/useIsomorphicEffectOnce.d.ts +5 -0
- package/dist/cjs/useIsomorphicLayoutEffect.d.ts +3 -0
- package/dist/cjs/useTransform.d.ts +5 -0
- package/dist/cjs/validateFormData.d.ts +14 -0
- package/dist/mjs/createFormFactory.d.ts +11 -0
- package/dist/mjs/formContext.d.ts +10 -0
- package/dist/mjs/index.d.mts +8 -0
- package/dist/mjs/index.d.ts +8 -0
- package/dist/mjs/index.js +170 -0
- package/dist/mjs/index.mjs +170 -0
- package/dist/mjs/index.mjs.map +1 -0
- package/dist/mjs/tests/createFormFactory.test.d.ts +1 -0
- package/dist/mjs/tests/useField.test-d.d.ts +1 -0
- package/dist/mjs/tests/useField.test.d.ts +1 -0
- package/dist/mjs/tests/useForm.test-d.d.ts +1 -0
- package/dist/mjs/tests/useForm.test.d.ts +1 -0
- package/dist/mjs/tests/utils.d.ts +1 -0
- package/dist/mjs/types.d.ts +4 -0
- package/dist/mjs/useField.d.ts +28 -0
- package/dist/mjs/useForm.d.ts +19 -0
- package/dist/mjs/useIsomorphicEffectOnce.d.ts +5 -0
- package/dist/mjs/useIsomorphicLayoutEffect.d.ts +3 -0
- package/dist/mjs/useTransform.d.ts +5 -0
- package/dist/mjs/validateFormData.d.ts +14 -0
- package/package.json +21 -24
- package/src/createFormFactory.ts +25 -9
- package/src/formContext.ts +5 -5
- package/src/index.ts +7 -1
- package/src/tests/createFormFactory.test.tsx +1 -1
- package/src/tests/useField.test-d.tsx +12 -8
- package/src/tests/useField.test.tsx +45 -33
- package/src/tests/useForm.test-d.tsx +36 -0
- package/src/tests/useForm.test.tsx +59 -42
- package/src/types.ts +13 -4
- package/src/useField.tsx +82 -40
- package/src/useForm.tsx +20 -11
- package/src/useIsomorphicEffectOnce.ts +38 -0
- package/src/useIsomorphicLayoutEffect.ts +1 -1
- package/src/useTransform.ts +16 -0
- package/src/validateFormData.ts +70 -0
- package/build/legacy/createFormFactory.cjs +0 -42
- package/build/legacy/createFormFactory.cjs.map +0 -1
- package/build/legacy/createFormFactory.d.cts +0 -12
- package/build/legacy/createFormFactory.d.ts +0 -12
- package/build/legacy/createFormFactory.js +0 -17
- package/build/legacy/createFormFactory.js.map +0 -1
- package/build/legacy/formContext.cjs +0 -51
- package/build/legacy/formContext.cjs.map +0 -1
- package/build/legacy/formContext.d.cts +0 -13
- package/build/legacy/formContext.d.ts +0 -13
- package/build/legacy/formContext.js +0 -15
- package/build/legacy/formContext.js.map +0 -1
- package/build/legacy/index.cjs +0 -46
- package/build/legacy/index.cjs.map +0 -1
- package/build/legacy/index.d.cts +0 -7
- package/build/legacy/index.d.ts +0 -7
- package/build/legacy/index.js +0 -15
- package/build/legacy/index.js.map +0 -1
- package/build/legacy/types.cjs +0 -19
- package/build/legacy/types.cjs.map +0 -1
- package/build/legacy/types.d.cts +0 -7
- package/build/legacy/types.d.ts +0 -7
- package/build/legacy/types.js +0 -1
- package/build/legacy/types.js.map +0 -1
- package/build/legacy/useField.cjs +0 -88
- package/build/legacy/useField.cjs.map +0 -1
- package/build/legacy/useField.d.cts +0 -27
- package/build/legacy/useField.d.ts +0 -27
- package/build/legacy/useField.js +0 -52
- package/build/legacy/useField.js.map +0 -1
- package/build/legacy/useForm.cjs +0 -73
- package/build/legacy/useForm.cjs.map +0 -1
- package/build/legacy/useForm.d.cts +0 -23
- package/build/legacy/useForm.d.ts +0 -23
- package/build/legacy/useForm.js +0 -38
- package/build/legacy/useForm.js.map +0 -1
- package/build/legacy/useIsomorphicLayoutEffect.cjs +0 -35
- package/build/legacy/useIsomorphicLayoutEffect.cjs.map +0 -1
- package/build/legacy/useIsomorphicLayoutEffect.d.cts +0 -5
- package/build/legacy/useIsomorphicLayoutEffect.d.ts +0 -5
- package/build/legacy/useIsomorphicLayoutEffect.js +0 -10
- package/build/legacy/useIsomorphicLayoutEffect.js.map +0 -1
- package/build/modern/createFormFactory.cjs +0 -42
- package/build/modern/createFormFactory.cjs.map +0 -1
- package/build/modern/createFormFactory.d.cts +0 -12
- package/build/modern/createFormFactory.d.ts +0 -12
- package/build/modern/createFormFactory.js +0 -17
- package/build/modern/createFormFactory.js.map +0 -1
- package/build/modern/formContext.cjs +0 -51
- package/build/modern/formContext.cjs.map +0 -1
- package/build/modern/formContext.d.cts +0 -13
- package/build/modern/formContext.d.ts +0 -13
- package/build/modern/formContext.js +0 -15
- package/build/modern/formContext.js.map +0 -1
- package/build/modern/index.cjs +0 -46
- package/build/modern/index.cjs.map +0 -1
- package/build/modern/index.d.cts +0 -7
- package/build/modern/index.d.ts +0 -7
- package/build/modern/index.js +0 -15
- package/build/modern/index.js.map +0 -1
- package/build/modern/types.cjs +0 -19
- package/build/modern/types.cjs.map +0 -1
- package/build/modern/types.d.cts +0 -7
- package/build/modern/types.d.ts +0 -7
- package/build/modern/types.js +0 -1
- package/build/modern/types.js.map +0 -1
- package/build/modern/useField.cjs +0 -88
- package/build/modern/useField.cjs.map +0 -1
- package/build/modern/useField.d.cts +0 -27
- package/build/modern/useField.d.ts +0 -27
- package/build/modern/useField.js +0 -52
- package/build/modern/useField.js.map +0 -1
- package/build/modern/useForm.cjs +0 -73
- package/build/modern/useForm.cjs.map +0 -1
- package/build/modern/useForm.d.cts +0 -23
- package/build/modern/useForm.d.ts +0 -23
- package/build/modern/useForm.js +0 -38
- package/build/modern/useForm.js.map +0 -1
- package/build/modern/useIsomorphicLayoutEffect.cjs +0 -35
- package/build/modern/useIsomorphicLayoutEffect.cjs.map +0 -1
- package/build/modern/useIsomorphicLayoutEffect.d.cts +0 -5
- package/build/modern/useIsomorphicLayoutEffect.d.ts +0 -5
- package/build/modern/useIsomorphicLayoutEffect.js +0 -10
- package/build/modern/useIsomorphicLayoutEffect.js.map +0 -1
package/src/useField.tsx
CHANGED
|
@@ -1,59 +1,69 @@
|
|
|
1
|
-
import React, { useState } from '
|
|
1
|
+
import React, { useRef, useState } from 'rehackt'
|
|
2
2
|
import { useStore } from '@tanstack/react-store'
|
|
3
|
-
import type {
|
|
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
|
-
|
|
15
|
-
|
|
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<
|
|
28
|
+
Field: FieldComponent<TParentData, TFormValidator>
|
|
19
29
|
}
|
|
20
30
|
}
|
|
21
31
|
|
|
22
32
|
export type UseField<TParentData> = <
|
|
23
33
|
TName extends DeepKeys<TParentData>,
|
|
24
|
-
|
|
25
|
-
|
|
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
|
-
|
|
31
|
-
|
|
44
|
+
TFieldValidator,
|
|
45
|
+
TFormValidator
|
|
32
46
|
>,
|
|
33
47
|
) => FieldApi<
|
|
34
48
|
TParentData,
|
|
35
49
|
TName,
|
|
36
|
-
|
|
37
|
-
|
|
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
|
-
|
|
45
|
-
|
|
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,
|
|
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
|
-
|
|
98
|
-
|
|
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
|
-
|
|
107
|
-
|
|
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<
|
|
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,
|
|
154
|
+
UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,
|
|
124
155
|
'name' | 'index'
|
|
125
156
|
>
|
|
126
157
|
|
|
127
|
-
export type FieldComponent<
|
|
158
|
+
export type FieldComponent<
|
|
159
|
+
TParentData,
|
|
160
|
+
TFormValidator extends
|
|
161
|
+
| Validator<TParentData, unknown>
|
|
162
|
+
| undefined = undefined,
|
|
163
|
+
> = <
|
|
128
164
|
TName extends DeepKeys<TParentData>,
|
|
129
|
-
|
|
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
|
-
|
|
138
|
-
|
|
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
|
-
|
|
146
|
-
|
|
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,
|
|
194
|
+
fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator>,
|
|
153
195
|
) => any
|
|
154
|
-
} & UseFieldOptions<TParentData, TName,
|
|
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, {
|
|
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,
|
|
13
|
-
Provider: (props:
|
|
14
|
-
Field: FieldComponent<TFormData,
|
|
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
|
-
}) =>
|
|
26
|
+
}) => JSX.Element
|
|
23
27
|
}
|
|
24
28
|
}
|
|
25
29
|
|
|
26
|
-
export function useForm<
|
|
27
|
-
|
|
28
|
-
|
|
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<
|
|
38
|
+
const api = new FormApi<TFormData, TFormValidator>(opts)
|
|
32
39
|
|
|
33
40
|
api.Provider = function Provider(props) {
|
|
34
41
|
useIsomorphicLayoutEffect(api.mount, [])
|
|
35
|
-
return
|
|
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
|
+
}
|
|
@@ -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":[]}
|
package/build/legacy/index.cjs
DELETED
|
@@ -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":[]}
|