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

package/src/VueForm/Components.public.ts

@@ -1,451 +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, PublicProps } from 'vue'
-import type { VueComponentInstance } from '../vueTypes.lib'
-
-declare const fieldComponentsType: unique symbol
-
-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>,
-  TTargetValue,
-> = {
-  [
-    K in keyof TFieldComponents as CompatibleFieldKey<
-      K,
-      TFieldComponents[K],
-      TTargetValue
-    >
-  ]: TFieldComponents[K]
-}
-
-type FieldComponentsMatchingType<
-  TFieldComponents extends Record<string, Component>,
-  TTargetValue,
-> = unknown extends TTargetValue
-  ? TFieldComponents
-  : string extends keyof TFieldComponents
-    ? TFieldComponents
-    : FilteredFieldComponents<TFieldComponents, TTargetValue>
-
-export type VueFieldApi<
-  TFieldName,
-  TFieldValue,
-  TFieldError,
-  TFormData,
-  TFormErrorTypes extends FormErrorTypes,
-  TFieldComponents extends Record<string, Component>,
-> = FieldApi<TFieldName, TFieldValue, TFieldError, TFormData, TFormErrorTypes> &
-  FieldComponentsMatchingType<TFieldComponents, TFieldValue>
-
-interface VueSubscribeProps<in out TSourceData, in out TSelected> {
-  selector: (state: TSourceData) => TSelected
-  when?: (selected: NoInfer<TSelected>) => boolean
-}
-
-export type VueFormSubscribeProps<
-  TFormData,
-  TFormErrorTypes extends FormErrorTypes,
-  TSelected,
-> = VueSubscribeProps<FormState<TFormData, TFormErrorTypes>, TSelected>
-
-export type VueFormSubscribeComponent<
-  in out TFormData,
-  in out TFormErrorTypes extends FormErrorTypes,
-> = new <TSelected>(
-  props: VueFormSubscribeProps<TFormData, TFormErrorTypes, TSelected> &
-    PublicProps,
-) => VueComponentInstance<
-  VueFormSubscribeProps<TFormData, TFormErrorTypes, TSelected>,
-  { default: NoInfer<TSelected> }
->
-
-export interface VueFormFieldProps<
-  in out TFieldData,
-  in out TFieldName,
-  in out TFieldValue,
-  in out TFieldValidators extends FieldValidators<
-    TFieldData,
-    TFieldName,
-    TFieldValue
-  >,
-  in out TGroupFieldError,
-  in out TFormData,
-  in out TFormErrorTypes extends FormErrorTypes,
-  in out TFieldComponents extends Record<string, Component>,
-> extends FieldApiOptions<
-  TFieldData,
-  TFieldName,
-  TFieldValue,
-  TFieldValidators,
-  TGroupFieldError,
-  TFormData,
-  TFormErrorTypes
-> {
-  readonly [fieldComponentsType]?: TFieldComponents
-}
-
-export type VueFormFieldComponent<
-  in out TFormData,
-  in out TFormErrorTypes extends FormErrorTypes,
-  in out TFieldComponents extends Record<string, Component>,
-> = new <
-  TFieldName extends DeepKeys<TFormData>,
-  const TFieldValidators extends FieldValidators<
-    TFormData,
-    TFieldName,
-    DeepValue<TFormData, TFieldName>
-  >,
->(
-  props: VueFormFieldProps<
-    TFormData,
-    TFieldName,
-    DeepValue<TFormData, TFieldName>,
-    TFieldValidators,
-    never,
-    TFormData,
-    TFormErrorTypes,
-    TFieldComponents
-  > &
-    PublicProps,
-) => VueComponentInstance<
-  VueFormFieldProps<
-    TFormData,
-    TFieldName,
-    DeepValue<TFormData, TFieldName>,
-    TFieldValidators,
-    never,
-    TFormData,
-    TFormErrorTypes,
-    TFieldComponents
-  >,
-  {
-    default: {
-      field: VueFieldApi<
-        TFieldName,
-        DeepValue<TFormData, TFieldName>,
-        ToFieldError<NoInfer<TFieldValidators>, never, TFormErrorTypes>,
-        TFormData,
-        TFormErrorTypes,
-        TFieldComponents
-      >
-    }
-  }
->
-
-export type VueFormArrayFieldComponent<
-  in out TFormData,
-  in out TFormErrorTypes extends FormErrorTypes,
-  in out TFieldComponents extends Record<string, Component>,
-> = new <
-  TFieldName extends DeepKeysWhereValueIncludes<TFormData, Array<any>>,
-  const TFieldValidators extends FieldValidators<
-    TFormData,
-    TFieldName,
-    DeepValue<TFormData, TFieldName>
-  >,
->(
-  props: VueFormFieldProps<
-    TFormData,
-    TFieldName,
-    DeepValue<TFormData, TFieldName>,
-    TFieldValidators,
-    never,
-    TFormData,
-    TFormErrorTypes,
-    TFieldComponents
-  > &
-    PublicProps,
-) => VueComponentInstance<
-  VueFormFieldProps<
-    TFormData,
-    TFieldName,
-    DeepValue<TFormData, TFieldName>,
-    TFieldValidators,
-    never,
-    TFormData,
-    TFormErrorTypes,
-    TFieldComponents
-  >,
-  {
-    default: {
-      field: VueFieldApi<
-        TFieldName,
-        DeepValue<TFormData, TFieldName>,
-        ToFieldError<NoInfer<TFieldValidators>, never, TFormErrorTypes>,
-        TFormData,
-        TFormErrorTypes,
-        TFieldComponents
-      >
-    }
-  }
->
-
-export type VueFormGroupSubscribeProps<
-  TGroupValue,
-  TGroupErrorTypes extends FormErrorTypes,
-  TSelected,
-> = VueSubscribeProps<FormGroupState<TGroupValue, TGroupErrorTypes>, TSelected>
-
-export type VueFormGroupSubscribeComponent<
-  in out TGroupValue,
-  in out TGroupErrorTypes extends FormErrorTypes,
-> = new <TSelected>(
-  props: VueFormGroupSubscribeProps<TGroupValue, TGroupErrorTypes, TSelected> &
-    PublicProps,
-) => VueComponentInstance<
-  VueFormGroupSubscribeProps<TGroupValue, TGroupErrorTypes, TSelected>,
-  { default: NoInfer<TSelected> }
->
-
-export type VueFormGroupFieldComponent<
-  in out TFormData,
-  in out TGroupValue,
-  in out TGroupErrorTypes extends FormErrorTypes,
-  in out TFormErrorTypes extends FormErrorTypes,
-  in out TFieldComponents extends Record<string, Component>,
-> = new <
-  TFieldName extends DeepKeys<TGroupValue>,
-  const TFieldValidators extends FieldValidators<
-    TGroupValue,
-    TFieldName,
-    DeepValue<TGroupValue, TFieldName>
-  >,
->(
-  props: VueFormFieldProps<
-    TGroupValue,
-    TFieldName,
-    DeepValue<TGroupValue, TFieldName>,
-    TFieldValidators,
-    TGroupErrorTypes['fieldError'],
-    TFormData,
-    TFormErrorTypes,
-    TFieldComponents
-  > &
-    PublicProps,
-) => VueComponentInstance<
-  VueFormFieldProps<
-    TGroupValue,
-    TFieldName,
-    DeepValue<TGroupValue, TFieldName>,
-    TFieldValidators,
-    TGroupErrorTypes['fieldError'],
-    TFormData,
-    TFormErrorTypes,
-    TFieldComponents
-  >,
-  {
-    default: {
-      field: VueFieldApi<
-        TFieldName,
-        DeepValue<TGroupValue, TFieldName>,
-        ToFieldError<
-          NoInfer<TFieldValidators>,
-          TGroupErrorTypes['fieldError'],
-          TFormErrorTypes
-        >,
-        TFormData,
-        TFormErrorTypes,
-        TFieldComponents
-      >
-    }
-  }
->
-
-export type VueFormGroupArrayFieldComponent<
-  in out TFormData,
-  in out TGroupValue,
-  in out TGroupErrorTypes extends FormErrorTypes,
-  in out TFormErrorTypes extends FormErrorTypes,
-  in out TFieldComponents extends Record<string, Component>,
-> = new <
-  TFieldName extends DeepKeysWhereValueIncludes<TGroupValue, Array<any>>,
-  const TFieldValidators extends FieldValidators<
-    TGroupValue,
-    TFieldName,
-    DeepValue<TGroupValue, TFieldName>
-  >,
->(
-  props: VueFormFieldProps<
-    TGroupValue,
-    TFieldName,
-    DeepValue<TGroupValue, TFieldName>,
-    TFieldValidators,
-    TGroupErrorTypes['fieldError'],
-    TFormData,
-    TFormErrorTypes,
-    TFieldComponents
-  > &
-    PublicProps,
-) => VueComponentInstance<
-  VueFormFieldProps<
-    TGroupValue,
-    TFieldName,
-    DeepValue<TGroupValue, TFieldName>,
-    TFieldValidators,
-    TGroupErrorTypes['fieldError'],
-    TFormData,
-    TFormErrorTypes,
-    TFieldComponents
-  >,
-  {
-    default: {
-      field: VueFieldApi<
-        TFieldName,
-        DeepValue<TGroupValue, TFieldName>,
-        ToFieldError<
-          NoInfer<TFieldValidators>,
-          TGroupErrorTypes['fieldError'],
-          TFormErrorTypes
-        >,
-        TFormData,
-        TFormErrorTypes,
-        TFieldComponents
-      >
-    }
-  }
->
-
-export interface VueFormGroupApi<
-  in out TFormData,
-  in out TGroupName,
-  in out TGroupValue,
-  in out TGroupErrorTypes extends FormErrorTypes,
-  in out TFormErrorTypes extends FormErrorTypes,
-  in out TFieldComponents extends Record<string, Component>,
-> extends FormGroupApi<
-  TFormData,
-  TGroupName,
-  TGroupValue,
-  TGroupErrorTypes,
-  TFormErrorTypes
-> {
-  Field: VueFormGroupFieldComponent<
-    TFormData,
-    TGroupValue,
-    TGroupErrorTypes,
-    TFormErrorTypes,
-    TFieldComponents
-  >
-  ArrayField: VueFormGroupArrayFieldComponent<
-    TFormData,
-    TGroupValue,
-    TGroupErrorTypes,
-    TFormErrorTypes,
-    TFieldComponents
-  >
-  Subscribe: VueFormGroupSubscribeComponent<TGroupValue, TGroupErrorTypes>
-}
-
-export interface VueFormGroupProps<
-  in out TFormData,
-  in out TGroupName,
-  in out TGroupValue,
-  in out TGroupValidators extends FormGroupValidators<TGroupValue>,
-  in out TFormErrorTypes extends FormErrorTypes,
-  in out TFieldComponents extends Record<string, Component>,
-> extends Omit<
-  FormGroupOptions<
-    TFormData,
-    TGroupName,
-    TGroupValue,
-    TGroupValidators,
-    TFormErrorTypes
-  >,
-  'form'
-> {
-  readonly [fieldComponentsType]?: TFieldComponents
-}
-
-export type VueFormGroupComponent<
-  in out TFormData,
-  in out TFormErrorTypes extends FormErrorTypes,
-  in out TFieldComponents extends Record<string, Component>,
-> = new <
-  TGroupName extends DeepKeys<TFormData>,
-  TGroupValue extends DeepValue<TFormData, TGroupName>,
-  const TGroupValidators extends FormGroupValidators<TGroupValue>,
->(
-  props: VueFormGroupProps<
-    TFormData,
-    TGroupName,
-    TGroupValue,
-    TGroupValidators,
-    TFormErrorTypes,
-    TFieldComponents
-  > &
-    PublicProps,
-) => VueComponentInstance<
-  VueFormGroupProps<
-    TFormData,
-    TGroupName,
-    TGroupValue,
-    TGroupValidators,
-    TFormErrorTypes,
-    TFieldComponents
-  >,
-  {
-    default: {
-      group: VueFormGroupApi<
-        TFormData,
-        TGroupName,
-        TGroupValue,
-        ToFormGroupErrorTypes<NoInfer<TGroupValidators>>,
-        TFormErrorTypes,
-        TFieldComponents
-      >
-    }
-  }
->
-
-export interface VueTanStackFormComponents<
-  in out TFormData,
-  in out TFormErrorTypes extends FormErrorTypes,
-  in out TFieldComponents extends Record<string, Component> = Record<
-    never,
-    never
-  >,
-> {
-  Field: VueFormFieldComponent<TFormData, TFormErrorTypes, TFieldComponents>
-  ArrayField: VueFormArrayFieldComponent<
-    TFormData,
-    TFormErrorTypes,
-    TFieldComponents
-  >
-  Subscribe: VueFormSubscribeComponent<TFormData, TFormErrorTypes>
-  FormGroup: VueFormGroupComponent<TFormData, TFormErrorTypes, TFieldComponents>
-}

