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

package/src/Components.public.ts

@@ -1,371 +0,0 @@
-import type {
-  DeepKeys,
-  DeepKeysWhereValueIncludes,
-  DeepValue,
-  FieldApi,
-  FieldApiOptions,
-  FieldValidators,
-  FormErrorTypes,
-  FormGroupApi,
-  FormGroupOptions,
-  FormGroupState,
-  FormGroupValidators,
-  FormState,
-  ToFieldError,
-  ToFormGroupErrorTypes,
-} from '@tanstack/form-core'
-import type {
-  Component,
-  ComponentConstructorOptions,
-  Snippet,
-  SvelteComponent,
-} from 'svelte'
-
-export type WithoutFunction<T> = {
-  [K in keyof T as T[K] extends Function ? never : K]: T[K]
-}
-
-type ExactFieldBrand<out TValue> = {
-  readonly __tanstackFieldExactType: TValue
-}
-type AcceptsFieldBrand<out TAcceptedValue> = {
-  readonly __tanstackFieldAcceptsType: TAcceptedValue
-}
-type CompatibleFieldKey<TKey, TComponent, TTargetValue> =
-  TComponent extends ExactFieldBrand<infer TExact>
-    ? [TExact] extends [TTargetValue]
-      ? [TTargetValue] extends [TExact]
-        ? TKey
-        : never
-      : never
-    : TComponent extends AcceptsFieldBrand<infer TLoose>
-      ? [TTargetValue] extends [TLoose]
-        ? TKey
-        : never
-      : TKey
-type FilteredFieldComponents<
-  TFieldComponents extends Record<string, Component<any>>,
-  TTargetValue,
-> = {
-  [
-    K in keyof TFieldComponents as CompatibleFieldKey<
-      K,
-      TFieldComponents[K],
-      TTargetValue
-    >
-  ]: TFieldComponents[K]
-}
-type FieldComponentsMatchingType<
-  TFieldComponents extends Record<string, Component<any>>,
-  TTargetValue,
-> = unknown extends TTargetValue
-  ? TFieldComponents
-  : string extends keyof TFieldComponents
-    ? TFieldComponents
-    : FilteredFieldComponents<TFieldComponents, TTargetValue>
-
-export type SvelteFieldApi<
-  TFieldName,
-  TFieldValue,
-  TFieldError,
-  TFormData,
-  TFormErrorTypes extends FormErrorTypes,
-  TFieldComponents extends Record<string, Component<any>>,
-> = FieldApi<TFieldName, TFieldValue, TFieldError, TFormData, TFormErrorTypes> &
-  FieldComponentsMatchingType<TFieldComponents, TFieldValue>
-
-interface SvelteSubscribeProps<TSourceData, TSelected> {
-  selector: (state: TSourceData) => TSelected
-  when?: (selected: NoInfer<TSelected>) => boolean
-  children: Snippet<[NoInfer<TSelected>]>
-}
-
-export type SvelteFormSubscribeProps<
-  TFormData,
-  TFormErrorTypes extends FormErrorTypes,
-  TSelected,
-> = SvelteSubscribeProps<FormState<TFormData, TFormErrorTypes>, TSelected>
-
-export type SvelteFormSubscribeComponent<
-  TFormData,
-  TFormErrorTypes extends FormErrorTypes,
-> = (new <TSelected>(
-  options: ComponentConstructorOptions<
-    SvelteFormSubscribeProps<TFormData, TFormErrorTypes, TSelected>
-  >,
-) => SvelteComponent) &
-  Component<any> &
-  WithoutFunction<Component>
-
-export interface SvelteFormFieldProps<
-  TFieldData,
-  TFieldName,
-  TFieldValue,
-  TFieldValidators extends FieldValidators<TFieldData, TFieldName, TFieldValue>,
-  TGroupFieldError,
-  TFormData,
-  TFormErrorTypes extends FormErrorTypes,
-  TFieldComponents extends Record<string, Component<any>>,
-> extends FieldApiOptions<
-  TFieldData,
-  TFieldName,
-  TFieldValue,
-  TFieldValidators,
-  TGroupFieldError,
-  TFormData,
-  TFormErrorTypes
-> {
-  children: Snippet<
-    [
-      SvelteFieldApi<
-        TFieldName,
-        TFieldValue,
-        ToFieldError<
-          NoInfer<TFieldValidators>,
-          TGroupFieldError,
-          TFormErrorTypes
-        >,
-        TFormData,
-        TFormErrorTypes,
-        TFieldComponents
-      >,
-    ]
-  >
-}
-
-export type SvelteFormFieldComponent<
-  TFormData,
-  TFormErrorTypes extends FormErrorTypes,
-  TFieldComponents extends Record<string, Component<any>>,
-> = (new <
-  TFieldName extends DeepKeys<TFormData>,
-  const TFieldValidators extends FieldValidators<
-    TFormData,
-    TFieldName,
-    DeepValue<TFormData, TFieldName>
-  >,
->(
-  options: ComponentConstructorOptions<
-    SvelteFormFieldProps<
-      TFormData,
-      TFieldName,
-      DeepValue<TFormData, TFieldName>,
-      TFieldValidators,
-      never,
-      TFormData,
-      TFormErrorTypes,
-      TFieldComponents
-    >
-  >,
-) => SvelteComponent) &
-  Component<any> &
-  WithoutFunction<Component>
-
-export type SvelteFormArrayFieldComponent<
-  TFormData,
-  TFormErrorTypes extends FormErrorTypes,
-  TFieldComponents extends Record<string, Component<any>>,
-> = (new <
-  TFieldName extends DeepKeysWhereValueIncludes<TFormData, Array<any>>,
-  const TFieldValidators extends FieldValidators<
-    TFormData,
-    TFieldName,
-    DeepValue<TFormData, TFieldName>
-  >,
->(
-  options: ComponentConstructorOptions<
-    SvelteFormFieldProps<
-      TFormData,
-      TFieldName,
-      DeepValue<TFormData, TFieldName>,
-      TFieldValidators,
-      never,
-      TFormData,
-      TFormErrorTypes,
-      TFieldComponents
-    >
-  >,
-) => SvelteComponent) &
-  Component<any> &
-  WithoutFunction<Component>
-
-export type SvelteFormGroupSubscribeComponent<
-  TGroupValue,
-  TGroupErrorTypes extends FormErrorTypes,
-> = (new <TSelected>(
-  options: ComponentConstructorOptions<
-    SvelteSubscribeProps<
-      FormGroupState<TGroupValue, TGroupErrorTypes>,
-      TSelected
-    >
-  >,
-) => SvelteComponent) &
-  Component<any> &
-  WithoutFunction<Component>
-
-export type SvelteFormGroupFieldComponent<
-  TFormData,
-  TGroupValue,
-  TGroupErrorTypes extends FormErrorTypes,
-  TFormErrorTypes extends FormErrorTypes,
-  TFieldComponents extends Record<string, Component<any>>,
-> = (new <
-  TFieldName extends DeepKeys<TGroupValue>,
-  const TFieldValidators extends FieldValidators<
-    TGroupValue,
-    TFieldName,
-    DeepValue<TGroupValue, TFieldName>
-  >,
->(
-  options: ComponentConstructorOptions<
-    SvelteFormFieldProps<
-      TGroupValue,
-      TFieldName,
-      DeepValue<TGroupValue, TFieldName>,
-      TFieldValidators,
-      TGroupErrorTypes['fieldError'],
-      TFormData,
-      TFormErrorTypes,
-      TFieldComponents
-    >
-  >,
-) => SvelteComponent) &
-  Component<any> &
-  WithoutFunction<Component>
-
-export type SvelteFormGroupArrayFieldComponent<
-  TFormData,
-  TGroupValue,
-  TGroupErrorTypes extends FormErrorTypes,
-  TFormErrorTypes extends FormErrorTypes,
-  TFieldComponents extends Record<string, Component<any>>,
-> = (new <
-  TFieldName extends DeepKeysWhereValueIncludes<TGroupValue, Array<any>>,
-  const TFieldValidators extends FieldValidators<
-    TGroupValue,
-    TFieldName,
-    DeepValue<TGroupValue, TFieldName>
-  >,
->(
-  options: ComponentConstructorOptions<
-    SvelteFormFieldProps<
-      TGroupValue,
-      TFieldName,
-      DeepValue<TGroupValue, TFieldName>,
-      TFieldValidators,
-      TGroupErrorTypes['fieldError'],
-      TFormData,
-      TFormErrorTypes,
-      TFieldComponents
-    >
-  >,
-) => SvelteComponent) &
-  Component<any> &
-  WithoutFunction<Component>
-
-export interface SvelteFormGroupApi<
-  TFormData,
-  TGroupName,
-  TGroupValue,
-  TGroupErrorTypes extends FormErrorTypes,
-  TFormErrorTypes extends FormErrorTypes,
-  TFieldComponents extends Record<string, Component<any>>,
-> extends FormGroupApi<
-  TFormData,
-  TGroupName,
-  TGroupValue,
-  TGroupErrorTypes,
-  TFormErrorTypes
-> {
-  Field: SvelteFormGroupFieldComponent<
-    TFormData,
-    TGroupValue,
-    TGroupErrorTypes,
-    TFormErrorTypes,
-    TFieldComponents
-  >
-  ArrayField: SvelteFormGroupArrayFieldComponent<
-    TFormData,
-    TGroupValue,
-    TGroupErrorTypes,
-    TFormErrorTypes,
-    TFieldComponents
-  >
-  Subscribe: SvelteFormGroupSubscribeComponent<TGroupValue, TGroupErrorTypes>
-}
-
-export interface SvelteFormGroupProps<
-  TFormData,
-  TGroupName,
-  TGroupValue,
-  TGroupValidators extends FormGroupValidators<TGroupValue>,
-  TFormErrorTypes extends FormErrorTypes,
-  TFieldComponents extends Record<string, Component<any>>,
-> extends Omit<
-  FormGroupOptions<
-    TFormData,
-    TGroupName,
-    TGroupValue,
-    TGroupValidators,
-    TFormErrorTypes
-  >,
-  'form'
-> {
-  children: Snippet<
-    [
-      SvelteFormGroupApi<
-        TFormData,
-        TGroupName,
-        TGroupValue,
-        ToFormGroupErrorTypes<NoInfer<TGroupValidators>>,
-        TFormErrorTypes,
-        TFieldComponents
-      >,
-    ]
-  >
-}
-
-export type SvelteFormGroupComponent<
-  TFormData,
-  TFormErrorTypes extends FormErrorTypes,
-  TFieldComponents extends Record<string, Component<any>>,
-> = (new <
-  TGroupName extends DeepKeys<TFormData>,
-  TGroupValue extends DeepValue<TFormData, TGroupName>,
-  const TGroupValidators extends FormGroupValidators<TGroupValue>,
->(
-  options: ComponentConstructorOptions<
-    SvelteFormGroupProps<
-      TFormData,
-      TGroupName,
-      TGroupValue,
-      TGroupValidators,
-      TFormErrorTypes,
-      TFieldComponents
-    >
-  >,
-) => SvelteComponent) &
-  Component<any> &
-  WithoutFunction<Component>
-
-export interface SvelteTanStackFormComponents<
-  TFormData,
-  TFormErrorTypes extends FormErrorTypes,
-  TFieldComponents extends Record<string, Component<any>> = Record<
-    never,
-    never
-  >,
-> {
-  Field: SvelteFormFieldComponent<TFormData, TFormErrorTypes, TFieldComponents>
-  ArrayField: SvelteFormArrayFieldComponent<
-    TFormData,
-    TFormErrorTypes,
-    TFieldComponents
-  >
-  Subscribe: SvelteFormSubscribeComponent<TFormData, TFormErrorTypes>
-  FormGroup: SvelteFormGroupComponent<
-    TFormData,
-    TFormErrorTypes,
-    TFieldComponents
-  >
-}

