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

package/src/VueForm/Components.public.ts

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

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

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

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

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

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

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