package/src/VueForm/VueFormApi.lib.ts

@@ -1,35 +0,0 @@
-import { InternalFormApi } from '@tanstack/form-core/internals'
-import { onMounted, onUnmounted, useId, watchEffect } from 'vue'
-import { attachVueFormComponents } from './Components.lib'
-import type { AnyInternalFormApi } from '@tanstack/form-core/internals'
-import type { FormOptions } from '@tanstack/form-core'
-import type { VueTanStackFormComponents } from './Components.public'
-
-export interface InternalVueFormApi
-  extends AnyInternalFormApi, VueTanStackFormComponents<any, any, any> {}
-
-export function initializeForm(
-  options: FormOptions<any, any, any>,
-): InternalVueFormApi {
-  return attachVueFormComponents(new InternalFormApi(options), null)
-}
-
-export function useInternalForm(
-  options: FormOptions<any, any, any>,
-  initializeFn: (options: FormOptions<any, any, any>) => InternalVueFormApi,
-) {
-  const vueFormId = useId()
-  const resolveOptions = () =>
-    options.formId === undefined ? { ...options, formId: vueFormId } : options
-  const form = initializeFn(resolveOptions())
-
-  watchEffect(() => form._update(resolveOptions()))
-
-  let unmount: (() => void) | undefined
-  onMounted(() => {
-    unmount = form.mount()
-  })
-  onUnmounted(() => unmount?.())
-
-  return form
-}

