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

package/src/FieldGroup/FieldGroupApi.public.ts

@@ -1,100 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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>
-}

package/src/FieldGroup/withFields.public.ts

@@ -1,179 +0,0 @@
-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,101 +0,0 @@
-<script module lang="ts">
-  import { InternalFormGroupApi } from '@tanstack/form-core/internals'
-  import { useSelector } from '@tanstack/svelte-store'
-  import { withComponentProps } from './utils.lib.js'
-  import type {
-    FormErrorTypes,
-    FormGroupApi,
-    FormGroupOptions,
-    FormGroupValidators,
-    ToFormGroupErrorTypes,
-  } from '@tanstack/form-core'
-  import type { AnyInternalFormApi } from '@tanstack/form-core/internals'
-
-  export function createFormGroup<
-    TFormData,
-    TGroupName,
-    TGroupValue,
-    const TGroupValidators extends FormGroupValidators<TGroupValue>,
-    TFormErrorTypes extends FormErrorTypes,
-  >(
-    options: () => FormGroupOptions<
-      TFormData,
-      TGroupName,
-      TGroupValue,
-      TGroupValidators,
-      TFormErrorTypes
-    >,
-  ): FormGroupApi<
-    TFormData,
-    TGroupName,
-    TGroupValue,
-    ToFormGroupErrorTypes<TGroupValidators>,
-    TFormErrorTypes
-  > {
-    const group = new InternalFormGroupApi(options() as never)
-
-    $effect.pre(() => {
-      group.update(options() as never)
-    })
-    $effect(() => {
-      group.mount()
-      return () => group._cleanup()
-    })
-
-    const state = useSelector(group.atom)
-
-    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
-  }
-
-  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">
-  import { untrack, type Snippet } from 'svelte'
-
-  interface Props {
-    form: AnyInternalFormApi & Record<string, any>
-    children: Snippet<[any]>
-    name: string
-    validators?: any
-    onSubmit?: any
-    onSubmitInvalid?: any
-  }
-
-  let { children, form, ...groupOptions }: Props = $props()
-  const initialForm = untrack(() => form)
-  const groupApi = attachGroupComponents(
-    createFormGroup(() => ({ ...groupOptions, form: initialForm }) as never),
-    initialForm,
-  )
-</script>
-
-{@render children(groupApi)}

