@tanstack/svelte-form 1.33.3 → 2.0.0-alpha.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 (86) hide show
  1. package/dist/AppForm/AppForm.svelte +14 -0
  2. package/dist/AppForm/Components.lib.d.ts +7 -0
  3. package/dist/AppForm/Components.lib.js +8 -0
  4. package/dist/AppForm/SvelteAppFormApi.public.d.ts +10 -0
  5. package/dist/AppForm/appFormOptions.public.d.ts +12 -0
  6. package/dist/AppForm/appFormOptions.public.js +1 -0
  7. package/dist/AppForm/componentMap.public.d.ts +7 -0
  8. package/dist/AppForm/componentMap.public.js +1 -0
  9. package/dist/AppForm/contexts.lib.d.ts +4 -0
  10. package/dist/AppForm/contexts.lib.js +16 -0
  11. package/dist/AppForm/createFormHook.public.d.ts +3 -0
  12. package/dist/AppForm/createFormHook.public.js +20 -0
  13. package/dist/AppForm/createFormHookTypes.public.d.ts +12 -0
  14. package/dist/AppForm/createFormHookTypes.public.js +1 -0
  15. package/dist/AppForm/fieldComponentHelpers.lib.d.ts +5 -0
  16. package/dist/AppForm/fieldComponentHelpers.lib.js +10 -0
  17. package/dist/AppForm/getFormHookHelpers.public.d.ts +31 -0
  18. package/dist/AppForm/getFormHookHelpers.public.js +13 -0
  19. package/dist/AppForm/initializeAppForm.lib.d.ts +4 -0
  20. package/dist/AppForm/initializeAppForm.lib.js +5 -0
  21. package/dist/Components.public.d.ts +52 -0
  22. package/dist/Components.public.js +1 -0
  23. package/dist/Field.svelte +125 -314
  24. package/dist/Field.svelte.d.ts +14 -30
  25. package/dist/FieldGroup/FieldGroupApi.public.d.ts +15 -0
  26. package/dist/FieldGroup/FieldGroupApi.public.js +1 -0
  27. package/dist/FieldGroup/withFields.lib.d.ts +5 -0
  28. package/dist/FieldGroup/withFields.lib.js +44 -0
  29. package/dist/FieldGroup/withFields.public.d.ts +70 -0
  30. package/dist/FieldGroup/withFields.public.js +3 -0
  31. package/dist/FormGroup.svelte +81 -302
  32. package/dist/FormGroup.svelte.d.ts +13 -30
  33. package/dist/Subscribe.svelte +18 -8
  34. package/dist/Subscribe.svelte.d.ts +5 -3
  35. package/dist/createForm.public.d.ts +5 -0
  36. package/dist/createForm.public.js +5 -0
  37. package/dist/createForm.svelte.d.ts +11 -27
  38. package/dist/createForm.svelte.js +29 -19
  39. package/dist/formApiTypes.public.d.ts +13 -0
  40. package/dist/formApiTypes.public.js +1 -0
  41. package/dist/formType.public.d.ts +7 -0
  42. package/dist/formType.public.js +1 -0
  43. package/dist/index.d.ts +13 -4
  44. package/dist/index.js +13 -3
  45. package/dist/utils.lib.d.ts +1 -0
  46. package/dist/utils.lib.js +28 -0
  47. package/package.json +5 -5
  48. package/src/AppForm/AppForm.svelte +14 -0
  49. package/src/AppForm/Components.lib.ts +28 -0
  50. package/src/AppForm/SvelteAppFormApi.public.ts +14 -0
  51. package/src/AppForm/appFormOptions.public.ts +57 -0
  52. package/src/AppForm/componentMap.public.ts +19 -0
  53. package/src/AppForm/contexts.lib.ts +24 -0
  54. package/src/AppForm/createFormHook.public.ts +33 -0
  55. package/src/AppForm/createFormHookTypes.public.ts +30 -0
  56. package/src/AppForm/fieldComponentHelpers.lib.ts +24 -0
  57. package/src/AppForm/getFormHookHelpers.public.ts +82 -0
  58. package/src/AppForm/initializeAppForm.lib.ts +18 -0
  59. package/src/Components.public.ts +371 -0
  60. package/src/Field.svelte +125 -314
  61. package/src/FieldGroup/FieldGroupApi.public.ts +100 -0
  62. package/src/FieldGroup/withFields.lib.ts +82 -0
  63. package/src/FieldGroup/withFields.public.ts +179 -0
  64. package/src/FormGroup.svelte +81 -302
  65. package/src/Subscribe.svelte +18 -8
  66. package/src/createForm.public.ts +26 -0
  67. package/src/createForm.svelte.ts +62 -336
  68. package/src/formApiTypes.public.ts +48 -0
  69. package/src/formType.public.ts +46 -0
  70. package/src/index.ts +13 -12
  71. package/src/utils.lib.ts +30 -0
  72. package/dist/AppField.svelte +0 -19
  73. package/dist/AppField.svelte.d.ts +0 -10
  74. package/dist/AppForm.svelte +0 -16
  75. package/dist/InnerAppField.svelte +0 -17
  76. package/dist/InnerAppField.svelte.d.ts +0 -9
  77. package/dist/createFormCreator.svelte.d.ts +0 -26
  78. package/dist/createFormCreator.svelte.js +0 -51
  79. package/dist/types.d.ts +0 -21
  80. package/src/AppField.svelte +0 -19
  81. package/src/AppForm.svelte +0 -16
  82. package/src/InnerAppField.svelte +0 -17
  83. package/src/createFormCreator.svelte.ts +0 -321
  84. package/src/types.ts +0 -567
  85. /package/dist/{AppForm.svelte.d.ts → AppForm/AppForm.svelte.d.ts} +0 -0
  86. /package/dist/{types.js → AppForm/SvelteAppFormApi.public.js} +0 -0