package/src/VueForm/fieldSubscriptions.lib.ts

@@ -1,47 +0,0 @@
-import { shallow } from '@tanstack/vue-store'
-import { shallowRef, toRaw, watch } from 'vue'
-import type { ShallowRef } from 'vue'
-import type {
-  AnyInternalFieldApi,
-  InternalBaseFieldMeta,
-} from '@tanstack/form-core/internals'
-
-function createFieldSelection<TSelected>(
-  fieldApi: ShallowRef<AnyInternalFieldApi>,
-  selector: (field: AnyInternalFieldApi) => TSelected,
-) {
-  const selected = shallowRef(selector(fieldApi.value)) as ShallowRef<TSelected>
-
-  watch(
-    fieldApi,
-    (field, _previous, onCleanup) => {
-      selected.value = selector(field)
-      const subscription = field.atom.subscribe(() => {
-        const next = selector(field)
-        if (!shallow(toRaw(selected.value), next)) selected.value = next
-      })
-      onCleanup(() => subscription.unsubscribe())
-    },
-    { immediate: true, flush: 'sync' },
-  )
-
-  return selected
-}
-
-export function createValueFieldSubscription(
-  fieldApi: ShallowRef<AnyInternalFieldApi>,
-) {
-  return createFieldSelection(fieldApi, (field) => ({
-    value: field.value,
-    meta: field.meta,
-  }))
-}
-
-export function createArrayFieldSubscription(
-  fieldApi: ShallowRef<AnyInternalFieldApi>,
-) {
-  return createFieldSelection(fieldApi, (field) => ({
-    length: field.value.length,
-    version: (field.meta as InternalBaseFieldMeta)._arrayVersion,
-  }))
-}