package/src/Field.svelte

@@ -1,152 +0,0 @@
-<script module lang="ts">
-  import { shallow, useSelector } from '@tanstack/svelte-store'
-  import type {
-    FieldApi,
-    FieldApiOptions,
-    FieldValidators,
-    FormErrorTypes,
-    ToFieldError,
-  } from '@tanstack/form-core'
-  import type {
-    AnyInternalFieldApi,
-    AnyInternalFormApi,
-    InternalBaseFieldMeta,
-  } from '@tanstack/form-core/internals'
-
-  interface InternalFieldOptions
-    extends FieldApiOptions<any, any, any, any, any, any, any> {
-    form: AnyInternalFormApi
-  }
-
-  function useDynamicFieldSelector<TSelected>(
-    getField: () => AnyInternalFieldApi,
-    selector: (field: AnyInternalFieldApi) => TSelected,
-  ) {
-    let selected = $state.raw(selector(getField()))
-
-    $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()
-    })
-
-    return {
-      get current() {
-        return selected
-      },
-    }
-  }
-
-  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(() => {
-      fieldApi._update(options() as InternalFieldOptions)
-    })
-
-    $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,
-    )
-
-    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
-      },
-    }) as never
-  }
-</script>
-
-<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 = $props()
-
-  const fieldApi = createField(
-    () => fieldOptions,
-    untrack(() => array),
-  )
-  Object.assign(fieldApi, untrack(() => fieldComponents))
-  setContext(fieldContextKey, fieldApi)
-</script>
-
-{@render children(fieldApi)}

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>
-}