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

package/src/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/src/FieldGroup/FieldGroupApi.public.ts

@@ -0,0 +1,100 @@
+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/src/FieldGroup/withFields.lib.ts

@@ -0,0 +1,82 @@
+import {
+  InternalFieldGroupApi,
+  defineFieldGroupFieldsRuntime,
+  fieldGroupHelperRuntime,
+} from '@tanstack/form-core/internals'
+import { withComponentProps } from '../utils.lib.js'
+import type { Component } from 'svelte'
+import type { InternalFieldGroupBindings } from '@tanstack/form-core/internals'
+import type { AnyFieldGroupApi } from './FieldGroupApi.public'
+
+function attachSvelteFieldGroupComponents(
+  group: InternalFieldGroupApi,
+  form: any,
+): AnyFieldGroupApi {
+  const resolveProps = (props: any) =>
+    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: any, props: any) =>
+      form.Field(internals, resolveProps(props)),
+    ArrayField: (internals: any, props: any) =>
+      form.ArrayField(internals, resolveProps(props)),
+    Subscribe: (internals: any, props: any) => form.Subscribe(internals, props),
+  }) as never
+}
+
+export function defineFieldGroupRuntime<
+  TFields extends Record<string, unknown>,
+>(defineFieldGroupFn: (helperRuntime: any) => TFields) {
+  const fields = defineFieldGroupFieldsRuntime(
+    defineFieldGroupFn(fieldGroupHelperRuntime),
+  )
+
+  return {
+    fields,
+    bindComponent: (Component: Component<any>, fieldsPropName: string) =>
+      withFieldsRuntime(fields, Component, fieldsPropName),
+  }
+}
+
+function withFieldsRuntime(
+  fields: Record<string, unknown>,
+  Component: Component<any>,
+  fieldsPropName: string,
+) {
+  const fieldNames = Object.keys(fields)
+  return ((internals: any, props: any) => {
+    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] as InternalFieldGroupBindings,
+      }),
+      form,
+    )
+    return Component(
+      internals,
+      withComponentProps(props, {
+        form: undefined,
+        [fieldsPropName]: api,
+      }),
+    )
+  }) as Component<any>
+}