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

package/src/FieldGroup/withFields.public.ts

@@ -0,0 +1,179 @@
+import { defineFieldGroupRuntime } from './withFields.lib'
+import type {
+  DeepKeys,
+  DeepKeysWhereValueIncludes,
+  DeepValue,
+  FormApi,
+} from '@tanstack/form-core'
+import type {
+  Component,
+  ComponentConstructorOptions,
+  SvelteComponent,
+} from 'svelte'
+import type {
+  SvelteTanStackFormComponents,
+  WithoutFunction,
+} from '../Components.public'
+import type { FieldGroupApi } from './FieldGroupApi.public'
+
+declare const fieldGroupFieldSlotValueSymbol: unique symbol
+declare const fieldGroupFieldsSymbol: unique symbol
+declare const fieldGroupFieldComponentsSymbol: unique symbol
+export type FieldGroupFieldSlotMode = 'strict' | 'loose'
+export interface FieldGroupFieldSlot<
+  out TValue,
+  out TMode extends FieldGroupFieldSlotMode = FieldGroupFieldSlotMode,
+> {
+  readonly mode: TMode
+  readonly [fieldGroupFieldSlotValueSymbol]: TValue
+}
+export type AnyFieldGroupFieldSlot = FieldGroupFieldSlot<any>
+export type StrictFieldGroupFieldSlot<TValue> = FieldGroupFieldSlot<
+  TValue,
+  'strict'
+>
+export type LooseFieldGroupFieldSlot<TValue> = FieldGroupFieldSlot<
+  TValue,
+  'loose'
+>
+export type FieldGroupFieldSlotValue<TSlot> =
+  TSlot extends FieldGroupFieldSlot<infer TValue> ? TValue : never
+export type FieldGroupFieldSlotModeOf<TSlot> =
+  TSlot extends FieldGroupFieldSlot<any, infer TMode> ? TMode : never
+type IsSame<TA, TB> = [TA] extends [TB]
+  ? [TB] extends [TA]
+    ? true
+    : false
+  : false
+export type FieldGroupFieldSlotAllows<TSlot, TValue> =
+  TSlot extends FieldGroupFieldSlot<infer TAccepted, infer TMode>
+    ? TMode extends 'strict'
+      ? IsSame<TValue, TAccepted>
+      : [TValue] extends [TAccepted]
+        ? true
+        : false
+    : false
+export type FieldGroupFieldNameForSlot<
+  TData,
+  TSlot extends AnyFieldGroupFieldSlot,
+> = {
+  [TName in DeepKeys<TData>]: FieldGroupFieldSlotAllows<
+    TSlot,
+    DeepValue<TData, TName>
+  > extends true
+    ? TName
+    : never
+}[DeepKeys<TData>]
+export type FieldGroupFields = Record<string, AnyFieldGroupFieldSlot>
+export type FieldGroupFieldNames<TData, TFields extends FieldGroupFields> = {
+  [TName in keyof TFields]: FieldGroupFieldNameForSlot<TData, TFields[TName]>
+}
+export type FieldGroupFieldData<TFields extends FieldGroupFields> = {
+  [TName in keyof TFields]: TFields[TName] extends FieldGroupFieldSlot<
+    infer TValue,
+    any
+  >
+    ? TValue
+    : never
+}
+export type FieldGroupFieldsOf<TGroup> = TGroup extends {
+  readonly [fieldGroupFieldsSymbol]: infer TFields
+}
+  ? TFields
+  : never
+export type SvelteFieldGroup<
+  TFields extends FieldGroupFields,
+  TFieldComponents extends Record<string, Component<any>> = Record<
+    never,
+    never
+  >,
+> = FieldGroupApi<FieldGroupFieldData<TFields>, TFieldComponents> & {
+  readonly [fieldGroupFieldsSymbol]: TFields
+  readonly [fieldGroupFieldComponentsSymbol]: TFieldComponents
+}
+export type FieldGroupFieldComponentsOf<TGroup> = TGroup extends {
+  readonly [fieldGroupFieldComponentsSymbol]: infer TComponents extends Record<
+    string,
+    Component<any>
+  >
+}
+  ? TComponents
+  : never
+export type FieldGroupForm<
+  TFieldComponents extends Record<string, Component<any>> = Record<
+    never,
+    never
+  >,
+  TFormData = any,
+> = FormApi<TFormData, any> &
+  SvelteTanStackFormComponents<TFormData, any, TFieldComponents>
+export type FieldGroupFieldBindingForSlot<
+  TData,
+  TSlot extends AnyFieldGroupFieldSlot,
+> =
+  TSlot extends FieldGroupFieldSlot<infer TValue, infer TMode>
+    ? TMode extends 'strict'
+      ? FieldGroupFieldNameForSlot<TData, TSlot>
+      : DeepKeysWhereValueIncludes<TData, TValue>
+    : never
+export type FieldGroupFieldBindings<
+  TFields extends FieldGroupFields,
+  TData = any,
+> = {
+  [TName in keyof TFields]: FieldGroupFieldBindingForSlot<TData, TFields[TName]>
+}
+export type FieldGroupFieldBindingsOf<TGroup, TData> =
+  FieldGroupFieldsOf<TGroup> extends FieldGroupFields
+    ? FieldGroupFieldBindings<FieldGroupFieldsOf<TGroup>, TData>
+    : never
+export type FieldGroupFieldsPropName<TProps, TGroup> = {
+  [TName in keyof TProps]-?: IsSame<TProps[TName], TGroup> extends true
+    ? TName
+    : never
+}[keyof TProps]
+
+export type FieldGroupWithFieldsFn<
+  TGroup extends { readonly [fieldGroupFieldsSymbol]: FieldGroupFields },
+> = <
+  TProps extends object,
+  TPropName extends FieldGroupFieldsPropName<TProps, TGroup>,
+>(
+  Component: Component<TProps>,
+  fieldsPropName: TPropName,
+) => (new <TFormData>(
+  options: ComponentConstructorOptions<
+    Omit<TProps, TPropName | 'form'> & {
+      form: FieldGroupForm<FieldGroupFieldComponentsOf<TGroup>, TFormData>
+    } & {
+      [K in TPropName]: FieldGroupFieldBindingsOf<TGroup, TFormData>
+    }
+  >,
+) => SvelteComponent) &
+  Component<any> &
+  WithoutFunction<Component>
+
+export interface FieldGroupHelper {
+  strict: <TValue>() => StrictFieldGroupFieldSlot<TValue>
+  loose: <TValue>() => LooseFieldGroupFieldSlot<TValue>
+}
+
+export interface FieldGroupDefinition<
+  TFields extends FieldGroupFields,
+  TComponents extends Record<string, Component<any>>,
+> {
+  /** The virtual field-group API injected into the bound component. */
+  fields: SvelteFieldGroup<TFields, TComponents>
+  /** Binds a component's virtual field API to concrete paths in a form. */
+  bindComponent: FieldGroupWithFieldsFn<SvelteFieldGroup<TFields, TComponents>>
+}
+
+/** Signature shared by `defineFieldGroup` and app-form field-group definers. */
+export type DefineFieldGroupFn<
+  TComponents extends Record<string, Component<any>>,
+> = <const TFields extends FieldGroupFields>(
+  defineFn: (helper: FieldGroupHelper) => TFields,
+) => FieldGroupDefinition<TFields, TComponents>
+
+/** Defines a reusable group of virtual fields. */
+export const defineFieldGroup: DefineFieldGroupFn<Record<never, never>> =
+  defineFieldGroupRuntime as never

