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

package/src/AppForm/fieldComponentHelpers.lib.ts

@@ -1,24 +0,0 @@
-import { withComponentProps } from '../utils.lib.js'
-import { useFieldContext } from './contexts.lib'
-import type { Component } from 'svelte'
-
-type AnyFieldComponent = Component<any>
-
-export function wrapField(
-  Component: AnyFieldComponent,
-  fieldPropKey: string,
-): AnyFieldComponent {
-  return ((internals: any, props: any) =>
-    Component(
-      internals,
-      withComponentProps(props, {
-        [fieldPropKey]: useFieldContext(),
-      }),
-    )) as AnyFieldComponent
-}
-
-export function brandComponentFactory(): (
-  component: AnyFieldComponent,
-) => AnyFieldComponent {
-  return (component) => component
-}

package/src/AppForm/getFormHookHelpers.public.ts

@@ -1,82 +0,0 @@
-import { brandComponentFactory, wrapField } from './fieldComponentHelpers.lib'
-import type { Component, ComponentProps } from 'svelte'
-import type { FieldWithValue } from '@tanstack/form-core'
-
-type ExactFieldBrand<out TValue> = {
-  readonly __tanstackFieldExactType: TValue
-}
-type AcceptsFieldBrand<out TAcceptedValue> = {
-  readonly __tanstackFieldAcceptsType: TAcceptedValue
-}
-type AnyFieldComponent = Component<any>
-type PropsOf<TComponent extends AnyFieldComponent> = ComponentProps<TComponent>
-type FieldValuePropKeys<TProps> = {
-  [K in keyof TProps]-?: TProps[K] extends FieldWithValue<any> ? K : never
-}[keyof TProps]
-type FieldValueFromProp<TProp> =
-  TProp extends FieldWithValue<infer TValue> ? TValue : never
-type PublicPropsReplacingField<
-  TProps,
-  TFieldPropKey extends keyof TProps,
-> = Omit<TProps, TFieldPropKey>
-
-type StrictInjectedFieldComponent<
-  TComponent extends AnyFieldComponent,
-  TProps = PropsOf<TComponent>,
-  TFieldPropKey extends FieldValuePropKeys<TProps> = FieldValuePropKeys<TProps>,
-> = Component<PublicPropsReplacingField<TProps, TFieldPropKey>> &
-  ExactFieldBrand<FieldValueFromProp<TProps[TFieldPropKey]>>
-type LooseInjectedFieldComponent<
-  TComponent extends AnyFieldComponent,
-  TProps = PropsOf<TComponent>,
-  TFieldPropKey extends FieldValuePropKeys<TProps> = FieldValuePropKeys<TProps>,
-> = Component<PublicPropsReplacingField<TProps, TFieldPropKey>> &
-  AcceptsFieldBrand<FieldValueFromProp<TProps[TFieldPropKey]>>
-
-interface FieldComponentHelper {
-  strict: <
-    TComponent extends AnyFieldComponent,
-    TProps = PropsOf<TComponent>,
-    TFieldPropKey extends FieldValuePropKeys<TProps> =
-      FieldValuePropKeys<TProps>,
-  >(
-    Component: TComponent,
-    fieldPropKey: TFieldPropKey,
-  ) => StrictInjectedFieldComponent<TComponent, TProps, TFieldPropKey>
-  loose: <
-    TComponent extends AnyFieldComponent,
-    TProps = PropsOf<TComponent>,
-    TFieldPropKey extends FieldValuePropKeys<TProps> =
-      FieldValuePropKeys<TProps>,
-  >(
-    Component: TComponent,
-    fieldPropKey: TFieldPropKey,
-  ) => LooseInjectedFieldComponent<TComponent, TProps, TFieldPropKey>
-}
-
-interface FieldBrandHelper {
-  strict: <TValue>() => <TComponent extends AnyFieldComponent>(
-    component: TComponent,
-  ) => TComponent & ExactFieldBrand<TValue>
-  loose: <TValue>() => <TComponent extends AnyFieldComponent>(
-    component: TComponent,
-  ) => TComponent & AcceptsFieldBrand<TValue>
-}
-
-export interface FormHookHelpers {
-  fieldBrand: FieldBrandHelper
-  fieldComponent: FieldComponentHelper
-}
-
-export function getFormHookHelpers(): FormHookHelpers {
-  return {
-    fieldComponent: {
-      strict: wrapField as FieldComponentHelper['strict'],
-      loose: wrapField as FieldComponentHelper['loose'],
-    },
-    fieldBrand: {
-      strict: brandComponentFactory as FieldBrandHelper['strict'],
-      loose: brandComponentFactory as FieldBrandHelper['loose'],
-    },
-  }
-}

package/src/AppForm/initializeAppForm.lib.ts

@@ -1,18 +0,0 @@
-import { InternalFormApi } from '@tanstack/form-core/internals'
-import { attachSvelteAppFormComponents } from './Components.lib'
-import type { FormOptions } from '@tanstack/form-core'
-import type { InternalSvelteFormApi } from '../createForm.svelte.js'
-import type { AnySvelteFormComponentMap } from './componentMap.public'
-
-export function createAppFormInitializer<
-  TComponents extends AnySvelteFormComponentMap,
->(
-  createOptions: TComponents,
-): (options: FormOptions<any, any, any>) => InternalSvelteFormApi {
-  return (options) =>
-    attachSvelteAppFormComponents(
-      new InternalFormApi(options),
-      createOptions.formComponents,
-      createOptions.fieldComponents,
-    ) as never
-}

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