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

package/dist/VueForm/formApiTypes.public.d.ts

@@ -5,6 +5,32 @@ import { Component } from "vue";
 //#region src/VueForm/formApiTypes.public.d.ts
 type ExtendedFormApi<TFormData, TFormErrorTypes extends FormErrorTypes, TFieldComponents extends Record<string, Component>> = FormApi<TFormData, TFormErrorTypes> & VueTanStackFormComponents<TFormData, TFormErrorTypes, TFieldComponents>;
 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'];
+/**
+ * A Vue form API whose form data and error types are erased.
+ *
+ * Use it for reusable Vue components that only need core form operations and
+ * the `Field`, `ArrayField`, `Subscribe`, or `FormGroup` components common to
+ * every Vue form. Field paths and values are not checked against a particular
+ * form shape; use `VueFormType` when a component depends on one known form.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * defineProps<{ form: AnyVueFormApi }>()
+ * </script>
+ *
+ * <template>
+ *   <form.Subscribe
+ *     :selector="(state) => state.isSubmitting"
+ *     v-slot="isSubmitting"
+ *   >
+ *     <button type="submit" :disabled="isSubmitting">
+ *       {{ isSubmitting ? 'Saving...' : 'Save' }}
+ *     </button>
+ *   </form.Subscribe>
+ * </template>
+ * ```
+ */
 type AnyVueFormApi = AnyFormApi & VueTanStackFormComponents<any, any, any>;
 //#endregion
 export { AnyVueFormApi, VueFormApi, type VueFormComponentMap };

package/dist/VueForm/formType.public.d.ts

@@ -4,6 +4,29 @@ import { AppFormOptions } from "../AppForm/appFormOptions.public.js";
 import { AnyFormOptions, FormOptions, FormValidators, ToFormErrorTypes } from "@tanstack/form-core";
 //#region src/VueForm/formType.public.d.ts
 type VueFormTypeErrorTypes<TFormValidators extends FormValidators<any>, TSubmitReturn> = unknown extends TSubmitReturn ? any : ToFormErrorTypes<TFormValidators, TSubmitReturn>;
