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

package/src/VueForm/Components.lib.ts

@@ -1,182 +0,0 @@
-import { shallow, useSelector } from '@tanstack/vue-store'
-import { InternalFormGroupApi } from '@tanstack/form-core/internals'
-import {
-  defineComponent,
-  h,
-  onMounted,
-  onUnmounted,
-  provide,
-  watchEffect,
-} from 'vue'
-import { Subscribe } from '../Subscribe.public'
-import {
-  createArrayFieldSubscription,
-  createValueFieldSubscription,
-} from './fieldSubscriptions.lib'
-import { useField } from './useField.lib'
-import type { Component, InjectionKey, Slots } from 'vue'
-import type {
-  AnyFieldApiOptions,
-  AnyInternalFieldApi,
-  AnyInternalFormApi,
-  InternalFormGroupApi as InternalFormGroupApiType,
-} from '@tanstack/form-core/internals'
-import type { InternalVueFormApi } from './VueFormApi.lib'
-
-export function attachVueFormComponents(
-  form: AnyInternalFormApi,
-  fieldComponents: Record<string, Component> | null,
-  fieldContext?: InjectionKey<AnyInternalFieldApi>,
-): InternalVueFormApi {
-  const resultForm = form as InternalVueFormApi
-  resultForm.Field = createFieldComponent(
-    form,
-    fieldComponents,
-    false,
-    fieldContext,
-  ) as never
-  resultForm.ArrayField = createFieldComponent(
-    form,
-    fieldComponents,
-    true,
-    fieldContext,
-  ) as never
-  resultForm.Subscribe = createSubscribeComponent(form) as never
-  resultForm.FormGroup = createFormGroupComponent(resultForm) as never
-  return resultForm
-}
-
-function createFieldComponent(
-  form: AnyInternalFormApi,
-  fieldComponents: Record<string, Component> | null,
-  array: boolean,
-  fieldContext?: InjectionKey<AnyInternalFieldApi>,
-) {
-  return defineComponent(
-    (_props, context) => {
-      const options = () => ({ ...context.attrs, form }) as never
-      const fieldApi = useField(options, fieldComponents)
-      const selection = array
-        ? createArrayFieldSubscription(fieldApi)
-        : createValueFieldSubscription(fieldApi)
-
-      if (fieldContext) {
-        // Field APIs are stable for a mounted name. Supplying the current API
-        // mirrors Vue v1 composition components while the parent subscription
-        // handles state-driven renders.
-        provide(fieldContext, fieldApi.value)
-      }
-
-      return () => {
-        void selection.value
-        return context.slots.default?.({ field: fieldApi.value })
-      }
-    },
-    {
-      name: array ? 'TanStackForm.ArrayField' : 'TanStackForm.Field',
-      inheritAttrs: false,
-    },
-  )
-}
-
-function createSubscribeComponent(form: AnyInternalFormApi) {
-  return defineComponent(
-    (_props, context) => () =>
-      h(
-        Subscribe as never,
-        { ...context.attrs, source: form.atom } as never,
-        context.slots,
-      ),
-    {
-      name: 'TanStackForm.Subscribe',
-      inheritAttrs: false,
-    },
-  )
-}
-
-function createFormGroupComponent(form: InternalVueFormApi) {
-  return defineComponent(
-    (_props, context) => {
-      const options = () => ({ ...context.attrs, form })
-      const group = attachVueFormGroupComponents(
-        new InternalFormGroupApi(options() as never),
-        form,
-      )
-
-      watchEffect(() => group.update(options() as never))
-
-      let mounted = false
-      onMounted(() => {
-        mounted = true
-        group.mount()
-      })
-      onUnmounted(() => {
-        if (mounted) group._cleanup()
-      })
-
-      const state = useSelector(group.atom, (value) => value, {
-        compare: shallow,
-      })
-
-      return () => {
-        void state.value
-        return context.slots.default?.({ group })
-      }
-    },
-    {
-      name: 'TanStackForm.FormGroup',
-      inheritAttrs: false,
-    },
-  )
-}
-
-function forwardToField(
-  component: Component,
-  group: InternalFormGroupApiType<any, any, any, any, any>,
-) {
-  return defineComponent(
-    (_props, context) => () => {
-      const options = { ...context.attrs } as unknown as AnyFieldApiOptions
-      return h(
-        component,
-        group._getFormFieldOptions(options, (base, overrides) => ({
-          ...base,
-          ...overrides,
-        })) as never,
-        context.slots,
-      )
-    },
-    { inheritAttrs: false },
-  )
-}
-
-function attachVueFormGroupComponents(
-  group: InternalFormGroupApiType<any, any, any, any, any>,
-  form: InternalVueFormApi,
-) {
-  type GroupWithComponents = InternalFormGroupApiType<
-    any,
-    any,
-    any,
-    any,
-    any
-  > & {
-    Field: Component
-    ArrayField: Component
-    Subscribe: Component
-  }
-
-  const resultGroup = group as GroupWithComponents
-  resultGroup.Field = forwardToField(form.Field as never, group)
-  resultGroup.ArrayField = forwardToField(form.ArrayField as never, group)
-  resultGroup.Subscribe = defineComponent(
-    (_props, context) => () =>
-      h(
-        Subscribe as never,
-        { ...context.attrs, source: group.atom } as never,
-        context.slots as Slots,
-      ),
-    { name: 'TanStackForm.FormGroup.Subscribe', inheritAttrs: false },
-  )
-  return resultGroup
-}

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