@tanstack/svelte-form 1.33.4 → 2.0.0-alpha.0

package/dist/Field.svelte

@@ -1,341 +1,152 @@
 <script module lang="ts">
-  import {
-    type DeepKeys,
-    type DeepValue,
+  import { shallow, useSelector } from '@tanstack/svelte-store'
+  import type {
     FieldApi,
-    type FieldAsyncValidateOrFn,
-    type FieldValidateOrFn,
-    type FormAsyncValidateOrFn,
-    type FormValidateOrFn,
+    FieldApiOptions,
+    FieldValidators,
+    FormErrorTypes,
+    ToFieldError,
   } from '@tanstack/form-core'
-  import { useSelector } from '@tanstack/svelte-store'
-  import { onMount, type Snippet } from 'svelte'
-  import type { CreateFieldOptions } from './types.js'
+  import type {
+    AnyInternalFieldApi,
+    AnyInternalFormApi,
+    InternalBaseFieldMeta,
+  } from '@tanstack/form-core/internals'
 
-  export function createField<
-    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>,
-    TParentSubmitMeta,
-  >(
-    opts: () => CreateFieldOptions<
-      TParentData,
-      TName,
-      TData,
-      TOnMount,
-      TOnChange,
-      TOnChangeAsync,
-      TOnBlur,
-      TOnBlurAsync,
-      TOnSubmit,
-      TOnSubmitAsync,
-      TOnDynamic,
-      TOnDynamicAsync,
-      TFormOnMount,
-      TFormOnChange,
-      TFormOnChangeAsync,
-      TFormOnBlur,
-      TFormOnBlurAsync,
-      TFormOnSubmit,
-      TFormOnSubmitAsync,
-      TFormOnDynamic,
-      TFormOnDynamicAsync,
-      TFormOnServer,
-      TParentSubmitMeta
-    >,
+  interface InternalFieldOptions
+    extends FieldApiOptions<any, any, any, any, any, any, any> {
+    form: AnyInternalFormApi
+  }
+
+  function useDynamicFieldSelector<TSelected>(
+    getField: () => AnyInternalFieldApi,
+    selector: (field: AnyInternalFieldApi) => TSelected,
   ) {
-    const options = opts()
+    let selected = $state.raw(selector(getField()))
 
-    const api = new FieldApi(options)
+    $effect(() => {
+      const field = getField()
+      const update = () => {
+        const next = selector(field)
+        if (!shallow(selected, next)) selected = next
+      }
+      update()
+      const subscription = field.atom.subscribe(update)
+      return () => subscription.unsubscribe()
+    })
 
-    const extendedApi: typeof api = api as never
+    return {
+      get current() {
+        return selected
+      },
+    }
+  }
 
-    let mounted = false
-    // Instantiates field meta and removes it when unrendered
-    onMount(() => {
-      const cleanupFn = api.mount()
-      mounted = true
-      return () => {
-        cleanupFn()
-        mounted = false
-      }
+  export function createField<
+    TFieldData,
+    TFieldName,
+    TFieldValue,
+    const TFieldValidators extends FieldValidators<
+      TFieldData,
+      TFieldName,
+      TFieldValue
+    >,
+    TGroupFieldError,
+    TFormData,
+    TFormErrorTypes extends FormErrorTypes,
+  >(
+    options: () =>
+      & FieldApiOptions<
+        TFieldData,
+        TFieldName,
+        TFieldValue,
+        TFieldValidators,
+        TGroupFieldError,
+        TFormData,
+        TFormErrorTypes
+      >
+      & { form: AnyInternalFormApi },
+    array = false,
+  ): FieldApi<
+    TFieldName,
+    TFieldValue,
+    ToFieldError<TFieldValidators, TGroupFieldError, TFormErrorTypes>,
+    TFormData,
+    TFormErrorTypes
+  > {
+    const initialForm = options().form
+    const resetVersion = useSelector(initialForm._atoms.resetVersion)
+    const fieldApi = $derived.by(() => {
+      resetVersion.current
+      const current = options()
+      return current.form._getOrCreateFieldApi({
+        ...current,
+        name: current.name,
+      } as never)
     })
 
     $effect.pre(() => {
-      // Invoke options function before mounted check, else it wouldn't rerun on changes to options.
-      // Changes to options are seen by the effect because signals inside them are picked up.
-      const current = opts()
-      if (!mounted) return
-      api.update(current)
+      fieldApi._update(options() as InternalFieldOptions)
     })
 
-    const storeSub = useSelector(api.store, (state) =>
-      options.mode === 'array'
-        ? state.meta._arrayVersion || 0
-        : state.value,
-    )
-    const metaIsTouchedSub = useSelector(
-      api.store,
-      (state) => state.meta.isTouched,
-    )
-    const metaIsBlurredSub = useSelector(
-      api.store,
-      (state) => state.meta.isBlurred,
-    )
-    const metaIsDirtySub = useSelector(api.store, (state) => state.meta.isDirty)
-    const metaErrorMapSub = useSelector(api.store, (state) => state.meta.errorMap)
-    const metaErrorSourceMapSub = useSelector(
-      api.store,
-      (state) => state.meta.errorSourceMap,
-    )
-    const metaIsValidatingSub = useSelector(
-      api.store,
-      (state) => state.meta.isValidating,
+    $effect(() => fieldApi._register())
+
+    const selected = useDynamicFieldSelector(
+      () => fieldApi,
+      (array
+        ? (field) => ({
+            length: field.value.length,
+            version: (field.meta as InternalBaseFieldMeta)._arrayVersion,
+          })
+        : (field) => ({ value: field.value, meta: field.meta })) as (
+        field: AnyInternalFieldApi,
+      ) => any,
     )
-    Object.defineProperty(extendedApi, 'state', {
-      get() {
-        // Read all reactive sources to track them as dependencies. For array
-        // mode, `storeSub.current` is the array length so we still pull the
-        // actual value from the underlying api state.
-        // See: https://github.com/TanStack/form/issues/1961
-        // Note: we read from `api.store.state` (not `api.state`) to avoid
-        // infinite recursion since this getter shadows the prototype's `state`
-        // getter on the same object.
-        const trackedValue = storeSub.current
-        const isTouched = metaIsTouchedSub.current
-        const isBlurred = metaIsBlurredSub.current
-        const isDirty = metaIsDirtySub.current
-        const errorMap = metaErrorMapSub.current
-        const errorSourceMap = metaErrorSourceMapSub.current
-        const isValidating = metaIsValidatingSub.current
-        const baseState = api.store.state
-        return {
-          ...baseState,
-          value: options.mode === 'array' ? baseState.value : trackedValue,
-          meta: {
-            ...baseState.meta,
-            isTouched,
-            isBlurred,
-            isDirty,
-            errorMap,
-            errorSourceMap,
-            isValidating,
-          },
+
+    return new Proxy({} as AnyInternalFieldApi, {
+      get(target, property) {
+        if (Reflect.has(target, property)) return Reflect.get(target, property)
+        const field = fieldApi
+        const state = selected.current
+        if (property === 'value') {
+          return array ? field.value : (state as any).value
         }
+        if (property === 'meta') {
+          return array ? field.meta : (state as any).meta
+        }
+        if (property === 'errors') {
+          return array ? field.errors : (state as any).meta.errors
+        }
+        const value = Reflect.get(field, property, field)
+        return typeof value === 'function' ? value.bind(field) : value
       },
-    })
-
-    return extendedApi
+    }) as never
   }
 </script>
 
-<script
-  lang="ts"
-  generics="
-    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>,
-    TParentSubmitMeta,
-"
->
-  type Props<
-    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>,
-    TParentSubmitMeta,
-  > = {
-    children: Snippet<
-      [
-        FieldApi<
-          TParentData,
-          TName,
-          TData,
-          TOnMount,
-          TOnChange,
-          TOnChangeAsync,
-          TOnBlur,
-          TOnBlurAsync,
-          TOnSubmit,
-          TOnSubmitAsync,
-          TOnDynamic,
-          TOnDynamicAsync,
-          TFormOnMount,
-          TFormOnChange,
-          TFormOnChangeAsync,
-          TFormOnBlur,
-          TFormOnBlurAsync,
-          TFormOnSubmit,
-          TFormOnSubmitAsync,
-          TFormOnDynamic,
-          TFormOnDynamicAsync,
-          TFormOnServer,
-          TParentSubmitMeta
-        >,
-      ]
-    >
-  } & CreateFieldOptions<
-    TParentData,
-    TName,
-    TData,
-    TOnMount,
-    TOnChange,
-    TOnChangeAsync,
-    TOnBlur,
-    TOnBlurAsync,
-    TOnSubmit,
-    TOnSubmitAsync,
-    TOnDynamic,
-    TOnDynamicAsync,
-    TFormOnMount,
-    TFormOnChange,
-    TFormOnChangeAsync,
-    TFormOnBlur,
-    TFormOnBlurAsync,
-    TFormOnSubmit,
-    TFormOnSubmitAsync,
-    TFormOnDynamic,
-    TFormOnDynamicAsync,
-    TFormOnServer,
-    TParentSubmitMeta
-  >
+<script lang="ts">
+  import { setContext, untrack, type Snippet } from 'svelte'
+  import { fieldContextKey } from './context-keys.js'
+
+  interface Props extends InternalFieldOptions {
+    array?: boolean
+    children: Snippet<[any]>
+    fieldComponents?: Record<string, any>
+  }
 
   let {
     children,
+    array = false,
+    fieldComponents = {},
     ...fieldOptions
-  }: Props<
-    TParentData,
-    TName,
-    TData,
-    TOnMount,
-    TOnChange,
-    TOnChangeAsync,
-    TOnBlur,
-    TOnBlurAsync,
-    TOnSubmit,
-    TOnSubmitAsync,
-    TOnDynamic,
-    TOnDynamicAsync,
-    TFormOnMount,
-    TFormOnChange,
-    TFormOnChangeAsync,
-    TFormOnBlur,
-    TFormOnBlurAsync,
-    TFormOnSubmit,
-    TFormOnSubmitAsync,
-    TFormOnDynamic,
-    TFormOnDynamicAsync,
-    TFormOnServer,
-    TParentSubmitMeta
-  > = $props()
+  }: Props = $props()
 
-  const fieldApi = createField<
-    TParentData,
-    TName,
-    TData,
-    TOnMount,
-    TOnChange,
-    TOnChangeAsync,
-    TOnBlur,
-    TOnBlurAsync,
-    TOnSubmit,
-    TOnSubmitAsync,
-    TOnDynamic,
-    TOnDynamicAsync,
-    TFormOnMount,
-    TFormOnChange,
-    TFormOnChangeAsync,
-    TFormOnBlur,
-    TFormOnBlurAsync,
-    TFormOnSubmit,
-    TFormOnSubmitAsync,
-    TFormOnDynamic,
-    TFormOnDynamicAsync,
-    TFormOnServer,
-    TParentSubmitMeta
-  >(() => {
-    return fieldOptions
-  })
+  const fieldApi = createField(
+    () => fieldOptions,
+    untrack(() => array),
+  )
+  Object.assign(fieldApi, untrack(() => fieldComponents))
+  setContext(fieldContextKey, fieldApi)
 </script>
 
 {@render children(fieldApi)}

package/dist/Field.svelte.d.ts

@@ -1,33 +1,17 @@
-import { type DeepKeys, type DeepValue, FieldApi, type FieldAsyncValidateOrFn, type FieldValidateOrFn, type FormAsyncValidateOrFn, type FormValidateOrFn } from '@tanstack/form-core';
-import { type Snippet } from 'svelte';
-import type { CreateFieldOptions } from './types.js';
-export declare function createField<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>, TParentSubmitMeta>(opts: () => CreateFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>): FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
-type Props<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>, TParentSubmitMeta> = {
-    children: Snippet<[
-        FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>
-    ]>;
-} & CreateFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
-declare function $$render<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>, TParentSubmitMeta>(): {
-    props: Props<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<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>, TParentSubmitMeta> {
-    props(): ReturnType<typeof $$render<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>>['props'];
-    events(): ReturnType<typeof $$render<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>>['events'];
-    slots(): ReturnType<typeof $$render<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>>['slots'];
-    bindings(): "";
-    exports(): {};
+import type { FieldApi, FieldApiOptions, FieldValidators, FormErrorTypes, ToFieldError } from '@tanstack/form-core';
+import type { AnyInternalFormApi } from '@tanstack/form-core/internals';
+interface InternalFieldOptions extends FieldApiOptions<any, any, any, any, any, any, any> {
+    form: AnyInternalFormApi;
 }
-interface $$IsomorphicComponent {
-    new <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>, TParentSubmitMeta>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, 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, 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, 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, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>['bindings']>;
-    } & ReturnType<__sveltets_Render<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>['exports']>;
-    <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>, TParentSubmitMeta>(internal: unknown, props: ReturnType<__sveltets_Render<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, 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, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>['exports']>;
-    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>['bindings']>;
+export declare function createField<TFieldData, TFieldName, TFieldValue, const TFieldValidators extends FieldValidators<TFieldData, TFieldName, TFieldValue>, TGroupFieldError, TFormData, TFormErrorTypes extends FormErrorTypes>(options: () => FieldApiOptions<TFieldData, TFieldName, TFieldValue, TFieldValidators, TGroupFieldError, TFormData, TFormErrorTypes> & {
+    form: AnyInternalFormApi;
+}, array?: boolean): FieldApi<TFieldName, TFieldValue, ToFieldError<TFieldValidators, TGroupFieldError, TFormErrorTypes>, TFormData, TFormErrorTypes>;
+import { type Snippet } from 'svelte';
+interface Props extends InternalFieldOptions {
+    array?: boolean;
+    children: Snippet<[any]>;
+    fieldComponents?: Record<string, any>;
 }
-declare const Field: $$IsomorphicComponent;
-type Field<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>, TParentSubmitMeta> = InstanceType<typeof Field<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>>;
+declare const Field: import("svelte").Component<Props, {}, "">;
+type Field = ReturnType<typeof Field>;
 export default Field;

package/dist/FieldGroup/FieldGroupApi.public.d.ts

@@ -0,0 +1,15 @@
+import type { DeepKeys, DeepKeysWhereValueIncludes, DeepValue, FieldValidators, FormApiArrayMethods, FormApiFieldMethods, FormErrorTypes, FormState, ValidationIssue } from '@tanstack/form-core';
+import type { Component, ComponentConstructorOptions, SvelteComponent } from 'svelte';
+import type { SvelteFormFieldProps, SvelteFormSubscribeProps, WithoutFunction } from '../Components.public';
+import type { ReadonlyAtom } from '@tanstack/svelte-store';
+export type FieldGroupFieldComponent<TFieldData, TFieldComponents extends Record<string, Component<any>>> = (new <const TFieldName extends DeepKeys<TFieldData>>(options: ComponentConstructorOptions<SvelteFormFieldProps<TFieldData, TFieldName, DeepValue<TFieldData, TFieldName>, FieldValidators<TFieldData, TFieldName, DeepValue<TFieldData, TFieldName>>, ValidationIssue, unknown, FormErrorTypes, TFieldComponents>>) => SvelteComponent) & Component<any> & WithoutFunction<Component>;
+export type FieldGroupArrayFieldComponent<TFieldData, TFieldComponents extends Record<string, Component<any>>> = (new <const TFieldName extends DeepKeysWhereValueIncludes<TFieldData, Array<any>>>(options: ComponentConstructorOptions<SvelteFormFieldProps<TFieldData, TFieldName, DeepValue<TFieldData, TFieldName>, FieldValidators<TFieldData, TFieldName, DeepValue<TFieldData, TFieldName>>, ValidationIssue, unknown, FormErrorTypes, TFieldComponents>>) => SvelteComponent) & Component<any> & WithoutFunction<Component>;
+export type FieldGroupSubscribeComponent = (new <TSelected>(options: ComponentConstructorOptions<SvelteFormSubscribeProps<unknown, FormErrorTypes, TSelected>>) => SvelteComponent) & Component<any> & WithoutFunction<Component>;
+export interface FieldGroupApi<TFieldData, TFieldComponents extends Record<string, Component<any>> = Record<never, never>> extends FormApiFieldMethods<TFieldData>, FormApiArrayMethods<TFieldData> {
+    atom: ReadonlyAtom<TFieldData>;
+    Field: FieldGroupFieldComponent<TFieldData, TFieldComponents>;
+    ArrayField: FieldGroupArrayFieldComponent<TFieldData, TFieldComponents>;
+    Subscribe: FieldGroupSubscribeComponent;
+}
+export type AnyFieldGroupApi = FieldGroupApi<any, Record<string, Component<any>>>;
+export type FieldGroupFormState = FormState<unknown, FormErrorTypes>;

package/dist/FieldGroup/FieldGroupApi.public.js

@@ -0,0 +1 @@
+export {};

package/dist/FieldGroup/withFields.lib.d.ts

@@ -0,0 +1,5 @@
+import type { Component } from 'svelte';
+export declare function defineFieldGroupRuntime<TFields extends Record<string, unknown>>(defineFieldGroupFn: (helperRuntime: any) => TFields): {
+    fields: TFields;
+    bindComponent: (Component: Component<any>, fieldsPropName: string) => Component<any, {}, string>;
+};

package/dist/FieldGroup/withFields.lib.js

@@ -0,0 +1,44 @@
+import { InternalFieldGroupApi, defineFieldGroupFieldsRuntime, fieldGroupHelperRuntime, } from '@tanstack/form-core/internals';
+import { withComponentProps } from '../utils.lib.js';
+function attachSvelteFieldGroupComponents(group, form) {
+    const resolveProps = (props) => new Proxy(props, {
+        get(target, property, receiver) {
+            if (property === 'name' ||
+                property === 'validators' ||
+                property === 'listeners') {
+                return Reflect.get(group._getFormFieldOptions({ ...target }, withComponentProps), property);
+            }
+            return Reflect.get(target, property, receiver);
+        },
+    });
+    return Object.assign(group, {
+        Field: (internals, props) => form.Field(internals, resolveProps(props)),
+        ArrayField: (internals, props) => form.ArrayField(internals, resolveProps(props)),
+        Subscribe: (internals, props) => form.Subscribe(internals, props),
+    });
+}
+export function defineFieldGroupRuntime(defineFieldGroupFn) {
+    const fields = defineFieldGroupFieldsRuntime(defineFieldGroupFn(fieldGroupHelperRuntime));
+    return {
+        fields,
+        bindComponent: (Component, fieldsPropName) => withFieldsRuntime(fields, Component, fieldsPropName),
+    };
+}
+function withFieldsRuntime(fields, Component, fieldsPropName) {
+    const fieldNames = Object.keys(fields);
+    return ((internals, props) => {
+        const form = props.form;
+        if (!form) {
+            throw new Error('TanStack Form: Field groups must receive a `form` prop.');
+        }
+        const api = attachSvelteFieldGroupComponents(new InternalFieldGroupApi({
+            form,
+            fieldNames,
+            getBindings: () => props[fieldsPropName],
+        }), form);
+        return Component(internals, withComponentProps(props, {
+            form: undefined,
+            [fieldsPropName]: api,
+        }));
+    });
+}