package/src/FormGroup.svelte

@@ -1,322 +1,101 @@
 <script module lang="ts">
-  import {
-    type DeepKeys,
-    type DeepValue,
+  import { InternalFormGroupApi } from '@tanstack/form-core/internals'
+  import { useSelector } from '@tanstack/svelte-store'
+  import { withComponentProps } from './utils.lib.js'
+  import type {
+    FormErrorTypes,
     FormGroupApi,
-    type FormGroupApiOptions,
-    type FormGroupAsyncValidateOrFn,
-    type FormGroupValidateOrFn,
-    type FormAsyncValidateOrFn,
-    type FormValidateOrFn,
+    FormGroupOptions,
+    FormGroupValidators,
+    ToFormGroupErrorTypes,
   } from '@tanstack/form-core'
-  import { useSelector } from '@tanstack/svelte-store'
-  import { onMount, type Snippet } from 'svelte'
+  import type { AnyInternalFormApi } from '@tanstack/form-core/internals'
 
   export 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,
+    TFormData,
+    TGroupName,
+    TGroupValue,
+    const TGroupValidators extends FormGroupValidators<TGroupValue>,
+    TFormErrorTypes extends FormErrorTypes,
   >(
-    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
+    options: () => FormGroupOptions<
+      TFormData,
+      TGroupName,
+      TGroupValue,
+      TGroupValidators,
+      TFormErrorTypes
     >,
-  ) {
-    const options = opts()
-
-    const api = new FormGroupApi(options)
-
-    const extendedApi: typeof api = api as never
-
-    let mounted = false
-    // Instantiates form group meta and removes it when unrendered
-    onMount(() => {
-      const cleanupFn = api.mount()
-      mounted = true
-      return () => {
-        cleanupFn()
-        mounted = false
-      }
-    })
+  ): FormGroupApi<
+    TFormData,
+    TGroupName,
+    TGroupValue,
+    ToFormGroupErrorTypes<TGroupValidators>,
+    TFormErrorTypes
+  > {
+    const group = new InternalFormGroupApi(options() 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)
+      group.update(options() as never)
     })
+    $effect(() => {
+      group.mount()
+      return () => group._cleanup()
+    })
+
+    const state = useSelector(group.atom)
 