package/src/VueForm/formApiTypes.public.ts

@@ -1,32 +0,0 @@
-import type { AnyFormApi, FormApi, FormErrorTypes } from '@tanstack/form-core'
-import type { Component } from 'vue'
-import type { VueTanStackFormComponents } from './Components.public'
-import type {
-  AnyVueFormComponentMap,
-  DefaultVueFormComponentMap,
-} from '../AppForm/componentMap.public'
-
-type ExtendedFormApi<
-  TFormData,
-  TFormErrorTypes extends FormErrorTypes,
-  TFieldComponents extends Record<string, Component>,
-> = FormApi<TFormData, TFormErrorTypes> &
-  VueTanStackFormComponents<TFormData, TFormErrorTypes, TFieldComponents>
-
-export type VueFormApi<
-  TFormData,
-  TFormErrorTypes extends FormErrorTypes,
-  TComponents extends AnyVueFormComponentMap = DefaultVueFormComponentMap,
-> = unknown extends TComponents['formComponents']
-  ? ExtendedFormApi<TFormData, TFormErrorTypes, TComponents['fieldComponents']>
-  : ExtendedFormApi<
-      TFormData,
-      TFormErrorTypes,
-      TComponents['fieldComponents']
-    > &
-      TComponents['formComponents']
-
-export type AnyVueFormApi = AnyFormApi &
-  VueTanStackFormComponents<any, any, any>
-
-export type { VueFormComponentMap } from '../AppForm/componentMap.public'