@@ -1,350 +1,76 @@
1
- import { FormApi } from '@tanstack/form-core'
1
+ import { InternalFormApi } from '@tanstack/form-core/internals'
2
2
  import { useSelector } from '@tanstack/svelte-store'
3
3
  import { onMount } from 'svelte'
4
4
  import Field from './Field.svelte'
5
5
  import FormGroup from './FormGroup.svelte'
6
6
  import Subscribe from './Subscribe.svelte'
7
- import type {
8
- Component,
9
- ComponentConstructorOptions,
10
- Snippet,
11
- SvelteComponent,
12
- } from 'svelte'
13
- import type {
14
- FormAsyncValidateOrFn,
15
- FormOptions,
16
- FormState,
17
- FormValidateOrFn,
18
- } from '@tanstack/form-core'
19
- import type {
20
- FieldComponent,
21
- FormGroupComponent,
22
- WithoutFunction,
23
- } from './types.js'
7
+ import { withComponentProps } from './utils.lib.js'
8
+ import type { FormOptions } from '@tanstack/form-core'
9
+ import type { Component } from 'svelte'
10
+ import type { AnyInternalFormApi } from '@tanstack/form-core/internals'
11
+ import type { SvelteTanStackFormComponents } from './Components.public'
24
12
 
25
- export interface SvelteFormApi<
26
- TParentData,
27
- TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
28
- TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
29
- TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
30
- TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
31
- TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
32
- TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
33
- TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
34
- TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
35
- TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
36
- TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
37
- TSubmitMeta,
38
- > {
39
- Field: FieldComponent<
40
- TParentData,
41
- TFormOnMount,
42
- TFormOnChange,
43
- TFormOnChangeAsync,
44
- TFormOnBlur,
45
- TFormOnBlurAsync,
46
- TFormOnSubmit,
47
- TFormOnSubmitAsync,
48
- TFormOnDynamic,
49
- TFormOnDynamicAsync,
50
- TFormOnServer,
51
- TSubmitMeta
52
- >
53
- FormGroup: FormGroupComponent<
54
- TParentData,
55
- TFormOnMount,
56
- TFormOnChange,
57
- TFormOnChangeAsync,
58
- TFormOnBlur,
59
- TFormOnBlurAsync,
60
- TFormOnSubmit,
61
- TFormOnSubmitAsync,
62
- TFormOnDynamic,
63
- TFormOnDynamicAsync,
64
- TFormOnServer,
65
- TSubmitMeta
66
- >
67
- useSelector: <
68
- TSelected = NoInfer<
69
- FormState<
70
- TParentData,
71
- TFormOnMount,
72
- TFormOnChange,
73
- TFormOnChangeAsync,
74
- TFormOnBlur,
75
- TFormOnBlurAsync,
76
- TFormOnSubmit,
77
- TFormOnSubmitAsync,
78
- TFormOnDynamic,
79
- TFormOnDynamicAsync,
80
- TFormOnServer
81
- >
82
- >,
83
- >(
84
- selector?: (
85
- state: NoInfer<
86
- FormState<
87
- TParentData,
88
- TFormOnMount,
89
- TFormOnChange,
90
- TFormOnChangeAsync,
91
- TFormOnBlur,
92
- TFormOnBlurAsync,
93
- TFormOnSubmit,
94
- TFormOnSubmitAsync,
95
- TFormOnDynamic,
96
- TFormOnDynamicAsync,
97
- TFormOnServer
98
- >
99
- >,
100
- ) => TSelected,
101
- ) => { current: TSelected }
102
- /**
103
- * @deprecated Use `form.useSelector` instead.
104
- */
105
- useStore: <
106
- TSelected = NoInfer<
107
- FormState<
108
- TParentData,
109
- TFormOnMount,
110
- TFormOnChange,
111
- TFormOnChangeAsync,
112
- TFormOnBlur,
113
- TFormOnBlurAsync,
114
- TFormOnSubmit,
115
- TFormOnSubmitAsync,
116
- TFormOnDynamic,
117
- TFormOnDynamicAsync,
118
- TFormOnServer
119
- >
120
- >,
121
- >(
122
- selector?: (
123
- state: NoInfer<
124
- FormState<
125
- TParentData,
126
- TFormOnMount,
127
- TFormOnChange,
128
- TFormOnChangeAsync,
129
- TFormOnBlur,
130
- TFormOnBlurAsync,
131
- TFormOnSubmit,
132
- TFormOnSubmitAsync,
133
- TFormOnDynamic,
134
- TFormOnDynamicAsync,
135
- TFormOnServer
136
- >
137
- >,
138
- ) => TSelected,
139
- ) => { current: TSelected }
140
- // This giant type allows the type
141
- // - to be used as a function (which they are now in Svelte 5)
142
- // - to be used as a class (which they were in Svelte 4, and which Svelte intellisense still uses for backwards compat)
143
- // - to preserve the generics correctly
144
- // Once Svelte intellisense no longer has/needs backwards compat, we can remove the class constructor part
145
- Subscribe: (<
146
- TSelected = NoInfer<
147
- FormState<
148
- TParentData,
149
- TFormOnMount,
150
- TFormOnChange,
151
- TFormOnChangeAsync,
152
- TFormOnBlur,
153
- TFormOnBlurAsync,
154
- TFormOnSubmit,
155
- TFormOnSubmitAsync,
156
- TFormOnDynamic,
157
- TFormOnDynamicAsync,
158
- TFormOnServer
159
- >
160
- >,
161
- >(
162
- internal: any,
163
- props: {
164
- selector?: (
165
- state: NoInfer<
166
- FormState<
167
- TParentData,
168
- TFormOnMount,
169
- TFormOnChange,
170
- TFormOnChangeAsync,
171
- TFormOnBlur,
172
- TFormOnBlurAsync,
173
- TFormOnSubmit,
174
- TFormOnSubmitAsync,
175
- TFormOnDynamic,
176
- TFormOnDynamicAsync,
177
- TFormOnServer
178
- >
179
- >,
180
- ) => TSelected
181
- children: Snippet<[NoInfer<TSelected>]>
182
- },
183
- ) => {}) &
184
- (new <
185
- TSelected = NoInfer<
186
- FormState<
187
- TParentData,
188
- TFormOnMount,
189
- TFormOnChange,
190
- TFormOnChangeAsync,
191
- TFormOnBlur,
192
- TFormOnBlurAsync,
193
- TFormOnSubmit,
194
- TFormOnSubmitAsync,
195
- TFormOnDynamic,
196
- TFormOnDynamicAsync,
197
- TFormOnServer
198
- >
199
- >,
200
- >(
201
- opts: ComponentConstructorOptions<{
202
- selector?: (
203
- state: NoInfer<
204
- FormState<
205
- TParentData,
206
- TFormOnMount,
207
- TFormOnChange,
208
- TFormOnChangeAsync,
209
- TFormOnBlur,
210
- TFormOnBlurAsync,
211
- TFormOnSubmit,
212
- TFormOnSubmitAsync,
213
- TFormOnDynamic,
214
- TFormOnDynamicAsync,
215
- TFormOnServer
216
- >
217
- >,
218
- ) => TSelected
219
- children: Snippet<[NoInfer<TSelected>]>
220
- }>,
221
- ) => SvelteComponent) &
222
- WithoutFunction<Component>
13
+ export interface InternalSvelteFormApi
14
+ extends AnyInternalFormApi, SvelteTanStackFormComponents<any, any, any> {
15
+ _Subscribe: Component<any>
16
+ useSelector: <TSelected = any>(
17
+ selector?: (state: any) => TSelected,
18
+ ) => { readonly current: TSelected }
223
19
  }
224
20
 
225
- /**
226
- * An extended version of the `FormApi` class that includes Svelte-specific functionalities from `SvelteFormApi`
227
- */
228
- export type SvelteFormExtendedApi<
229
- TFormData,
230
- TOnMount extends undefined | FormValidateOrFn<TFormData>,
231
- TOnChange extends undefined | FormValidateOrFn<TFormData>,
232
- TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
233
- TOnBlur extends undefined | FormValidateOrFn<TFormData>,
234
- TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
235
- TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
236
- TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
237
- TOnDynamic extends undefined | FormValidateOrFn<TFormData>,
238
- TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
239
- TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
240
- TSubmitMeta,
241
- > = FormApi<
242
- TFormData,
243
- TOnMount,
244
- TOnChange,
245
- TOnChangeAsync,
246
- TOnBlur,
247
- TOnBlurAsync,
248
- TOnSubmit,
249
- TOnSubmitAsync,
250
- TOnDynamic,
251
- TOnDynamicAsync,
252
- TOnServer,
253
- TSubmitMeta
254
- > &
255
- SvelteFormApi<
256
- TFormData,
257
- TOnMount,
258
- TOnChange,
259
- TOnChangeAsync,
260
- TOnBlur,
261
- TOnBlurAsync,
262
- TOnSubmit,
263
- TOnSubmitAsync,
264
- TOnDynamic,
265
- TOnDynamicAsync,
266
- TOnServer,
267
- TSubmitMeta
268
- >
21
+ export function attachSvelteFormComponents(
22
+ form: AnyInternalFormApi,
23
+ fieldComponents: Record<string, Component<any>> | null,
24
+ ): InternalSvelteFormApi {
25
+ const result = form as InternalSvelteFormApi
269
26
 
270
- export function createForm<
271
- TParentData,
272
- TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
273
- TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
274
- TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
275
- TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
276
- TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
277
- TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
278
- TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
279
- TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
280
- TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
281
- TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
282
- TSubmitMeta,
283
- >(
284
- opts?: () => FormOptions<
285
- TParentData,
286
- TFormOnMount,
287
- TFormOnChange,
288
- TFormOnChangeAsync,
289
- TFormOnBlur,
290
- TFormOnBlurAsync,
291
- TFormOnSubmit,
292
- TFormOnSubmitAsync,
293
- TFormOnDynamic,
294
- TFormOnDynamicAsync,
295
- TFormOnServer,
296
- TSubmitMeta
297
- >,
298
- ) {
299
- const options = opts?.()
300
- const api = new FormApi<
301
- TParentData,
302
- TFormOnMount,
303
- TFormOnChange,
304
- TFormOnChangeAsync,
305
- TFormOnBlur,
306
- TFormOnBlurAsync,
307
- TFormOnSubmit,
308
- TFormOnSubmitAsync,
309
- TFormOnDynamic,
310
- TFormOnDynamicAsync,
311
- TFormOnServer,
312
- TSubmitMeta
313
- >(options)
314
- const extendedApi: typeof api &
315
- SvelteFormApi<
316
- TParentData,
317
- TFormOnMount,
318
- TFormOnChange,
319
- TFormOnChangeAsync,
320
- TFormOnBlur,
321
- TFormOnBlurAsync,
322
- TFormOnSubmit,
323
- TFormOnSubmitAsync,
324
- TFormOnDynamic,
325
- TFormOnDynamicAsync,
326
- TFormOnServer,
327
- TSubmitMeta
328
- > = api as never
27
+ result.Field = ((internals: any, props: any) =>
28
+ Field(
29
+ internals,
30
+ withComponentProps(props, {
31
+ form,
32
+ fieldComponents: fieldComponents ?? {},
33
+ }),
34
+ )) as never
35
+ result.ArrayField = ((internals: any, props: any) =>
36
+ Field(
37
+ internals,
38
+ withComponentProps(props, {
39
+ form,
40
+ array: true,
41
+ fieldComponents: fieldComponents ?? {},
42
+ }),
43
+ )) as never
44
+ result._Subscribe = (internals, props) => Subscribe(internals, props)
45
+ result.Subscribe = ((internals: any, props: any) =>
46
+ Subscribe(
47
+ internals,
48
+ withComponentProps(props, { source: form.atom }),
49
+ )) as never
50
+ result.FormGroup = ((internals: any, props: any) =>
51
+ FormGroup(internals, withComponentProps(props, { form }))) as never
52
+ result.useSelector = ((selector?: (state: any) => any) =>
53
+ useSelector(form.atom, selector)) as never
329
54
 
330
- // @ts-expect-error constructor definition exists only on a type level
331
- extendedApi.Field = (internal, props) =>
332
- Field(internal, { ...props, form: api as never } as never)
333
- // @ts-expect-error constructor definition exists only on a type level
334
- extendedApi.FormGroup = (internal, props) =>
335
- FormGroup(internal, { ...props, form: api as never } as never)
336
- extendedApi.useSelector = (selector) => useSelector(api.store, selector)
337
- /** @deprecated Use `form.useSelector` instead. */
338
- extendedApi.useStore = extendedApi.useSelector
339
- // @ts-expect-error constructor definition exists only on a type level
340
- extendedApi.Subscribe = (internal, props) =>
341
- Subscribe(internal, { ...props, store: api.store })
55
+ return result
56
+ }
57
+
58
+ export function initializeForm(
59
+ options: FormOptions<any, any, any>,
60
+ ): InternalSvelteFormApi {
61
+ return attachSvelteFormComponents(new InternalFormApi(options), null)
62
+ }
342
63
 
343
- onMount(api.mount)
64
+ export function createInternalForm(
65
+ options: () => FormOptions<any, any, any>,
66
+ initialize: (options: FormOptions<any, any, any>) => InternalSvelteFormApi,
67
+ ): InternalSvelteFormApi {
68
+ const form = initialize(options())
344
69
 
345
- // formApi.update should not have any side effects. Think of it like a `useRef`
346
- // that we need to keep updated every render with the most up-to-date information.
347
- $effect.pre(() => api.update(opts?.()))
70
+ $effect.pre(() => {
71
+ form._update(options())
72
+ })
73
+ onMount(() => form.mount())
348
74
 
349
- return extendedApi
75
+ return form
350
76
  }
@@ -0,0 +1,48 @@
1
+ import type {
2
+ AnyFormApi,
3
+ FormApi,
4
+ FormErrorTypes,
5
+ FormState,
6
+ } from '@tanstack/form-core'
7
+ import type { Component } from 'svelte'
8
+ import type { SvelteTanStackFormComponents } from './Components.public'
9
+ import type {
10
+ AnySvelteFormComponentMap,
11
+ DefaultSvelteFormComponentMap,
12
+ } from './AppForm/componentMap.public'
13
+
14
+ export interface SvelteFormSelectors<
15
+ TFormData,
16
+ TFormErrorTypes extends FormErrorTypes,
17
+ > {
18
+ useSelector: <TSelected = FormState<TFormData, TFormErrorTypes>>(
19
+ selector?: (state: FormState<TFormData, TFormErrorTypes>) => TSelected,
20
+ ) => { readonly current: TSelected }
21
+ }
22
+
23
+ type ExtendedFormApi<
24
+ TFormData,
25
+ TFormErrorTypes extends FormErrorTypes,
26
+ TFieldComponents extends Record<string, Component<any>>,
27
+ > = FormApi<TFormData, TFormErrorTypes> &
28
+ SvelteTanStackFormComponents<TFormData, TFormErrorTypes, TFieldComponents> &
29
+ SvelteFormSelectors<TFormData, TFormErrorTypes>
30
+
31
+ export type SvelteFormApi<
32
+ TFormData,
33
+ TFormErrorTypes extends FormErrorTypes,
34
+ TComponents extends AnySvelteFormComponentMap = DefaultSvelteFormComponentMap,
35
+ > = unknown extends TComponents['formComponents']
36
+ ? ExtendedFormApi<TFormData, TFormErrorTypes, TComponents['fieldComponents']>
37
+ : ExtendedFormApi<
38
+ TFormData,
39
+ TFormErrorTypes,
40
+ TComponents['fieldComponents']
41
+ > &
42
+ TComponents['formComponents']
43
+
44
+ export type AnySvelteFormApi = AnyFormApi &
45
+ SvelteTanStackFormComponents<any, any, any> &
46
+ SvelteFormSelectors<any, any>
47
+
48
+ export type { SvelteFormComponentMap } from './AppForm/componentMap.public'
@@ -0,0 +1,46 @@
1
+ import type {
2
+ AnyFormOptions,
3
+ FormOptions,
4
+ FormValidators,
5
+ ToFormErrorTypes,
6
+ } from '@tanstack/form-core'
7
+ import type { AppFormOptions } from './AppForm/appFormOptions.public'
8
+ import type {
9
+ AnySvelteFormComponentMap,
10
+ DefaultSvelteFormComponentMap,
11
+ } from './AppForm/componentMap.public'
12
+ import type { SvelteFormApi } from './formApiTypes.public'
13
+
14
+ type SvelteFormTypeErrorTypes<
15
+ TValidators extends FormValidators<any>,
16
+ TSubmitReturn,
17
+ > = unknown extends TSubmitReturn
18
+ ? any
19
+ : ToFormErrorTypes<TValidators, TSubmitReturn>
20
+
21
+ export type SvelteFormType<
22
+ TOptions extends
23
+ AnyFormOptions | AppFormOptions<any, any, any, AnySvelteFormComponentMap>,
24
+ > =
25
+ TOptions extends AppFormOptions<
26
+ infer TData,
27
+ infer TValidators,
28
+ infer TSubmitReturn,
29
+ infer TComponents
30
+ >
31
+ ? SvelteFormApi<
32
+ TData,
33
+ SvelteFormTypeErrorTypes<TValidators, TSubmitReturn>,
34
+ TComponents
35
+ >
36
+ : TOptions extends FormOptions<
37
+ infer TData,
38
+ infer TValidators,
39
+ infer TSubmitReturn
40
+ >
41
+ ? SvelteFormApi<
42
+ TData,
43
+ SvelteFormTypeErrorTypes<TValidators, TSubmitReturn>,
44
+ DefaultSvelteFormComponentMap
45
+ >
46
+ : never
package/src/index.ts CHANGED
@@ -1,16 +1,17 @@
1
1
  export * from '@tanstack/form-core'
2
+ export * from '@tanstack/svelte-store'
2
3
 
3
- export { useSelector, useStore } from '@tanstack/svelte-store'
4
-
5
- export { createForm, type SvelteFormApi } from './createForm.svelte.js'
6
-
4
+ export * from './createForm.public'
5
+ export * from './formApiTypes.public'
6
+ export * from './formType.public'
7
+ export * from './Components.public'
7
8
  export { default as Field, createField } from './Field.svelte'
8
-
9
9
  export { default as FormGroup, createFormGroup } from './FormGroup.svelte'
10
-
11
- export type { FieldComponent, FormGroupComponent } from './types.js'
12
-
13
- export {
14
- createFormCreator,
15
- createFormCreatorContexts,
16
- } from './createFormCreator.svelte.js'
10
+ export * from './FieldGroup/FieldGroupApi.public'
11
+ export * from './FieldGroup/withFields.public'
12
+ export * from './AppForm/SvelteAppFormApi.public'
13
+ export * from './AppForm/appFormOptions.public'
14
+ export * from './AppForm/componentMap.public'
15
+ export * from './AppForm/createFormHook.public'
16
+ export * from './AppForm/createFormHookTypes.public'
17
+ export * from './AppForm/getFormHookHelpers.public'
@@ -0,0 +1,30 @@
1
+ export function withComponentProps<
2
+ TProps extends object,
3
+ TExtra extends object,
4
+ >(props: TProps, extra: TExtra): TProps & TExtra {
5
+ return new Proxy(props as TProps & TExtra, {
6
+ get(target, property, receiver) {
7
+ if (Reflect.has(extra, property)) return Reflect.get(extra, property)
8
+ return Reflect.get(target, property, receiver)
9
+ },
10
+ has(target, property) {
11
+ return Reflect.has(extra, property) || Reflect.has(target, property)
12
+ },
13
+ ownKeys(target) {
14
+ return [
15
+ ...new Set([...Reflect.ownKeys(target), ...Reflect.ownKeys(extra)]),
16
+ ]
17
+ },
18
+ getOwnPropertyDescriptor(target, property) {
19
+ if (Reflect.has(extra, property)) {
20
+ return {
21
+ configurable: true,
22
+ enumerable: true,
23
+ value: Reflect.get(extra, property),
24
+ writable: false,
25
+ }
26
+ }
27
+ return Reflect.getOwnPropertyDescriptor(target, property)
28
+ },
29
+ })
30
+ }
@@ -1,19 +0,0 @@
1
- <!-- Take "form" as an prop, pass it to context, and render children -->
2
- <script lang="ts">
3
- import type { Snippet } from 'svelte'
4
- import InnerAppField from './InnerAppField.svelte'
5
-
6
- interface Props {
7
- form: any
8
- fieldComponents: any
9
- children: Snippet
10
- fieldProps: any
11
- }
12
- const { children: childrenProp, form, fieldComponents, fieldProps }: Props = $props()
13
- </script>
14
-
15
- <form.Field {...fieldProps}>
16
- {#snippet children(field: any)}
17
- <InnerAppField field={field} children={childrenProp} fieldComponents={fieldComponents}/>
18
- {/snippet}
19
- </form.Field>
@@ -1,10 +0,0 @@
1
- import type { Snippet } from 'svelte';
2
- interface Props {
3
- form: any;
4
- fieldComponents: any;
5
- children: Snippet;
6
- fieldProps: any;
7
- }
8
- declare const AppField: import("svelte").Component<Props, {}, "">;
9
- type AppField = ReturnType<typeof AppField>;
10
- export default AppField;
@@ -1,16 +0,0 @@
1
- <!-- Take "form" as an prop, pass it to context, and render children -->
2
- <script lang="ts">
3
- import { setContext, type Snippet } from 'svelte'
4
- import { formContextKey } from './context-keys.js'
5
-
6
- interface Props {
7
- form: any
8
- children: Snippet
9
- }
10
-
11
- const { children, form }: Props = $props()
12
-
13
- setContext(formContextKey, form)
14
- </script>
15
-
16
- {@render children?.()}
@@ -1,17 +0,0 @@
1
- <!-- Take "form" as an prop, pass it to context, and render children -->
2
- <script lang="ts">
3
- import { setContext, type Snippet } from 'svelte'
4
- import { fieldContextKey } from './context-keys.js'
5
-
6
- interface Props {
7
- field: any
8
- fieldComponents: any
9
- children: Snippet<[any]>
10
- }
11
-
12
- const { children, field, fieldComponents }: Props = $props()
13
-
14
- setContext(fieldContextKey, field)
15
- </script>
16
-
17
- {@render children?.(Object.assign(field, fieldComponents))}
@@ -1,9 +0,0 @@
1
- import { type Snippet } from 'svelte';
2
- interface Props {
3
- field: any;
4
- fieldComponents: any;
5
- children: Snippet<[any]>;
6
- }
7
- declare const InnerAppField: import("svelte").Component<Props, {}, "">;
8
- type InnerAppField = ReturnType<typeof InnerAppField>;
9
- export default InnerAppField;
@@ -1,26 +0,0 @@
1
- import type { FieldApi, FormAsyncValidateOrFn, FormOptions, FormValidateOrFn } from '@tanstack/form-core';
2
- import type { FieldComponent } from './types.js';
3
- import type { SvelteFormExtendedApi } from './createForm.svelte';
4
- import type { Component, Snippet } from 'svelte';
5
- export declare function createFormCreatorContexts(): {
6
- useFieldContext: <TData>() => FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
7
- useFormContext: () => SvelteFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;
8
- };
9
- interface CreateFormRuneProps<TFieldComponents extends Record<string, Component<any, any>>, TFormComponents extends Record<string, Component<any, any>>> {
10
- fieldComponents: TFieldComponents;
11
- formComponents: TFormComponents;
12
- }
13
- /**
14
- * @private
15
- */
16
- type AppFieldExtendedSvelteFormApi<TFormData, 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>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TFieldComponents extends Record<string, Component<any, any>>, TFormComponents extends Record<string, Component<any, any>>> = SvelteFormExtendedApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> & NoInfer<TFormComponents> & {
17
- AppField: FieldComponent<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, NoInfer<TFieldComponents>>;
18
- AppForm: Component<{
19
- children: Snippet;
20
- }>;
21
- };
22
- export declare function createFormCreator<const TComponents extends Record<string, Component<any, any>>, const TFormComponents extends Record<string, Component<any, any>>>({ fieldComponents, formComponents, }: CreateFormRuneProps<TComponents, TFormComponents>): {
23
- createAppForm: <TFormData, 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>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta>(props: () => FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => AppFieldExtendedSvelteFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents>;
24
- getFormType: <TFormData, 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>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta>(_formProps: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => AppFieldExtendedSvelteFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents>;
25
- };
26
- export {};