+/**
+ * Derives the Vue form API type represented by a reusable options object.
+ *
+ * Use it to type props for components that belong to one known form shape. It
+ * preserves the inferred form data and any components registered through
+ * `appFormOptions`. Options such as `onSubmit` can be defined either in the
+ * shared options or when the form is created in the component.
+ *
+ * @example
+ * ```ts
+ * const profileOptions = formOptions({
+ *   defaultValues: { name: '' },
+ * })
+ *
+ * type ProfileForm = VueFormType<typeof profileOptions>
+ *
+ * const props = defineProps<{
+ *   form: ProfileForm
+ * }>()
+ * ```
+ *
+ * @typeParam TOptions - The reusable form or app-form options from which the API derives its form data, error, and registered-component types.
+ */
 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;
 //#endregion
 export { VueFormType };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-form",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.1",
   "description": "Powerful, type-safe forms for Vue.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -22,12 +22,11 @@
   },
   "sideEffects": false,
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "dependencies": {
     "@tanstack/vue-store": "^0.11.1",
-    "@tanstack/form-core": "2.0.0-alpha.0"
+    "@tanstack/form-core": "2.0.0-alpha.1"
   },
   "devDependencies": {
     "@testing-library/vue": "^8.1.0",

package/src/AppForm/Components.lib.ts

@@ -1,31 +0,0 @@
-import { defineComponent, provide } from 'vue'
-import { attachVueFormComponents } from '../VueForm/Components.lib'
-import { FieldContext, FormContext } from './contexts.lib'
-import type { Component } from 'vue'
-import type { AnyInternalFormApi } from '@tanstack/form-core/internals'
-import type { AnyVueFormComponentMap } from './componentMap.public'
-import type { VueAppFormApi } from './VueAppFormApi.public'
-
-type AnyVueAppFormApi = VueAppFormApi<any, any, AnyVueFormComponentMap>
-
-export function attachVueAppFormComponents(
-  form: AnyInternalFormApi,
-  formComponents: Record<string, Component>,
-  fieldComponents: Record<string, Component>,
-): AnyVueAppFormApi {
-  const resultForm = attachVueFormComponents(
-    form,
-    fieldComponents,
-    FieldContext,
-  ) as never as AnyVueAppFormApi
-
-  resultForm.AppForm = defineComponent(
-    (_props, { slots }) => {
-      provide(FormContext, resultForm as never)
-      return () => slots.default?.()
-    },
-    { name: 'TanStackForm.AppForm' },
-  ) as never
-
-  return Object.assign(resultForm, formComponents)
-}

package/src/AppForm/VueAppFormApi.public.ts

@@ -1,17 +0,0 @@
-import type { FormErrorTypes } from '@tanstack/form-core'
-import type { PublicProps } from 'vue'
-import type { VueComponentInstance } from '../vueTypes.lib'
-import type { VueFormApi } from '../VueForm/formApiTypes.public'
-import type { AnyVueFormComponentMap } from './componentMap.public'
-
-export type AppFormComponent = new (
-  props: PublicProps,
-) => VueComponentInstance<{}, { default: {} }>
-
-export type VueAppFormApi<
-  TFormData,
-  TFormErrorTypes extends FormErrorTypes,
-  TComponents extends AnyVueFormComponentMap,
-> = VueFormApi<TFormData, TFormErrorTypes, TComponents> & {
-  AppForm: AppFormComponent
-}

package/src/AppForm/appFormOptions.public.ts

@@ -1,55 +0,0 @@
-import type {
-  FormOptions,
-  FormValidatorData,
-  FormValidators,
-  InferUnion,
-  NullableSchemaData,
-} from '@tanstack/form-core'
-import type { AnyVueFormComponentMap } from './componentMap.public'
-
-declare const componentsSymbol: unique symbol
-
-export interface AppFormOptions<
-  TFormData,
-  TFormValidators extends FormValidators<TFormData>,
-  TSubmitReturn,
-  TComponents extends AnyVueFormComponentMap,
-> extends FormOptions<TFormData, TFormValidators, TSubmitReturn> {
-  [componentsSymbol]: TComponents
-}
-
-export interface AppFormOptionsApi<TComponents extends AnyVueFormComponentMap> {
-  <
-    TFormData,
-    const TFormValidators extends FormValidators<TFormData>,
-    TSubmitReturn,
-  >(
-    options: FormOptions<TFormData, TFormValidators, TSubmitReturn>,
-  ): AppFormOptions<TFormData, TFormValidators, TSubmitReturn, TComponents>
-
-  strictSchema: <
-    const TFormValidators extends FormValidators<any>,
-    TFormData extends FormValidatorData<TFormValidators>,
-    TSubmitReturn,
-  >(
-    options: FormOptions<TFormData, TFormValidators, TSubmitReturn>,
-  ) => AppFormOptions<
-    FormValidatorData<TFormValidators>,
-    TFormValidators,
-    TSubmitReturn,
-    TComponents
-  >
-
-  looseSchema: <
-    const TFormValidators extends FormValidators<any>,
-    const TFormData extends NullableSchemaData<TFormValidators>,
-    TSubmitReturn,
-  >(
-    options: FormOptions<TFormData, TFormValidators, TSubmitReturn>,
-  ) => AppFormOptions<
-    InferUnion<TFormData, FormValidatorData<TFormValidators>>,
-    TFormValidators,
-    TSubmitReturn,
-    TComponents
-  >
-}

package/src/AppForm/componentMap.public.ts

@@ -1,19 +0,0 @@
-import type { Component } from 'vue'
-
-export interface VueFormComponentMap<
-  TFormComponents extends Record<string, Component>,
-  TFieldComponents extends Record<string, Component>,
-> {
-  formComponents: TFormComponents
-  fieldComponents: TFieldComponents
-}
-
-export type AnyVueFormComponentMap = VueFormComponentMap<
-  Record<string, Component>,
-  Record<string, Component>
->
-
-export type DefaultVueFormComponentMap = VueFormComponentMap<
-  Record<never, never>,
-  Record<never, never>
->

package/src/AppForm/contexts.lib.ts

@@ -1,31 +0,0 @@
-import { inject } from 'vue'
-import type { InjectionKey } from 'vue'
-import type { AnyInternalFieldApi } from '@tanstack/form-core/internals'
-import type { InternalVueFormApi } from '../VueForm/VueFormApi.lib'
-
-export const FormContext = Symbol(
-  'TanStackForm.FormContext',
-) as InjectionKey<InternalVueFormApi>
-export const FieldContext = Symbol(
-  'TanStackForm.FieldContext',
-) as InjectionKey<AnyInternalFieldApi>
-
-export function useFieldContext(): AnyInternalFieldApi {
-  const field = inject(FieldContext)
-  if (field === undefined) {
-    throw new Error(
-      'TanStack Form: Field components must be used within a `form.Field` component.',
-    )
-  }
-  return field
-}
-
-export function useFormContext(): InternalVueFormApi {
-  const form = inject(FormContext)
-  if (form === undefined) {
-    throw new Error(
-      'TanStack Form: Form components must be used within a `form.AppForm` component.',
-    )
-  }
-  return form
-}

package/src/AppForm/createFormHook.public.ts

@@ -1,32 +0,0 @@
-import { useInternalForm } from '../VueForm/VueFormApi.lib'
-import { defineFieldGroup } from '../FieldGroup/withFields.public'
-import { createAppFormInitializer } from './initializeAppForm.lib'
-import { useFormContext } from './contexts.lib'
-import type { AppFormOptionsApi } from './appFormOptions.public'
-import type { AnyVueFormComponentMap } from './componentMap.public'
-import type {
-  AppFormHookResult,
-  UseAppFormHook,
-} from './createFormHookTypes.public'
-import type { FormOptions } from '@tanstack/form-core'
-
-const appFormOptions = ((opts: unknown) => opts) as AppFormOptionsApi<any>
-appFormOptions.strictSchema = (opts) => opts as never
-appFormOptions.looseSchema = (opts) => opts as never
-
-export function createFormHook<
-  const TComponents extends AnyVueFormComponentMap,
->(createOptions: TComponents): AppFormHookResult<TComponents> {
-  const initializeAppForm = createAppFormInitializer(createOptions)
-
-  function useExtendedForm(options: FormOptions<any, any, any>) {
-    return useInternalForm(options, initializeAppForm)
-  }
-
-  return {
-    useFormContext: useFormContext as never,
-    appFormOptions,
-    defineAppFieldGroup: defineFieldGroup,
-    useAppForm: useExtendedForm as never as UseAppFormHook<TComponents>,
-  }
-}

package/src/AppForm/createFormHookTypes.public.ts

@@ -1,28 +0,0 @@
-import type { AppFormOptionsApi } from './appFormOptions.public'
-import type { AnyVueFormComponentMap } from './componentMap.public'
-import type { VueAppFormApi } from './VueAppFormApi.public'
-import type { DefineFieldGroupFn } from '../FieldGroup/withFields.public'
-import type {
-  FormOptions,
-  FormValidators,
-  ToFormErrorTypes,
-} from '@tanstack/form-core'
-
-export type UseAppFormHook<TComponents extends AnyVueFormComponentMap> = <
-  TFormData,
-  const TFormValidators extends FormValidators<TFormData>,
-  TSubmitReturn,
->(
-  options: FormOptions<TFormData, TFormValidators, TSubmitReturn>,
-) => VueAppFormApi<
-  TFormData,
-  ToFormErrorTypes<TFormValidators, TSubmitReturn>,
-  TComponents
->
-
-export interface AppFormHookResult<TComponents extends AnyVueFormComponentMap> {
-  appFormOptions: AppFormOptionsApi<TComponents>
-  defineAppFieldGroup: DefineFieldGroupFn<TComponents['fieldComponents']>
-  useAppForm: UseAppFormHook<TComponents>
-  useFormContext: () => VueAppFormApi<any, any, TComponents>
-}

package/src/AppForm/fieldComponentHelpers.lib.ts

@@ -1,21 +0,0 @@
-import { defineComponent, h } from 'vue'
-import { useFieldContext } from './contexts.lib'
-import type { Component } from 'vue'
-
-export function wrapField(
-  component: Component,
-  fieldPropKey: string,
-): Component {
-  return defineComponent(
-    (_props, context) => {
-      const field = useFieldContext()
-      return () =>
-        h(component, { ...context.attrs, [fieldPropKey]: field }, context.slots)
-    },
-    { name: 'TanStackForm.FieldComponent', inheritAttrs: false },
-  )
-}
-
-export function brandComponentFactory(): (component: Component) => Component {
-  return (component) => component
-}

package/src/AppForm/getFormHookHelpers.public.ts

@@ -1,109 +0,0 @@
-import { brandComponentFactory, wrapField } from './fieldComponentHelpers.lib'
-import type { FieldWithValue } from '@tanstack/form-core'
-import type { Component, PublicProps } from 'vue'
-import type { VueComponentInstance } from '../vueTypes.lib'
-
-type ExactFieldBrand<out TValue> = {
-  readonly __tanstackFieldExactType: TValue
-}
-
-type AcceptsFieldBrand<out TAcceptedValue> = {
-  readonly __tanstackFieldAcceptsType: TAcceptedValue
-}
-
-type AnyFieldComponent = Component
-type PropsOf<TComponent> = TComponent extends new (...args: any[]) => {
-  $props: infer TProps
-}
-  ? Omit<TProps, keyof PublicProps>
-  : never
-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 FieldValueFromComponentProp<
-  TProps,
-  TFieldPropKey extends keyof TProps,
-> = FieldValueFromProp<TProps[TFieldPropKey]>
-type PublicPropsReplacingField<
-  TProps,
-  TFieldPropKey extends keyof TProps,
-> = Omit<TProps, TFieldPropKey>
-
-type StrictInjectedFieldComponent<
-  TComponent extends AnyFieldComponent,
-  TProps = PropsOf<TComponent>,
-  TFieldPropKey extends FieldValuePropKeys<TProps> = FieldValuePropKeys<TProps>,
-> = (new (
-  props: PublicPropsReplacingField<TProps, TFieldPropKey> & PublicProps,
-) => VueComponentInstance<
-  PublicPropsReplacingField<TProps, TFieldPropKey> & Record<string, any>,
-  {}
->) &
-  ExactFieldBrand<FieldValueFromComponentProp<TProps, TFieldPropKey>>
-
-type LooseInjectedFieldComponent<
-  TComponent extends AnyFieldComponent,
-  TProps = PropsOf<TComponent>,
-  TFieldPropKey extends FieldValuePropKeys<TProps> = FieldValuePropKeys<TProps>,
-> = (new (
-  props: PublicPropsReplacingField<TProps, TFieldPropKey> & PublicProps,
-) => VueComponentInstance<
-  PublicPropsReplacingField<TProps, TFieldPropKey> & Record<string, any>,
-  {}
->) &
-  AcceptsFieldBrand<FieldValueFromComponentProp<TProps, TFieldPropKey>>
-
-type StrictBrandedFieldComponent<TComponent, TValue> = TComponent &
-  ExactFieldBrand<TValue>
-type LooseBrandedFieldComponent<TComponent, TValue> = TComponent &
-  AcceptsFieldBrand<TValue>
-
-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,
-  ) => StrictBrandedFieldComponent<TComponent, TValue>
-  loose: <TValue>() => <TComponent extends AnyFieldComponent>(
-    component: TComponent,
-  ) => LooseBrandedFieldComponent<TComponent, TValue>
-}
-
-export interface FormHookHelpers {
-  fieldBrand: FieldBrandHelper
-  fieldComponent: FieldComponentHelper
-}
-
-export function getFormHookHelpers(): FormHookHelpers {
-  return {
-    fieldComponent: {
-      loose: wrapField as FieldComponentHelper['loose'],
-      strict: wrapField as FieldComponentHelper['strict'],
-    },
-    fieldBrand: {
-      loose: brandComponentFactory as FieldBrandHelper['loose'],
-      strict: brandComponentFactory as FieldBrandHelper['strict'],
-    },
-  }
-}