package/src/Subscribe.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-  import { useSelector } from '@tanstack/svelte-store'
-  import { untrack, type Snippet } from 'svelte'
-
-  interface Props {
-    children: Snippet<[any]>
-    source: any
-    selector: (state: any) => any
-    when?: (selected: any) => boolean
-  }
-
-  let {
-    children,
-    source,
-    selector,
-    when = () => true,
-  }: Props = $props()
-  const value = useSelector(
-    untrack(() => source),
-    untrack(() => selector),
-  )
-</script>
-
-{#if when(value.current)}
-  {@render children(value.current)}
-{/if}

package/src/context-keys.ts

@@ -1,2 +0,0 @@
-export const fieldContextKey = '__tanstack_field_context_key'
-export const formContextKey = '__tanstack_form_context_key'

package/src/createForm.public.ts

@@ -1,26 +0,0 @@
-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

package/src/createForm.svelte.ts

@@ -1,76 +0,0 @@
-import { InternalFormApi } from '@tanstack/form-core/internals'
-import { useSelector } from '@tanstack/svelte-store'
-import { onMount } from 'svelte'
-import Field from './Field.svelte'
-import FormGroup from './FormGroup.svelte'
-import Subscribe from './Subscribe.svelte'
-import { withComponentProps } from './utils.lib.js'
-import type { FormOptions } from '@tanstack/form-core'
-import type { Component } from 'svelte'
-import type { AnyInternalFormApi } from '@tanstack/form-core/internals'
-import type { SvelteTanStackFormComponents } from './Components.public'
-
-export interface InternalSvelteFormApi
-  extends AnyInternalFormApi, SvelteTanStackFormComponents<any, any, any> {
-  _Subscribe: Component<any>
-  useSelector: <TSelected = any>(
-    selector?: (state: any) => TSelected,
-  ) => { readonly current: TSelected }
-}
-
-export function attachSvelteFormComponents(
-  form: AnyInternalFormApi,
-  fieldComponents: Record<string, Component<any>> | null,
-): InternalSvelteFormApi {
-  const result = form as InternalSvelteFormApi
-
-  result.Field = ((internals: any, props: any) =>
-    Field(
-      internals,
-      withComponentProps(props, {
-        form,
-        fieldComponents: fieldComponents ?? {},
-      }),
-    )) as never
-  result.ArrayField = ((internals: any, props: any) =>
-    Field(
-      internals,
-      withComponentProps(props, {
-        form,
-        array: true,
-        fieldComponents: fieldComponents ?? {},
-      }),
-    )) as never
-  result._Subscribe = (internals, props) => Subscribe(internals, props)
-  result.Subscribe = ((internals: any, props: any) =>
-    Subscribe(
-      internals,
-      withComponentProps(props, { source: form.atom }),
-    )) as never
-  result.FormGroup = ((internals: any, props: any) =>
-    FormGroup(internals, withComponentProps(props, { form }))) as never
-  result.useSelector = ((selector?: (state: any) => any) =>
-    useSelector(form.atom, selector)) as never
-
-  return result
-}
-
-export function initializeForm(
-  options: FormOptions<any, any, any>,
-): InternalSvelteFormApi {
-  return attachSvelteFormComponents(new InternalFormApi(options), null)
-}
-
-export function createInternalForm(
-  options: () => FormOptions<any, any, any>,
-  initialize: (options: FormOptions<any, any, any>) => InternalSvelteFormApi,
-): InternalSvelteFormApi {
-  const form = initialize(options())
-
-  $effect.pre(() => {
-    form._update(options())
-  })
-  onMount(() => form.mount())
-
-  return form
-}

package/src/formApiTypes.public.ts

@@ -1,48 +0,0 @@
-import type {
-  AnyFormApi,
-  FormApi,
-  FormErrorTypes,
-  FormState,
-} from '@tanstack/form-core'
-import type { Component } from 'svelte'
-import type { SvelteTanStackFormComponents } from './Components.public'
-import type {
-  AnySvelteFormComponentMap,
-  DefaultSvelteFormComponentMap,
-} from './AppForm/componentMap.public'
-
-export interface SvelteFormSelectors<
-  TFormData,
-  TFormErrorTypes extends FormErrorTypes,
-> {
-  useSelector: <TSelected = FormState<TFormData, TFormErrorTypes>>(
-    selector?: (state: FormState<TFormData, TFormErrorTypes>) => TSelected,
-  ) => { readonly current: TSelected }
-}
-
-type ExtendedFormApi<
-  TFormData,
-  TFormErrorTypes extends FormErrorTypes,
-  TFieldComponents extends Record<string, Component<any>>,
-> = FormApi<TFormData, TFormErrorTypes> &
-  SvelteTanStackFormComponents<TFormData, TFormErrorTypes, TFieldComponents> &
-  SvelteFormSelectors<TFormData, TFormErrorTypes>
-
-export type SvelteFormApi<
-  TFormData,
-  TFormErrorTypes extends FormErrorTypes,
-  TComponents extends AnySvelteFormComponentMap = DefaultSvelteFormComponentMap,
-> = unknown extends TComponents['formComponents']
-  ? ExtendedFormApi<TFormData, TFormErrorTypes, TComponents['fieldComponents']>
-  : ExtendedFormApi<
-      TFormData,
-      TFormErrorTypes,
-      TComponents['fieldComponents']
-    > &
-      TComponents['formComponents']
-
-export type AnySvelteFormApi = AnyFormApi &
-  SvelteTanStackFormComponents<any, any, any> &
-  SvelteFormSelectors<any, any>
-
-export type { SvelteFormComponentMap } from './AppForm/componentMap.public'

package/src/formType.public.ts

@@ -1,46 +0,0 @@
-import type {
-  AnyFormOptions,
-  FormOptions,
-  FormValidators,
-  ToFormErrorTypes,
-} from '@tanstack/form-core'
-import type { AppFormOptions } from './AppForm/appFormOptions.public'
-import type {
-  AnySvelteFormComponentMap,
-  DefaultSvelteFormComponentMap,
-} from './AppForm/componentMap.public'
-import type { SvelteFormApi } from './formApiTypes.public'
-
-type SvelteFormTypeErrorTypes<
-  TValidators extends FormValidators<any>,
-  TSubmitReturn,
-> = unknown extends TSubmitReturn
-  ? any
-  : ToFormErrorTypes<TValidators, TSubmitReturn>
-
-export type SvelteFormType<
-  TOptions extends
-    AnyFormOptions | AppFormOptions<any, any, any, AnySvelteFormComponentMap>,
-> =
-  TOptions extends AppFormOptions<
-    infer TData,
-    infer TValidators,
-    infer TSubmitReturn,
-    infer TComponents
-  >
-    ? SvelteFormApi<
-        TData,
-        SvelteFormTypeErrorTypes<TValidators, TSubmitReturn>,
-        TComponents
-      >
-    : TOptions extends FormOptions<
-          infer TData,
-          infer TValidators,
-          infer TSubmitReturn
-        >
-      ? SvelteFormApi<
-          TData,
-          SvelteFormTypeErrorTypes<TValidators, TSubmitReturn>,
-          DefaultSvelteFormComponentMap
-        >
-      : never