package/src/VueForm/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 {
-  AnyVueFormComponentMap,
-  DefaultVueFormComponentMap,
-} from '../AppForm/componentMap.public'
-import type { VueFormApi } from './formApiTypes.public'
-
-type VueFormTypeErrorTypes<
-  TFormValidators extends FormValidators<any>,
-  TSubmitReturn,
-> = unknown extends TSubmitReturn
-  ? any
-  : ToFormErrorTypes<TFormValidators, TSubmitReturn>
-
-export type VueFormType<
-  TOptions extends
-    AnyFormOptions | AppFormOptions<any, any, any, AnyVueFormComponentMap>,
-> =
-  TOptions extends AppFormOptions<
-    infer TFormData,
-    infer TFormValidators,
-    infer TSubmitReturn,
-    infer TComponents
-  >
-    ? VueFormApi<
-        TFormData,
-        VueFormTypeErrorTypes<TFormValidators, TSubmitReturn>,
-        TComponents
-      >
-    : TOptions extends FormOptions<
-          infer TFormData,
-          infer TFormValidators,
-          infer TSubmitReturn
-        >
-      ? VueFormApi<
-          TFormData,
-          VueFormTypeErrorTypes<TFormValidators, TSubmitReturn>,
-          DefaultVueFormComponentMap
-        >
-      : never

package/src/VueForm/useField.lib.ts

@@ -1,64 +0,0 @@
-import { useSelector } from '@tanstack/vue-store'
-import { onMounted, onUnmounted, shallowRef, watch, watchEffect } from 'vue'
-import type { Component, ShallowRef } from 'vue'
-import type {
-  AnyInternalFieldApi,
-  AnyInternalFormApi,
-} from '@tanstack/form-core/internals'
-
-export interface InternalFieldProps {
-  form: AnyInternalFormApi
-  name: string
-  [key: string]: unknown
-}
-
-export function useField(
-  options: () => InternalFieldProps,
-  fieldComponents: Record<string, Component> | null,
-): ShallowRef<AnyInternalFieldApi> {
-  const initialOptions = options()
-  const resetVersion = useSelector(initialOptions.form._atoms.resetVersion)
-
-  const createField = () => {
-    const current = options()
-    const field = current.form._getOrCreateFieldApi({
-      ...current,
-      name: current.name,
-    } as never)
-    if (fieldComponents !== null) Object.assign(field, fieldComponents)
-    return field
-  }
-
-  const fieldApi = shallowRef(createField())
-
-  watch(
-    [() => options().form, () => options().name, resetVersion],
-    () => {
-      fieldApi.value = createField()
-    },
-    { flush: 'sync' },
-  )
-
-  watchEffect(() => {
-    fieldApi.value._update(options() as never)
-  })
-
-  let mounted = false
-  let unregister: (() => void) | undefined
-  watch(
-    fieldApi,
-    (field) => {
-      if (!mounted) return
-      unregister?.()
-      unregister = field._register()
-    },
-    { flush: 'sync' },
-  )
-  onMounted(() => {
-    mounted = true
-    unregister = fieldApi.value._register()
-  })
-  onUnmounted(() => unregister?.())
-
-  return fieldApi
-}

package/src/VueForm/useForm.public.ts

@@ -1,30 +0,0 @@
-import { initializeForm, useInternalForm } from './VueFormApi.lib'
-import type {
-  FormOptions,
-  FormValidators,
-  ToFormErrorTypes,
-} from '@tanstack/form-core'
-import type {
-  AnyVueFormComponentMap,
-  DefaultVueFormComponentMap,
-} from '../AppForm/componentMap.public'
-import type { VueFormApi } from './formApiTypes.public'
-
-export type UseFormHook<in out TComponents extends AnyVueFormComponentMap> = <
-  TFormData,
-  const TFormValidators extends FormValidators<TFormData>,
-  TSubmitReturn,
->(
-  options: FormOptions<TFormData, TFormValidators, TSubmitReturn>,
-) => VueFormApi<
-  TFormData,
-  ToFormErrorTypes<TFormValidators, TSubmitReturn>,
-  TComponents
->
-
-function useFormHook(options: FormOptions<any, any, any>) {
-  return useInternalForm(options, initializeForm)
-}
-
-export const useForm =
-  useFormHook as never as UseFormHook<DefaultVueFormComponentMap>