@tanstack/svelte-form 1.32.1 → 1.33.1

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/Field.svelte CHANGED
@@ -8,7 +8,7 @@
8
8
  type FormAsyncValidateOrFn,
9
9
  type FormValidateOrFn,
10
10
  } from '@tanstack/form-core'
11
- import { useStore } from '@tanstack/svelte-store'
11
+ import { useSelector } from '@tanstack/svelte-store'
12
12
  import { onMount, type Snippet } from 'svelte'
13
13
  import type { CreateFieldOptions } from './types.js'
14
14
 
@@ -96,26 +96,26 @@
96
96
  api.update(current)
97
97
  })
98
98
 
99
- const storeSub = useStore(api.store, (state) =>
99
+ const storeSub = useSelector(api.store, (state) =>
100
100
  options.mode === 'array'
101
101
  ? state.meta._arrayVersion || 0
102
102
  : state.value,
103
103
  )
104
- const metaIsTouchedSub = useStore(
104
+ const metaIsTouchedSub = useSelector(
105
105
  api.store,
106
106
  (state) => state.meta.isTouched,
107
107
  )
108
- const metaIsBlurredSub = useStore(
108
+ const metaIsBlurredSub = useSelector(
109
109
  api.store,
110
110
  (state) => state.meta.isBlurred,
111
111
  )
112
- const metaIsDirtySub = useStore(api.store, (state) => state.meta.isDirty)
113
- const metaErrorMapSub = useStore(api.store, (state) => state.meta.errorMap)
114
- const metaErrorSourceMapSub = useStore(
112
+ const metaIsDirtySub = useSelector(api.store, (state) => state.meta.isDirty)
113
+ const metaErrorMapSub = useSelector(api.store, (state) => state.meta.errorMap)
114
+ const metaErrorSourceMapSub = useSelector(
115
115
  api.store,
116
116
  (state) => state.meta.errorSourceMap,
117
117
  )
118
- const metaIsValidatingSub = useStore(
118
+ const metaIsValidatingSub = useSelector(
119
119
  api.store,
120
120
  (state) => state.meta.isValidating,
121
121
  )
@@ -0,0 +1,322 @@
1
+ <script module lang="ts">
2
+ import {
3
+ type DeepKeys,
4
+ type DeepValue,
5
+ FormGroupApi,
6
+ type FormGroupApiOptions,
7
+ type FormGroupAsyncValidateOrFn,
8
+ type FormGroupValidateOrFn,
9
+ type FormAsyncValidateOrFn,
10
+ type FormValidateOrFn,
11
+ } from '@tanstack/form-core'
12
+ import { useSelector } from '@tanstack/svelte-store'
13
+ import { onMount, type Snippet } from 'svelte'
14
+
15
+ export function createFormGroup<
16
+ TParentData,
17
+ TName extends DeepKeys<TParentData>,
18
+ TData extends DeepValue<TParentData, TName>,
19
+ TOnMount extends
20
+ | undefined
21
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
22
+ TOnChange extends
23
+ | undefined
24
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
25
+ TOnChangeAsync extends
26
+ | undefined
27
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
28
+ TOnBlur extends
29
+ | undefined
30
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
31
+ TOnBlurAsync extends
32
+ | undefined
33
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
34
+ TOnSubmit extends
35
+ | undefined
36
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
37
+ TOnSubmitAsync extends
38
+ | undefined
39
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
40
+ TOnDynamic extends
41
+ | undefined
42
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
43
+ TOnDynamicAsync extends
44
+ | undefined
45
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
46
+ TSubmitMeta,
47
+ TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
48
+ TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
49
+ TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
50
+ TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
51
+ TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
52
+ TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
53
+ TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
54
+ TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
55
+ TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
56
+ TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
57
+ TParentSubmitMeta,
58
+ >(
59
+ opts: () => FormGroupApiOptions<
60
+ TParentData,
61
+ TName,
62
+ TData,
63
+ TOnMount,
64
+ TOnChange,
65
+ TOnChangeAsync,
66
+ TOnBlur,
67
+ TOnBlurAsync,
68
+ TOnSubmit,
69
+ TOnSubmitAsync,
70
+ TOnDynamic,
71
+ TOnDynamicAsync,
72
+ TSubmitMeta,
73
+ TFormOnMount,
74
+ TFormOnChange,
75
+ TFormOnChangeAsync,
76
+ TFormOnBlur,
77
+ TFormOnBlurAsync,
78
+ TFormOnSubmit,
79
+ TFormOnSubmitAsync,
80
+ TFormOnDynamic,
81
+ TFormOnDynamicAsync,
82
+ TFormOnServer,
83
+ TParentSubmitMeta
84
+ >,
85
+ ) {
86
+ const options = opts()
87
+
88
+ const api = new FormGroupApi(options)
89
+
90
+ const extendedApi: typeof api = api as never
91
+
92
+ let mounted = false
93
+ // Instantiates form group meta and removes it when unrendered
94
+ onMount(() => {
95
+ const cleanupFn = api.mount()
96
+ mounted = true
97
+ return () => {
98
+ cleanupFn()
99
+ mounted = false
100
+ }
101
+ })
102
+
103
+ $effect.pre(() => {
104
+ // Invoke options function before mounted check, else it wouldn't rerun on changes to options.
105
+ // Changes to options are seen by the effect because signals inside them are picked up.
106
+ const current = opts()
107
+ if (!mounted) return
108
+ api.update(current)
109
+ })
110
+
111
+ const storeSub = useSelector(api.store)
112
+ Object.defineProperty(extendedApi, 'state', {
113
+ get() {
114
+ return storeSub.current
115
+ },
116
+ })
117
+
118
+ return extendedApi
119
+ }
120
+ </script>
121
+
122
+ <script
123
+ lang="ts"
124
+ generics="
125
+ TParentData,
126
+ TName extends DeepKeys<TParentData>,
127
+ TData extends DeepValue<TParentData, TName>,
128
+ TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
129
+ TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
130
+ TOnChangeAsync extends
131
+ | undefined
132
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
133
+ TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
134
+ TOnBlurAsync extends
135
+ | undefined
136
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
137
+ TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
138
+ TOnSubmitAsync extends
139
+ | undefined
140
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
141
+ TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
142
+ TOnDynamicAsync extends
143
+ | undefined
144
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
145
+ TSubmitMeta,
146
+ TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
147
+ TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
148
+ TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
149
+ TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
150
+ TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
151
+ TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
152
+ TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
153
+ TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
154
+ TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
155
+ TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
156
+ TParentSubmitMeta,
157
+ "
158
+ >
159
+ import type { FormGroupApi as FormGroupApiType } from '@tanstack/form-core'
160
+
161
+ type Props<
162
+ TParentData,
163
+ TName extends DeepKeys<TParentData>,
164
+ TData extends DeepValue<TParentData, TName>,
165
+ TOnMount extends
166
+ | undefined
167
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
168
+ TOnChange extends
169
+ | undefined
170
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
171
+ TOnChangeAsync extends
172
+ | undefined
173
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
174
+ TOnBlur extends
175
+ | undefined
176
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
177
+ TOnBlurAsync extends
178
+ | undefined
179
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
180
+ TOnSubmit extends
181
+ | undefined
182
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
183
+ TOnSubmitAsync extends
184
+ | undefined
185
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
186
+ TOnDynamic extends
187
+ | undefined
188
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
189
+ TOnDynamicAsync extends
190
+ | undefined
191
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
192
+ TSubmitMeta,
193
+ TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
194
+ TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
195
+ TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
196
+ TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
197
+ TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
198
+ TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
199
+ TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
200
+ TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
201
+ TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
202
+ TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
203
+ TParentSubmitMeta,
204
+ > = {
205
+ children: Snippet<
206
+ [
207
+ FormGroupApiType<
208
+ TParentData,
209
+ TName,
210
+ TData,
211
+ TOnMount,
212
+ TOnChange,
213
+ TOnChangeAsync,
214
+ TOnBlur,
215
+ TOnBlurAsync,
216
+ TOnSubmit,
217
+ TOnSubmitAsync,
218
+ TOnDynamic,
219
+ TOnDynamicAsync,
220
+ TSubmitMeta,
221
+ TFormOnMount,
222
+ TFormOnChange,
223
+ TFormOnChangeAsync,
224
+ TFormOnBlur,
225
+ TFormOnBlurAsync,
226
+ TFormOnSubmit,
227
+ TFormOnSubmitAsync,
228
+ TFormOnDynamic,
229
+ TFormOnDynamicAsync,
230
+ TFormOnServer,
231
+ TParentSubmitMeta
232
+ >,
233
+ ]
234
+ >
235
+ } & FormGroupApiOptions<
236
+ TParentData,
237
+ TName,
238
+ TData,
239
+ TOnMount,
240
+ TOnChange,
241
+ TOnChangeAsync,
242
+ TOnBlur,
243
+ TOnBlurAsync,
244
+ TOnSubmit,
245
+ TOnSubmitAsync,
246
+ TOnDynamic,
247
+ TOnDynamicAsync,
248
+ TSubmitMeta,
249
+ TFormOnMount,
250
+ TFormOnChange,
251
+ TFormOnChangeAsync,
252
+ TFormOnBlur,
253
+ TFormOnBlurAsync,
254
+ TFormOnSubmit,
255
+ TFormOnSubmitAsync,
256
+ TFormOnDynamic,
257
+ TFormOnDynamicAsync,
258
+ TFormOnServer,
259
+ TParentSubmitMeta
260
+ >
261
+
262
+ let {
263
+ children,
264
+ ...formGroupOptions
265
+ }: Props<
266
+ TParentData,
267
+ TName,
268
+ TData,
269
+ TOnMount,
270
+ TOnChange,
271
+ TOnChangeAsync,
272
+ TOnBlur,
273
+ TOnBlurAsync,
274
+ TOnSubmit,
275
+ TOnSubmitAsync,
276
+ TOnDynamic,
277
+ TOnDynamicAsync,
278
+ TSubmitMeta,
279
+ TFormOnMount,
280
+ TFormOnChange,
281
+ TFormOnChangeAsync,
282
+ TFormOnBlur,
283
+ TFormOnBlurAsync,
284
+ TFormOnSubmit,
285
+ TFormOnSubmitAsync,
286
+ TFormOnDynamic,
287
+ TFormOnDynamicAsync,
288
+ TFormOnServer,
289
+ TParentSubmitMeta
290
+ > = $props()
291
+
292
+ const formGroupApi = createFormGroup<
293
+ TParentData,
294
+ TName,
295
+ TData,
296
+ TOnMount,
297
+ TOnChange,
298
+ TOnChangeAsync,
299
+ TOnBlur,
300
+ TOnBlurAsync,
301
+ TOnSubmit,
302
+ TOnSubmitAsync,
303
+ TOnDynamic,
304
+ TOnDynamicAsync,
305
+ TSubmitMeta,
306
+ TFormOnMount,
307
+ TFormOnChange,
308
+ TFormOnChangeAsync,
309
+ TFormOnBlur,
310
+ TFormOnBlurAsync,
311
+ TFormOnSubmit,
312
+ TFormOnSubmitAsync,
313
+ TFormOnDynamic,
314
+ TFormOnDynamicAsync,
315
+ TFormOnServer,
316
+ TParentSubmitMeta
317
+ >(() => {
318
+ return formGroupOptions
319
+ })
320
+ </script>
321
+
322
+ {@render children(formGroupApi)}
@@ -0,0 +1,33 @@
1
+ import { type DeepKeys, type DeepValue, FormGroupApi, type FormGroupApiOptions, type FormGroupAsyncValidateOrFn, type FormGroupValidateOrFn, type FormAsyncValidateOrFn, type FormValidateOrFn } from '@tanstack/form-core';
2
+ import { type Snippet } from 'svelte';
3
+ export declare function createFormGroup<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TSubmitMeta, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta>(opts: () => FormGroupApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>): FormGroupApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
4
+ import type { FormGroupApi as FormGroupApiType } from '@tanstack/form-core';
5
+ type Props<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TSubmitMeta, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta> = {
6
+ children: Snippet<[
7
+ FormGroupApiType<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>
8
+ ]>;
9
+ } & FormGroupApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
10
+ declare function $$render<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TSubmitMeta, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta>(): {
11
+ props: Props<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
12
+ exports: {};
13
+ bindings: "";
14
+ slots: {};
15
+ events: {};
16
+ };
17
+ declare class __sveltets_Render<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TSubmitMeta, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta> {
18
+ props(): ReturnType<typeof $$render<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>>['props'];
19
+ events(): ReturnType<typeof $$render<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>>['events'];
20
+ slots(): ReturnType<typeof $$render<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>>['slots'];
21
+ bindings(): "";
22
+ exports(): {};
23
+ }
24
+ interface $$IsomorphicComponent {
25
+ new <TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TSubmitMeta, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>['props']>, ReturnType<__sveltets_Render<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>['events']>, ReturnType<__sveltets_Render<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>['slots']>> & {
26
+ $$bindings?: ReturnType<__sveltets_Render<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>['bindings']>;
27
+ } & ReturnType<__sveltets_Render<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>['exports']>;
28
+ <TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TSubmitMeta, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta>(internal: unknown, props: ReturnType<__sveltets_Render<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>['props']> & {}): ReturnType<__sveltets_Render<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>['exports']>;
29
+ z_$$bindings?: ReturnType<__sveltets_Render<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>['bindings']>;
30
+ }
31
+ declare const FormGroup: $$IsomorphicComponent;
32
+ type FormGroup<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TSubmitMeta, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta> = InstanceType<typeof FormGroup<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>>;
33
+ export default FormGroup;
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import { useStore } from '@tanstack/svelte-store'
2
+ import { useSelector } from '@tanstack/svelte-store'
3
3
 
4
4
  // Don't bother typing this out, this component is only usable through a wrapper
5
5
  interface Props {
@@ -10,7 +10,7 @@
10
10
 
11
11
  let { children, store, selector = (state) => state }: Props = $props()
12
12
 
13
- const value = useStore(store, selector)
13
+ const value = useSelector(store, selector)
14
14
  </script>
15
15
 
16
16
  {@render children(value.current)}
@@ -1,9 +1,16 @@
1
1
  import { FormApi } from '@tanstack/form-core';
2
2
  import type { Component, ComponentConstructorOptions, Snippet, SvelteComponent } from 'svelte';
3
3
  import type { FormAsyncValidateOrFn, FormOptions, FormState, FormValidateOrFn } from '@tanstack/form-core';
4
- import type { FieldComponent, WithoutFunction } from './types.js';
4
+ import type { FieldComponent, FormGroupComponent, WithoutFunction } from './types.js';
5
5
  export interface SvelteFormApi<TParentData, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TSubmitMeta> {
6
6
  Field: FieldComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
7
+ FormGroup: FormGroupComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
8
+ useSelector: <TSelected = NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>>(selector?: (state: NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>) => TSelected) => {
9
+ current: TSelected;
10
+ };
11
+ /**
12
+ * @deprecated Use `form.useSelector` instead.
13
+ */
7
14
  useStore: <TSelected = NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>>(selector?: (state: NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>) => TSelected) => {
8
15
  current: TSelected;
9
16
  };
@@ -1,7 +1,8 @@
1
1
  import { FormApi } from '@tanstack/form-core';
2
- import { useStore } from '@tanstack/svelte-store';
2
+ import { useSelector } from '@tanstack/svelte-store';
3
3
  import { onMount } from 'svelte';
4
4
  import Field from './Field.svelte';
5
+ import FormGroup from './FormGroup.svelte';
5
6
  import Subscribe from './Subscribe.svelte';
6
7
  export function createForm(opts) {
7
8
  const options = opts?.();
@@ -9,7 +10,11 @@ export function createForm(opts) {
9
10
  const extendedApi = api;
10
11
  // @ts-expect-error constructor definition exists only on a type level
11
12
  extendedApi.Field = (internal, props) => Field(internal, { ...props, form: api });
12
- extendedApi.useStore = (selector) => useStore(api.store, selector);
13
+ // @ts-expect-error constructor definition exists only on a type level
14
+ extendedApi.FormGroup = (internal, props) => FormGroup(internal, { ...props, form: api });
15
+ extendedApi.useSelector = (selector) => useSelector(api.store, selector);
16
+ /** @deprecated Use `form.useSelector` instead. */
17
+ extendedApi.useStore = extendedApi.useSelector;
13
18
  // @ts-expect-error constructor definition exists only on a type level
14
19
  extendedApi.Subscribe = (internal, props) => Subscribe(internal, { ...props, store: api.store });
15
20
  onMount(api.mount);
package/dist/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export * from '@tanstack/form-core';
2
- export { useStore } from '@tanstack/svelte-store';
2
+ export { useSelector, useStore } from '@tanstack/svelte-store';
3
3
  export { createForm, type SvelteFormApi } from './createForm.svelte.js';
4
4
  export { default as Field, createField } from './Field.svelte';
5
- export type { FieldComponent } from './types.js';
5
+ export { default as FormGroup, createFormGroup } from './FormGroup.svelte';
6
+ export type { FieldComponent, FormGroupComponent } from './types.js';
6
7
  export { createFormCreator, createFormCreatorContexts, } from './createFormCreator.svelte.js';
package/dist/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  export * from '@tanstack/form-core';
2
- export { useStore } from '@tanstack/svelte-store';
2
+ export { useSelector, useStore } from '@tanstack/svelte-store';
3
3
  export { createForm } from './createForm.svelte.js';
4
4
  export { default as Field, createField } from './Field.svelte';
5
+ export { default as FormGroup, createFormGroup } from './FormGroup.svelte';
5
6
  export { createFormCreator, createFormCreatorContexts, } from './createFormCreator.svelte.js';
package/dist/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { DeepKeys, DeepValue, FieldApi, FieldApiOptions, FieldAsyncValidateOrFn, FieldValidateOrFn, FormAsyncValidateOrFn, FormValidateOrFn } from '@tanstack/form-core';
1
+ import type { DeepKeys, DeepValue, FieldApi, FieldApiOptions, FieldAsyncValidateOrFn, FieldValidateOrFn, FormAsyncValidateOrFn, FormGroupApi, FormGroupApiOptions, FormGroupAsyncValidateOrFn, FormGroupValidateOrFn, FormValidateOrFn } from '@tanstack/form-core';
2
2
  import type { Component, ComponentConstructorOptions, Snippet, SvelteComponent } from 'svelte';
3
3
  export type CreateFieldOptions<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TSubmitMeta> = FieldApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta> & {
4
4
  mode?: 'value' | 'array';
@@ -12,4 +12,10 @@ type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, TData
12
12
  FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> & ExtendedApi
13
13
  ]>;
14
14
  } & Omit<CreateFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>, 'form'>;
15
+ export type FormGroupComponent<TParentData, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta, ExtendedApi = {}> = (<TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TSubmitMeta>(internal: any, { children, ...formGroupOptions }: Omit<FormGroupComponentProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta, ExtendedApi>, 'form'>) => {}) & (new <TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TSubmitMeta>(opts: ComponentConstructorOptions<Omit<FormGroupComponentProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta, ExtendedApi>, 'form'>>) => SvelteComponent) & WithoutFunction<Component>;
16
+ type FormGroupComponentProps<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>, TSubmitMeta, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta, ExtendedApi = {}> = {
17
+ children: Snippet<[
18
+ FormGroupApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> & ExtendedApi
19
+ ]>;
20
+ } & FormGroupApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TSubmitMeta, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
15
21
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/svelte-form",
3
- "version": "1.32.1",
3
+ "version": "1.33.1",
4
4
  "description": "Powerful, type-safe forms for Svelte.",
5
5
  "author": "tannerlinsley",
6
6
  "license": "MIT",
@@ -31,8 +31,8 @@
31
31
  "src"
32
32
  ],
33
33
  "dependencies": {
34
- "@tanstack/svelte-store": "^0.10.1",
35
- "@tanstack/form-core": "1.32.1"
34
+ "@tanstack/svelte-store": "^0.12.0",
35
+ "@tanstack/form-core": "1.33.1"
36
36
  },
37
37
  "devDependencies": {
38
38
  "@sveltejs/package": "^2.5.3",
package/src/Field.svelte CHANGED
@@ -8,7 +8,7 @@
8
8
  type FormAsyncValidateOrFn,
9
9
  type FormValidateOrFn,
10
10
  } from '@tanstack/form-core'
11
- import { useStore } from '@tanstack/svelte-store'
11
+ import { useSelector } from '@tanstack/svelte-store'
12
12
  import { onMount, type Snippet } from 'svelte'
13
13
  import type { CreateFieldOptions } from './types.js'
14
14
 
@@ -96,26 +96,26 @@
96
96
  api.update(current)
97
97
  })
98
98
 
99
- const storeSub = useStore(api.store, (state) =>
99
+ const storeSub = useSelector(api.store, (state) =>
100
100
  options.mode === 'array'
101
101
  ? state.meta._arrayVersion || 0
102
102
  : state.value,
103
103
  )
104
- const metaIsTouchedSub = useStore(
104
+ const metaIsTouchedSub = useSelector(
105
105
  api.store,
106
106
  (state) => state.meta.isTouched,
107
107
  )
108
- const metaIsBlurredSub = useStore(
108
+ const metaIsBlurredSub = useSelector(
109
109
  api.store,
110
110
  (state) => state.meta.isBlurred,
111
111
  )
112
- const metaIsDirtySub = useStore(api.store, (state) => state.meta.isDirty)
113
- const metaErrorMapSub = useStore(api.store, (state) => state.meta.errorMap)
114
- const metaErrorSourceMapSub = useStore(
112
+ const metaIsDirtySub = useSelector(api.store, (state) => state.meta.isDirty)
113
+ const metaErrorMapSub = useSelector(api.store, (state) => state.meta.errorMap)
114
+ const metaErrorSourceMapSub = useSelector(
115
115
  api.store,
116
116
  (state) => state.meta.errorSourceMap,
117
117
  )
118
- const metaIsValidatingSub = useStore(
118
+ const metaIsValidatingSub = useSelector(
119
119
  api.store,
120
120
  (state) => state.meta.isValidating,
121
121
  )
@@ -0,0 +1,322 @@
1
+ <script module lang="ts">
2
+ import {
3
+ type DeepKeys,
4
+ type DeepValue,
5
+ FormGroupApi,
6
+ type FormGroupApiOptions,
7
+ type FormGroupAsyncValidateOrFn,
8
+ type FormGroupValidateOrFn,
9
+ type FormAsyncValidateOrFn,
10
+ type FormValidateOrFn,
11
+ } from '@tanstack/form-core'
12
+ import { useSelector } from '@tanstack/svelte-store'
13
+ import { onMount, type Snippet } from 'svelte'
14
+
15
+ export function createFormGroup<
16
+ TParentData,
17
+ TName extends DeepKeys<TParentData>,
18
+ TData extends DeepValue<TParentData, TName>,
19
+ TOnMount extends
20
+ | undefined
21
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
22
+ TOnChange extends
23
+ | undefined
24
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
25
+ TOnChangeAsync extends
26
+ | undefined
27
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
28
+ TOnBlur extends
29
+ | undefined
30
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
31
+ TOnBlurAsync extends
32
+ | undefined
33
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
34
+ TOnSubmit extends
35
+ | undefined
36
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
37
+ TOnSubmitAsync extends
38
+ | undefined
39
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
40
+ TOnDynamic extends
41
+ | undefined
42
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
43
+ TOnDynamicAsync extends
44
+ | undefined
45
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
46
+ TSubmitMeta,
47
+ TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
48
+ TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
49
+ TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
50
+ TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
51
+ TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
52
+ TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
53
+ TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
54
+ TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
55
+ TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
56
+ TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
57
+ TParentSubmitMeta,
58
+ >(
59
+ opts: () => FormGroupApiOptions<
60
+ TParentData,
61
+ TName,
62
+ TData,
63
+ TOnMount,
64
+ TOnChange,
65
+ TOnChangeAsync,
66
+ TOnBlur,
67
+ TOnBlurAsync,
68
+ TOnSubmit,
69
+ TOnSubmitAsync,
70
+ TOnDynamic,
71
+ TOnDynamicAsync,
72
+ TSubmitMeta,
73
+ TFormOnMount,
74
+ TFormOnChange,
75
+ TFormOnChangeAsync,
76
+ TFormOnBlur,
77
+ TFormOnBlurAsync,
78
+ TFormOnSubmit,
79
+ TFormOnSubmitAsync,
80
+ TFormOnDynamic,
81
+ TFormOnDynamicAsync,
82
+ TFormOnServer,
83
+ TParentSubmitMeta
84
+ >,
85
+ ) {
86
+ const options = opts()
87
+
88
+ const api = new FormGroupApi(options)
89
+
90
+ const extendedApi: typeof api = api as never
91
+
92
+ let mounted = false
93
+ // Instantiates form group meta and removes it when unrendered
94
+ onMount(() => {
95
+ const cleanupFn = api.mount()
96
+ mounted = true
97
+ return () => {
98
+ cleanupFn()
99
+ mounted = false
100
+ }
101
+ })
102
+
103
+ $effect.pre(() => {
104
+ // Invoke options function before mounted check, else it wouldn't rerun on changes to options.
105
+ // Changes to options are seen by the effect because signals inside them are picked up.
106
+ const current = opts()
107
+ if (!mounted) return
108
+ api.update(current)
109
+ })
110
+
111
+ const storeSub = useSelector(api.store)
112
+ Object.defineProperty(extendedApi, 'state', {
113
+ get() {
114
+ return storeSub.current
115
+ },
116
+ })
117
+
118
+ return extendedApi
119
+ }
120
+ </script>
121
+
122
+ <script
123
+ lang="ts"
124
+ generics="
125
+ TParentData,
126
+ TName extends DeepKeys<TParentData>,
127
+ TData extends DeepValue<TParentData, TName>,
128
+ TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
129
+ TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
130
+ TOnChangeAsync extends
131
+ | undefined
132
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
133
+ TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
134
+ TOnBlurAsync extends
135
+ | undefined
136
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
137
+ TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
138
+ TOnSubmitAsync extends
139
+ | undefined
140
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
141
+ TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
142
+ TOnDynamicAsync extends
143
+ | undefined
144
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
145
+ TSubmitMeta,
146
+ TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
147
+ TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
148
+ TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
149
+ TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
150
+ TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
151
+ TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
152
+ TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
153
+ TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
154
+ TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
155
+ TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
156
+ TParentSubmitMeta,
157
+ "
158
+ >
159
+ import type { FormGroupApi as FormGroupApiType } from '@tanstack/form-core'
160
+
161
+ type Props<
162
+ TParentData,
163
+ TName extends DeepKeys<TParentData>,
164
+ TData extends DeepValue<TParentData, TName>,
165
+ TOnMount extends
166
+ | undefined
167
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
168
+ TOnChange extends
169
+ | undefined
170
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
171
+ TOnChangeAsync extends
172
+ | undefined
173
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
174
+ TOnBlur extends
175
+ | undefined
176
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
177
+ TOnBlurAsync extends
178
+ | undefined
179
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
180
+ TOnSubmit extends
181
+ | undefined
182
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
183
+ TOnSubmitAsync extends
184
+ | undefined
185
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
186
+ TOnDynamic extends
187
+ | undefined
188
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
189
+ TOnDynamicAsync extends
190
+ | undefined
191
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
192
+ TSubmitMeta,
193
+ TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
194
+ TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
195
+ TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
196
+ TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
197
+ TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
198
+ TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
199
+ TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
200
+ TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
201
+ TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
202
+ TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
203
+ TParentSubmitMeta,
204
+ > = {
205
+ children: Snippet<
206
+ [
207
+ FormGroupApiType<
208
+ TParentData,
209
+ TName,
210
+ TData,
211
+ TOnMount,
212
+ TOnChange,
213
+ TOnChangeAsync,
214
+ TOnBlur,
215
+ TOnBlurAsync,
216
+ TOnSubmit,
217
+ TOnSubmitAsync,
218
+ TOnDynamic,
219
+ TOnDynamicAsync,
220
+ TSubmitMeta,
221
+ TFormOnMount,
222
+ TFormOnChange,
223
+ TFormOnChangeAsync,
224
+ TFormOnBlur,
225
+ TFormOnBlurAsync,
226
+ TFormOnSubmit,
227
+ TFormOnSubmitAsync,
228
+ TFormOnDynamic,
229
+ TFormOnDynamicAsync,
230
+ TFormOnServer,
231
+ TParentSubmitMeta
232
+ >,
233
+ ]
234
+ >
235
+ } & FormGroupApiOptions<
236
+ TParentData,
237
+ TName,
238
+ TData,
239
+ TOnMount,
240
+ TOnChange,
241
+ TOnChangeAsync,
242
+ TOnBlur,
243
+ TOnBlurAsync,
244
+ TOnSubmit,
245
+ TOnSubmitAsync,
246
+ TOnDynamic,
247
+ TOnDynamicAsync,
248
+ TSubmitMeta,
249
+ TFormOnMount,
250
+ TFormOnChange,
251
+ TFormOnChangeAsync,
252
+ TFormOnBlur,
253
+ TFormOnBlurAsync,
254
+ TFormOnSubmit,
255
+ TFormOnSubmitAsync,
256
+ TFormOnDynamic,
257
+ TFormOnDynamicAsync,
258
+ TFormOnServer,
259
+ TParentSubmitMeta
260
+ >
261
+
262
+ let {
263
+ children,
264
+ ...formGroupOptions
265
+ }: Props<
266
+ TParentData,
267
+ TName,
268
+ TData,
269
+ TOnMount,
270
+ TOnChange,
271
+ TOnChangeAsync,
272
+ TOnBlur,
273
+ TOnBlurAsync,
274
+ TOnSubmit,
275
+ TOnSubmitAsync,
276
+ TOnDynamic,
277
+ TOnDynamicAsync,
278
+ TSubmitMeta,
279
+ TFormOnMount,
280
+ TFormOnChange,
281
+ TFormOnChangeAsync,
282
+ TFormOnBlur,
283
+ TFormOnBlurAsync,
284
+ TFormOnSubmit,
285
+ TFormOnSubmitAsync,
286
+ TFormOnDynamic,
287
+ TFormOnDynamicAsync,
288
+ TFormOnServer,
289
+ TParentSubmitMeta
290
+ > = $props()
291
+
292
+ const formGroupApi = createFormGroup<
293
+ TParentData,
294
+ TName,
295
+ TData,
296
+ TOnMount,
297
+ TOnChange,
298
+ TOnChangeAsync,
299
+ TOnBlur,
300
+ TOnBlurAsync,
301
+ TOnSubmit,
302
+ TOnSubmitAsync,
303
+ TOnDynamic,
304
+ TOnDynamicAsync,
305
+ TSubmitMeta,
306
+ TFormOnMount,
307
+ TFormOnChange,
308
+ TFormOnChangeAsync,
309
+ TFormOnBlur,
310
+ TFormOnBlurAsync,
311
+ TFormOnSubmit,
312
+ TFormOnSubmitAsync,
313
+ TFormOnDynamic,
314
+ TFormOnDynamicAsync,
315
+ TFormOnServer,
316
+ TParentSubmitMeta
317
+ >(() => {
318
+ return formGroupOptions
319
+ })
320
+ </script>
321
+
322
+ {@render children(formGroupApi)}
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import { useStore } from '@tanstack/svelte-store'
2
+ import { useSelector } from '@tanstack/svelte-store'
3
3
 
4
4
  // Don't bother typing this out, this component is only usable through a wrapper
5
5
  interface Props {
@@ -10,7 +10,7 @@
10
10
 
11
11
  let { children, store, selector = (state) => state }: Props = $props()
12
12
 
13
- const value = useStore(store, selector)
13
+ const value = useSelector(store, selector)
14
14
  </script>
15
15
 
16
16
  {@render children(value.current)}
@@ -1,7 +1,8 @@
1
1
  import { FormApi } from '@tanstack/form-core'
2
- import { useStore } from '@tanstack/svelte-store'
2
+ import { useSelector } from '@tanstack/svelte-store'
3
3
  import { onMount } from 'svelte'
4
4
  import Field from './Field.svelte'
5
+ import FormGroup from './FormGroup.svelte'
5
6
  import Subscribe from './Subscribe.svelte'
6
7
  import type {
7
8
  Component,
@@ -15,7 +16,11 @@ import type {
15
16
  FormState,
16
17
  FormValidateOrFn,
17
18
  } from '@tanstack/form-core'
18
- import type { FieldComponent, WithoutFunction } from './types.js'
19
+ import type {
20
+ FieldComponent,
21
+ FormGroupComponent,
22
+ WithoutFunction,
23
+ } from './types.js'
19
24
 
20
25
  export interface SvelteFormApi<
21
26
  TParentData,
@@ -45,6 +50,58 @@ export interface SvelteFormApi<
45
50
  TFormOnServer,
46
51
  TSubmitMeta
47
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
+ */
48
105
  useStore: <
49
106
  TSelected = NoInfer<
50
107
  FormState<
@@ -273,7 +330,12 @@ export function createForm<
273
330
  // @ts-expect-error constructor definition exists only on a type level
274
331
  extendedApi.Field = (internal, props) =>
275
332
  Field(internal, { ...props, form: api as never } as never)
276
- extendedApi.useStore = (selector) => useStore(api.store, selector)
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
277
339
  // @ts-expect-error constructor definition exists only on a type level
278
340
  extendedApi.Subscribe = (internal, props) =>
279
341
  Subscribe(internal, { ...props, store: api.store })
package/src/index.ts CHANGED
@@ -1,12 +1,14 @@
1
1
  export * from '@tanstack/form-core'
2
2
 
3
- export { useStore } from '@tanstack/svelte-store'
3
+ export { useSelector, useStore } from '@tanstack/svelte-store'
4
4
 
5
5
  export { createForm, type SvelteFormApi } from './createForm.svelte.js'
6
6
 
7
7
  export { default as Field, createField } from './Field.svelte'
8
8
 
9
- export type { FieldComponent } from './types.js'
9
+ export { default as FormGroup, createFormGroup } from './FormGroup.svelte'
10
+
11
+ export type { FieldComponent, FormGroupComponent } from './types.js'
10
12
 
11
13
  export {
12
14
  createFormCreator,
package/src/types.ts CHANGED
@@ -6,6 +6,10 @@ import type {
6
6
  FieldAsyncValidateOrFn,
7
7
  FieldValidateOrFn,
8
8
  FormAsyncValidateOrFn,
9
+ FormGroupApi,
10
+ FormGroupApiOptions,
11
+ FormGroupAsyncValidateOrFn,
12
+ FormGroupValidateOrFn,
9
13
  FormValidateOrFn,
10
14
  Narrow,
11
15
  } from '@tanstack/form-core'
@@ -308,3 +312,256 @@ type FieldComponentProps<
308
312
  >,
309
313
  'form'
310
314
  >
315
+
316
+ export type FormGroupComponent<
317
+ TParentData,
318
+ TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
319
+ TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
320
+ TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
321
+ TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
322
+ TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
323
+ TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
324
+ TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
325
+ TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
326
+ TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
327
+ TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
328
+ TParentSubmitMeta,
329
+ ExtendedApi = {},
330
+ > =
331
+ // This giant type allows the type
332
+ // - to be used as a function (which they are now in Svelte 5)
333
+ // - to be used as a class (which they were in Svelte 4, and which Svelte intellisense still uses for backwards compat)
334
+ // - to preserve the generics correctly
335
+ // Once Svelte intellisense no longer has/needs backwards compat, we can remove the class constructor part
336
+ (<
337
+ TName extends DeepKeys<TParentData>,
338
+ TData extends DeepValue<TParentData, TName>,
339
+ TOnMount extends
340
+ | undefined
341
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
342
+ TOnChange extends
343
+ | undefined
344
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
345
+ TOnChangeAsync extends
346
+ | undefined
347
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
348
+ TOnBlur extends
349
+ | undefined
350
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
351
+ TOnBlurAsync extends
352
+ | undefined
353
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
354
+ TOnSubmit extends
355
+ | undefined
356
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
357
+ TOnSubmitAsync extends
358
+ | undefined
359
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
360
+ TOnDynamic extends
361
+ | undefined
362
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
363
+ TOnDynamicAsync extends
364
+ | undefined
365
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
366
+ TSubmitMeta,
367
+ >(
368
+ internal: any,
369
+ {
370
+ children,
371
+ ...formGroupOptions
372
+ }: Omit<
373
+ FormGroupComponentProps<
374
+ TParentData,
375
+ TName,
376
+ TData,
377
+ TOnMount,
378
+ TOnChange,
379
+ TOnChangeAsync,
380
+ TOnBlur,
381
+ TOnBlurAsync,
382
+ TOnSubmit,
383
+ TOnSubmitAsync,
384
+ TOnDynamic,
385
+ TOnDynamicAsync,
386
+ TSubmitMeta,
387
+ TFormOnMount,
388
+ TFormOnChange,
389
+ TFormOnChangeAsync,
390
+ TFormOnBlur,
391
+ TFormOnBlurAsync,
392
+ TFormOnSubmit,
393
+ TFormOnSubmitAsync,
394
+ TFormOnDynamic,
395
+ TFormOnDynamicAsync,
396
+ TFormOnServer,
397
+ TParentSubmitMeta,
398
+ ExtendedApi
399
+ >,
400
+ 'form'
401
+ >,
402
+ ) => {}) &
403
+ (new <
404
+ TName extends DeepKeys<TParentData>,
405
+ TData extends DeepValue<TParentData, TName>,
406
+ TOnMount extends
407
+ | undefined
408
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
409
+ TOnChange extends
410
+ | undefined
411
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
412
+ TOnChangeAsync extends
413
+ | undefined
414
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
415
+ TOnBlur extends
416
+ | undefined
417
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
418
+ TOnBlurAsync extends
419
+ | undefined
420
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
421
+ TOnSubmit extends
422
+ | undefined
423
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
424
+ TOnSubmitAsync extends
425
+ | undefined
426
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
427
+ TOnDynamic extends
428
+ | undefined
429
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
430
+ TOnDynamicAsync extends
431
+ | undefined
432
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
433
+ TSubmitMeta,
434
+ >(
435
+ opts: ComponentConstructorOptions<
436
+ Omit<
437
+ FormGroupComponentProps<
438
+ TParentData,
439
+ TName,
440
+ TData,
441
+ TOnMount,
442
+ TOnChange,
443
+ TOnChangeAsync,
444
+ TOnBlur,
445
+ TOnBlurAsync,
446
+ TOnSubmit,
447
+ TOnSubmitAsync,
448
+ TOnDynamic,
449
+ TOnDynamicAsync,
450
+ TSubmitMeta,
451
+ TFormOnMount,
452
+ TFormOnChange,
453
+ TFormOnChangeAsync,
454
+ TFormOnBlur,
455
+ TFormOnBlurAsync,
456
+ TFormOnSubmit,
457
+ TFormOnSubmitAsync,
458
+ TFormOnDynamic,
459
+ TFormOnDynamicAsync,
460
+ TFormOnServer,
461
+ TParentSubmitMeta,
462
+ ExtendedApi
463
+ >,
464
+ 'form'
465
+ >
466
+ >,
467
+ ) => SvelteComponent) &
468
+ WithoutFunction<Component>
469
+
470
+ type FormGroupComponentProps<
471
+ TParentData,
472
+ TName extends DeepKeys<TParentData>,
473
+ TData extends DeepValue<TParentData, TName>,
474
+ TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
475
+ TOnChange extends
476
+ | undefined
477
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
478
+ TOnChangeAsync extends
479
+ | undefined
480
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
481
+ TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
482
+ TOnBlurAsync extends
483
+ | undefined
484
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
485
+ TOnSubmit extends
486
+ | undefined
487
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
488
+ TOnSubmitAsync extends
489
+ | undefined
490
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
491
+ TOnDynamic extends
492
+ | undefined
493
+ | FormGroupValidateOrFn<TParentData, TName, TData>,
494
+ TOnDynamicAsync extends
495
+ | undefined
496
+ | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
497
+ TSubmitMeta,
498
+ TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
499
+ TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
500
+ TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
501
+ TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
502
+ TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
503
+ TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
504
+ TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
505
+ TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
506
+ TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
507
+ TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
508
+ TParentSubmitMeta,
509
+ ExtendedApi = {},
510
+ > = {
511
+ children: Snippet<
512
+ [
513
+ FormGroupApi<
514
+ TParentData,
515
+ TName,
516
+ TData,
517
+ TOnMount,
518
+ TOnChange,
519
+ TOnChangeAsync,
520
+ TOnBlur,
521
+ TOnBlurAsync,
522
+ TOnSubmit,
523
+ TOnSubmitAsync,
524
+ TOnDynamic,
525
+ TOnDynamicAsync,
526
+ TSubmitMeta,
527
+ TFormOnMount,
528
+ TFormOnChange,
529
+ TFormOnChangeAsync,
530
+ TFormOnBlur,
531
+ TFormOnBlurAsync,
532
+ TFormOnSubmit,
533
+ TFormOnSubmitAsync,
534
+ TFormOnDynamic,
535
+ TFormOnDynamicAsync,
536
+ TFormOnServer,
537
+ TParentSubmitMeta
538
+ > &
539
+ ExtendedApi,
540
+ ]
541
+ >
542
+ } & FormGroupApiOptions<
543
+ TParentData,
544
+ TName,
545
+ TData,
546
+ TOnMount,
547
+ TOnChange,
548
+ TOnChangeAsync,
549
+ TOnBlur,
550
+ TOnBlurAsync,
551
+ TOnSubmit,
552
+ TOnSubmitAsync,
553
+ TOnDynamic,
554
+ TOnDynamicAsync,
555
+ TSubmitMeta,
556
+ TFormOnMount,
557
+ TFormOnChange,
558
+ TFormOnChangeAsync,
559
+ TFormOnBlur,
560
+ TFormOnBlurAsync,
561
+ TFormOnSubmit,
562
+ TFormOnSubmitAsync,
563
+ TFormOnDynamic,
564
+ TFormOnDynamicAsync,
565
+ TFormOnServer,
566
+ TParentSubmitMeta
567
+ >