-    const storeSub = useSelector(api.store)
-    Object.defineProperty(extendedApi, 'state', {
-      get() {
-        return storeSub.current
+    return new Proxy({} as typeof group, {
+      get(target, property) {
+        if (Reflect.has(target, property)) return Reflect.get(target, property)
+        if (property === 'state') return state.current
+        if (property === 'value') return state.current.values
+        const value = Reflect.get(group, property, group)
+        return typeof value === 'function' ? value.bind(group) : value
       },
-    })
+    }) as never
+  }
 
-    return extendedApi
+  export function attachGroupComponents(
+    group: any,
+    form: AnyInternalFormApi & Record<string, any>,
+  ) {
+    group.Field = (internals: any, props: any) =>
+      form.Field(
+        internals,
+        group._getFormFieldOptions(props, withComponentProps),
+      )
+    group.ArrayField = (internals: any, props: any) =>
+      form.ArrayField(
+        internals,
+        group._getFormFieldOptions(props, withComponentProps),
+      )
+    group.Subscribe = (internals: any, props: any) =>
+      form._Subscribe(
+        internals,
+        withComponentProps(props, { source: group.atom }),
+      )
+    return group
   }
 </script>
 
-<script
-  lang="ts"
-  generics="
-    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,
-"
->
-  import type { FormGroupApi as FormGroupApiType } from '@tanstack/form-core'
-
-  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,
-  > = {
-    children: Snippet<
-      [
-        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
-        >,
-      ]
-    >
-  } & 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
-  >
+<script lang="ts">
+  import { untrack, type Snippet } from 'svelte'
 
-  let {
-    children,
-    ...formGroupOptions
-  }: 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
-  > = $props()
+  interface Props {
+    form: AnyInternalFormApi & Record<string, any>
+    children: Snippet<[any]>
+    name: string
+    validators?: any
+    onSubmit?: any
+    onSubmitInvalid?: any
+  }
 
-  const formGroupApi = createFormGroup<
-    TParentData,
-    TName,
-    TData,
-    TOnMount,
-    TOnChange,
-    TOnChangeAsync,
-    TOnBlur,
-    TOnBlurAsync,
-    TOnSubmit,
-    TOnSubmitAsync,
-    TOnDynamic,
-    TOnDynamicAsync,
-    TSubmitMeta,
-    TFormOnMount,
-    TFormOnChange,
-    TFormOnChangeAsync,
-    TFormOnBlur,
-    TFormOnBlurAsync,
-    TFormOnSubmit,
-    TFormOnSubmitAsync,
-    TFormOnDynamic,
-    TFormOnDynamicAsync,
-    TFormOnServer,
-    TParentSubmitMeta
-  >(() => {
-    return formGroupOptions
-  })
+  let { children, form, ...groupOptions }: Props = $props()
+  const initialForm = untrack(() => form)
+  const groupApi = attachGroupComponents(
+    createFormGroup(() => ({ ...groupOptions, form: initialForm }) as never),
+    initialForm,
+  )
 </script>
 
-{@render children(formGroupApi)}
+{@render children(groupApi)}

package/src/Subscribe.svelte

@@ -1,16 +1,26 @@
 <script lang="ts">
   import { useSelector } from '@tanstack/svelte-store'
+  import { untrack, type Snippet } from 'svelte'
 
-  // Don't bother typing this out, this component is only usable through a wrapper
   interface Props {
-    children: any
-    store: any
-    selector?: (state: any) => any
+    children: Snippet<[any]>
+    source: any
+    selector: (state: any) => any
+    when?: (selected: any) => boolean
   }
 
-  let { children, store, selector = (state) => state }: Props = $props()
-
-  const value = useSelector(store, selector)
+  let {
+    children,
+    source,
+    selector,
+    when = () => true,
+  }: Props = $props()
+  const value = useSelector(
+    untrack(() => source),
+    untrack(() => selector),
+  )
 </script>
 
-{@render children(value.current)}
+{#if when(value.current)}
+  {@render children(value.current)}
+{/if}

package/src/createForm.public.ts

@@ -0,0 +1,26 @@
+import { createInternalForm, initializeForm } from './createForm.svelte'
+import type {
+  FormOptions,
+  FormValidators,
+  ToFormErrorTypes,
+} from '@tanstack/form-core'
+import type { SvelteFormApi } from './formApiTypes.public'
+import type { DefaultSvelteFormComponentMap } from './AppForm/componentMap.public'
+
+export type CreateForm = <
+  TFormData,
+  const TFormValidators extends FormValidators<TFormData>,
+  TSubmitReturn,
+>(
+  options: () => FormOptions<TFormData, TFormValidators, TSubmitReturn>,
+) => SvelteFormApi<
+  TFormData,
+  ToFormErrorTypes<TFormValidators, TSubmitReturn>,
+  DefaultSvelteFormComponentMap
+>
+
+function createFormImpl(options: () => FormOptions<any, any, any>) {
+  return createInternalForm(options, initializeForm)
+}
+
+export const createForm = createFormImpl as never as CreateForm