package/src/AppForm/initializeAppForm.lib.ts

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

package/src/FieldGroup/FieldGroupApi.public.ts

@@ -1,148 +0,0 @@
-import type {
-  DeepKeys,
-  DeepKeysWhereValueIncludes,
-  DeepValue,
-  FieldValidators,
-  FormApiArrayMethods,
-  FormApiFieldMethods,
-  FormErrorTypes,
-  FormState,
-  ToFieldError,
-  ValidationIssue,
-} from '@tanstack/form-core'
-import type { Component, PublicProps } from 'vue'
-import type { ReadonlyAtom } from '@tanstack/vue-store'
-import type {
-  VueFieldApi,
-  VueFormFieldProps,
-  VueFormSubscribeProps,
-} from '../VueForm/Components.public'
-import type { VueComponentInstance } from '../vueTypes.lib'
-
-export type FieldGroupFieldComponent<
-  in out TFieldData,
-  in out TFieldComponents extends Record<string, Component>,
-> = new <const TFieldName extends DeepKeys<TFieldData>>(
-  props: VueFormFieldProps<
-    TFieldData,
-    TFieldName,
-    DeepValue<TFieldData, TFieldName>,
-    FieldValidators<TFieldData, TFieldName, DeepValue<TFieldData, TFieldName>>,
-    ValidationIssue,
-    unknown,
-    FormErrorTypes,
-    TFieldComponents
-  > &
-    PublicProps,
-) => VueComponentInstance<
-  VueFormFieldProps<
-    TFieldData,
-    TFieldName,
-    DeepValue<TFieldData, TFieldName>,
-    FieldValidators<TFieldData, TFieldName, DeepValue<TFieldData, TFieldName>>,
-    ValidationIssue,
-    unknown,
-    FormErrorTypes,
-    TFieldComponents
-  >,
-  {
-    default: {
-      field: VueFieldApi<
-        TFieldName,
-        DeepValue<TFieldData, TFieldName>,
-        ToFieldError<
-          FieldValidators<
-            TFieldData,
-            TFieldName,
-            DeepValue<TFieldData, TFieldName>
-          >,
-          ValidationIssue,
-          FormErrorTypes
-        >,
-        unknown,
-        FormErrorTypes,
-        TFieldComponents
-      >
-    }
-  }
->
-
-export type FieldGroupArrayFieldComponent<
-  in out TFieldData,
-  in out TFieldComponents extends Record<string, Component>,
-> = new <
-  const TFieldName extends DeepKeysWhereValueIncludes<TFieldData, Array<any>>,
->(
-  props: VueFormFieldProps<
-    TFieldData,
-    TFieldName,
-    DeepValue<TFieldData, TFieldName>,
-    FieldValidators<TFieldData, TFieldName, DeepValue<TFieldData, TFieldName>>,
-    ValidationIssue,
-    unknown,
-    FormErrorTypes,
-    TFieldComponents
-  > &
-    PublicProps,
-) => VueComponentInstance<
-  VueFormFieldProps<
-    TFieldData,
-    TFieldName,
-    DeepValue<TFieldData, TFieldName>,
-    FieldValidators<TFieldData, TFieldName, DeepValue<TFieldData, TFieldName>>,
-    ValidationIssue,
-    unknown,
-    FormErrorTypes,
-    TFieldComponents
-  >,
-  {
-    default: {
-      field: VueFieldApi<
-        TFieldName,
-        DeepValue<TFieldData, TFieldName>,
-        ToFieldError<
-          FieldValidators<
-            TFieldData,
-            TFieldName,
-            DeepValue<TFieldData, TFieldName>
-          >,
-          ValidationIssue,
-          FormErrorTypes
-        >,
-        unknown,
-        FormErrorTypes,
-        TFieldComponents
-      >
-    }
-  }
->
-
-export type FieldGroupSubscribeProps<TSelected> = VueFormSubscribeProps<
-  unknown,
-  FormErrorTypes,
-  TSelected
->
-
-export type FieldGroupSubscribeComponent = new <TSelected>(
-  props: FieldGroupSubscribeProps<TSelected> & PublicProps,
-) => VueComponentInstance<
-  FieldGroupSubscribeProps<TSelected>,
-  { default: NoInfer<TSelected> }
->
-
-export interface FieldGroupApi<
-  in out TFieldData,
-  in out TFieldComponents extends Record<string, Component> = 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>>
-export type FieldGroupFormState = FormState<unknown, FormErrorTypes>