@tanstack/vue-form 0.3.4 → 0.3.6

package/build/modern/useForm.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, type FormState, type FormOptions } from '@tanstack/form-core'\nimport { type NoInfer, useStore } from '@tanstack/vue-store'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { provideFormContext } from './formContext'\nimport {\n  type EmitsOptions,\n  type SlotsType,\n  type SetupContext,\n  defineComponent,\n} from 'vue-demi'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData, TFormData>\n    useField: UseField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(\n      props: {\n        selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      },\n      context: SetupContext<\n        EmitsOptions,\n        SlotsType<{ default: NoInfer<FormState<TFormData>> }>\n      >,\n    ) => any\n  }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const formApi = (() => {\n    const api = new FormApi<TData>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        provideFormContext({ formApi })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\n      provideFormContext({ formApi })\n    }\n    api.Field = Field as never\n    api.useField = useField as never\n    api.useStore = (selector) => {\n      return useStore(api.store as never, selector as never) as never\n    }\n    api.Subscribe = defineComponent(\n      (props, context) => {\n        const allProps = { ...props, ...context.attrs }\n        const selector = allProps.selector ?? ((state) => state)\n        const data = useStore(api.store as never, selector as never)\n        return () => context.slots.default!(data.value)\n      },\n      {\n        name: 'Subscribe',\n        inheritAttrs: false,\n      },\n    )\n\n    return api\n  })()\n\n  // formApi.useStore((state) => state.isSubmitting)\n  formApi.update(opts)\n\n  return formApi as never\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0D;AAC1D,uBAAuC;AACvC,sBAAoE;AACpE,yBAAmC;AACnC,sBAKO;AAwBA,SAAS,QAAe,MAA2C;AACxE,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,yBAAe,IAAI;AAEnC,QAAI,eAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,mDAAmB,EAAE,QAAQ,CAAC;AAC9B,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,iDAAmB,EAAE,QAAQ,CAAC;AAAA,IAChC;AACA,QAAI,QAAQ;AACZ,QAAI,WAAW;AACf,QAAI,WAAW,CAAC,aAAa;AAC3B,iBAAO,2BAAS,IAAI,OAAgB,QAAiB;AAAA,IACvD;AACA,QAAI,gBAAY;AAAA,MACd,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAU;AAClD,cAAM,WAAO,2BAAS,IAAI,OAAgB,QAAiB;AAC3D,eAAO,MAAM,QAAQ,MAAM,QAAS,KAAK,KAAK;AAAA,MAChD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAChB;AAAA,IACF;AAEA,WAAO;AAAA,EACT,GAAG;AAGH,UAAQ,OAAO,IAAI;AAEnB,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, type FormState, type FormOptions } from '@tanstack/form-core'\nimport { type NoInfer, useStore } from '@tanstack/vue-store'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { provideFormContext } from './formContext'\nimport {\n  type EmitsOptions,\n  type SlotsType,\n  type SetupContext,\n  defineComponent,\n} from 'vue-demi'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData>\n    useField: UseField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(\n      props: {\n        selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      },\n      context: SetupContext<\n        EmitsOptions,\n        SlotsType<{ default: NoInfer<FormState<TFormData>> }>\n      >,\n    ) => any\n  }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const formApi = (() => {\n    const api = new FormApi<TData>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        provideFormContext({ formApi })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\n      provideFormContext({ formApi })\n    }\n    api.Field = Field as never\n    api.useField = useField as never\n    api.useStore = (selector) => {\n      return useStore(api.store as never, selector as never) as never\n    }\n    api.Subscribe = defineComponent(\n      (props, context) => {\n        const allProps = { ...props, ...context.attrs }\n        const selector = allProps.selector ?? ((state) => state)\n        const data = useStore(api.store as never, selector as never)\n        return () => context.slots.default!(data.value)\n      },\n      {\n        name: 'Subscribe',\n        inheritAttrs: false,\n      },\n    )\n\n    return api\n  })()\n\n  // formApi.useStore((state) => state.isSubmitting)\n  formApi.update(opts)\n\n  return formApi as never\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0D;AAC1D,uBAAuC;AACvC,sBAAoE;AACpE,yBAAmC;AACnC,sBAKO;AAwBA,SAAS,QAAe,MAA2C;AACxE,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,yBAAe,IAAI;AAEnC,QAAI,eAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,mDAAmB,EAAE,QAAQ,CAAC;AAC9B,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,iDAAmB,EAAE,QAAQ,CAAC;AAAA,IAChC;AACA,QAAI,QAAQ;AACZ,QAAI,WAAW;AACf,QAAI,WAAW,CAAC,aAAa;AAC3B,iBAAO,2BAAS,IAAI,OAAgB,QAAiB;AAAA,IACvD;AACA,QAAI,gBAAY;AAAA,MACd,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAU;AAClD,cAAM,WAAO,2BAAS,IAAI,OAAgB,QAAiB;AAC3D,eAAO,MAAM,QAAQ,MAAM,QAAS,KAAK,KAAK;AAAA,MAChD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAChB;AAAA,IACF;AAEA,WAAO;AAAA,EACT,GAAG;AAGH,UAAQ,OAAO,IAAI;AAEnB,SAAO;AACT;","names":[]}

package/build/modern/useForm.d.cts

@@ -8,7 +8,7 @@ declare module '@tanstack/form-core' {
     interface FormApi<TFormData> {
         Provider: (props: Record<string, any> & {}) => any;
         provideFormContext: () => void;
-        Field: FieldComponent<TFormData, TFormData>;
+        Field: FieldComponent<TFormData>;
         useField: UseField<TFormData>;
         useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
         Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {

package/build/modern/useForm.d.ts

@@ -8,7 +8,7 @@ declare module '@tanstack/form-core' {
     interface FormApi<TFormData> {
         Provider: (props: Record<string, any> & {}) => any;
         provideFormContext: () => void;
-        Field: FieldComponent<TFormData, TFormData>;
+        Field: FieldComponent<TFormData>;
         useField: UseField<TFormData>;
         useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
         Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {

package/build/modern/useForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, type FormState, type FormOptions } from '@tanstack/form-core'\nimport { type NoInfer, useStore } from '@tanstack/vue-store'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { provideFormContext } from './formContext'\nimport {\n  type EmitsOptions,\n  type SlotsType,\n  type SetupContext,\n  defineComponent,\n} from 'vue-demi'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData, TFormData>\n    useField: UseField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(\n      props: {\n        selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      },\n      context: SetupContext<\n        EmitsOptions,\n        SlotsType<{ default: NoInfer<FormState<TFormData>> }>\n      >,\n    ) => any\n  }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const formApi = (() => {\n    const api = new FormApi<TData>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        provideFormContext({ formApi })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\n      provideFormContext({ formApi })\n    }\n    api.Field = Field as never\n    api.useField = useField as never\n    api.useStore = (selector) => {\n      return useStore(api.store as never, selector as never) as never\n    }\n    api.Subscribe = defineComponent(\n      (props, context) => {\n        const allProps = { ...props, ...context.attrs }\n        const selector = allProps.selector ?? ((state) => state)\n        const data = useStore(api.store as never, selector as never)\n        return () => context.slots.default!(data.value)\n      },\n      {\n        name: 'Subscribe',\n        inheritAttrs: false,\n      },\n    )\n\n    return api\n  })()\n\n  // formApi.useStore((state) => state.isSubmitting)\n  formApi.update(opts)\n\n  return formApi as never\n}\n"],"mappings":";AAAA,SAAS,eAAiD;AAC1D,SAAuB,gBAAgB;AACvC,SAA6C,OAAO,gBAAgB;AACpE,SAAS,0BAA0B;AACnC;AAAA,EAIE;AAAA,OACK;AAwBA,SAAS,QAAe,MAA2C;AACxE,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,QAAe,IAAI;AAEnC,QAAI,WAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,2BAAmB,EAAE,QAAQ,CAAC;AAC9B,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,yBAAmB,EAAE,QAAQ,CAAC;AAAA,IAChC;AACA,QAAI,QAAQ;AACZ,QAAI,WAAW;AACf,QAAI,WAAW,CAAC,aAAa;AAC3B,aAAO,SAAS,IAAI,OAAgB,QAAiB;AAAA,IACvD;AACA,QAAI,YAAY;AAAA,MACd,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAU;AAClD,cAAM,OAAO,SAAS,IAAI,OAAgB,QAAiB;AAC3D,eAAO,MAAM,QAAQ,MAAM,QAAS,KAAK,KAAK;AAAA,MAChD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAChB;AAAA,IACF;AAEA,WAAO;AAAA,EACT,GAAG;AAGH,UAAQ,OAAO,IAAI;AAEnB,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, type FormState, type FormOptions } from '@tanstack/form-core'\nimport { type NoInfer, useStore } from '@tanstack/vue-store'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { provideFormContext } from './formContext'\nimport {\n  type EmitsOptions,\n  type SlotsType,\n  type SetupContext,\n  defineComponent,\n} from 'vue-demi'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData>\n    useField: UseField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(\n      props: {\n        selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      },\n      context: SetupContext<\n        EmitsOptions,\n        SlotsType<{ default: NoInfer<FormState<TFormData>> }>\n      >,\n    ) => any\n  }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const formApi = (() => {\n    const api = new FormApi<TData>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        provideFormContext({ formApi })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\n      provideFormContext({ formApi })\n    }\n    api.Field = Field as never\n    api.useField = useField as never\n    api.useStore = (selector) => {\n      return useStore(api.store as never, selector as never) as never\n    }\n    api.Subscribe = defineComponent(\n      (props, context) => {\n        const allProps = { ...props, ...context.attrs }\n        const selector = allProps.selector ?? ((state) => state)\n        const data = useStore(api.store as never, selector as never)\n        return () => context.slots.default!(data.value)\n      },\n      {\n        name: 'Subscribe',\n        inheritAttrs: false,\n      },\n    )\n\n    return api\n  })()\n\n  // formApi.useStore((state) => state.isSubmitting)\n  formApi.update(opts)\n\n  return formApi as never\n}\n"],"mappings":";AAAA,SAAS,eAAiD;AAC1D,SAAuB,gBAAgB;AACvC,SAA6C,OAAO,gBAAgB;AACpE,SAAS,0BAA0B;AACnC;AAAA,EAIE;AAAA,OACK;AAwBA,SAAS,QAAe,MAA2C;AACxE,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,QAAe,IAAI;AAEnC,QAAI,WAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,2BAAmB,EAAE,QAAQ,CAAC;AAC9B,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,yBAAmB,EAAE,QAAQ,CAAC;AAAA,IAChC;AACA,QAAI,QAAQ;AACZ,QAAI,WAAW;AACf,QAAI,WAAW,CAAC,aAAa;AAC3B,aAAO,SAAS,IAAI,OAAgB,QAAiB;AAAA,IACvD;AACA,QAAI,YAAY;AAAA,MACd,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAU;AAClD,cAAM,OAAO,SAAS,IAAI,OAAgB,QAAiB;AAC3D,eAAO,MAAM,QAAQ,MAAM,QAAS,KAAK,KAAK;AAAA,MAChD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAChB;AAAA,IACF;AAEA,WAAO;AAAA,EACT,GAAG;AAGH,UAAQ,OAAO,IAAI;AAEnB,SAAO;AACT;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-form",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "Powerful, type-safe forms for Vue.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -45,7 +45,7 @@
     "@tanstack/store": "0.1.3",
     "@tanstack/vue-store": "0.1.3",
     "vue-demi": "^0.14.6",
-    "@tanstack/form-core": "0.3.4"
+    "@tanstack/form-core": "0.3.6"
   },
   "devDependencies": {
     "@vue/composition-api": "1.7.2",

package/src/createFormFactory.ts

@@ -6,7 +6,7 @@ import { useForm } from './useForm'
 export type FormFactory<TFormData> = {
   useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>
   useField: UseField<TFormData>
-  Field: FieldComponent<TFormData, TFormData>
+  Field: FieldComponent<TFormData>
 }
 
 export function createFormFactory<TFormData>(

package/src/tests/useField.test.tsx

@@ -30,7 +30,7 @@ describe('useField', () => {
 
       return () => (
         <form.Field name="firstName" defaultValue="FirstName">
-          {({ field }: { field: FieldApi<string, Person> }) => (
+          {({ field }: { field: FieldApi<Person, 'firstName'> }) => (
             <input
               data-testid={'fieldinput'}
               value={field.state.value}
@@ -68,7 +68,7 @@ describe('useField', () => {
           name="firstName"
           onChange={(value) => (value === 'other' ? error : undefined)}
         >
-          {({ field }: { field: FieldApi<string, Person> }) => (
+          {({ field }: { field: FieldApi<Person, 'firstName'> }) => (
             <div>
               <input
                 data-testid="fieldinput"
@@ -111,7 +111,7 @@ describe('useField', () => {
           name="firstName"
           onChange={(value) => (value === 'other' ? error : undefined)}
         >
-          {({ field }: { field: FieldApi<string, Person> }) => (
+          {({ field }: { field: FieldApi<Person, 'firstName'> }) => (
             <div>
               <input
                 data-testid="fieldinput"
@@ -159,7 +159,7 @@ describe('useField', () => {
             return error
           }}
         >
-          {({ field }: { field: FieldApi<string, Person> }) => (
+          {({ field }: { field: FieldApi<Person, 'firstName'> }) => (
             <div>
               <input
                 data-testid="fieldinput"
@@ -211,7 +211,7 @@ describe('useField', () => {
             return error
           }}
         >
-          {({ field }: { field: FieldApi<string, Person> }) => (
+          {({ field }: { field: FieldApi<Person, 'firstName'> }) => (
             <div>
               <input
                 data-testid="fieldinput"

package/src/tests/useForm.test.tsx

@@ -29,7 +29,7 @@ describe('useForm', () => {
 
       return () => (
         <form.Field name="firstName" defaultValue="">
-          {({ field }: { field: FieldApi<string, Person> }) => (
+          {({ field }: { field: FieldApi<Person, 'firstName'> }) => (
             <input
               data-testid={'fieldinput'}
               value={field.state.value}
@@ -69,7 +69,7 @@ describe('useForm', () => {
 
       return () => (
         <form.Field name="firstName" defaultValue="">
-          {({ field }: { field: FieldApi<string, Person> }) => (
+          {({ field }: { field: FieldApi<Person, 'firstName'> }) => (
             <p>{field.state.value}</p>
           )}
         </form.Field>
@@ -101,7 +101,7 @@ describe('useForm', () => {
             {({
               field,
             }: {
-              field: FieldApi<string, { firstName: string }>
+              field: FieldApi<{ firstName: string }, 'firstName'>
             }) => {
               return (
                 <input

package/src/types.ts

@@ -1,9 +1,9 @@
-import type { FieldOptions, DeepKeys } from '@tanstack/form-core'
+import type { FieldOptions, DeepKeys, DeepValue } from '@tanstack/form-core'
 
 export type UseFieldOptions<
-  TData,
-  TFormData,
-  TName = unknown extends TFormData ? string : DeepKeys<TFormData>,
-> = FieldOptions<TData, TFormData, TName> & {
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  TData = DeepValue<TParentData, TName>,
+> = FieldOptions<TParentData, TName, TData> & {
   mode?: 'value' | 'array'
 }

package/src/useField.tsx

@@ -1,8 +1,4 @@
-import {
-  FieldApi,
-  type FieldApiOptions,
-  type FormApi,
-} from '@tanstack/form-core'
+import { FieldApi } from '@tanstack/form-core'
 import type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core'
 import { useStore } from '@tanstack/vue-store'
 import { defineComponent, onMounted, onUnmounted, watch } from 'vue-demi'
@@ -12,44 +8,46 @@ import type { UseFieldOptions } from './types'
 
 declare module '@tanstack/form-core' {
   // eslint-disable-next-line no-shadow
-  interface FieldApi<_TData, TFormData, Opts, TData> {
-    Field: FieldComponent<TFormData, TData>
+  interface FieldApi<
+    TParentData,
+    TName extends DeepKeys<TParentData>,
+    TData = DeepValue<TParentData, TName>,
+  > {
+    Field: FieldComponent<TData>
   }
 }
 
-export type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(
-  opts?: { name: Narrow<TField> } & UseFieldOptions<
-    DeepValue<TFormData, TField>,
-    TFormData
+export type UseField<TParentData> = <TName extends DeepKeys<TParentData>>(
+  opts?: { name: Narrow<TName> } & UseFieldOptions<
+    TParentData,
+    TName,
+    DeepValue<TParentData, TName>
   >,
-) => FieldApi<DeepValue<TFormData, TField>, TFormData>
+) => FieldApi<TParentData, TName, DeepValue<TParentData, TName>>
 
 export function useField<
-  TData,
-  TFormData,
-  TName extends unknown extends TFormData
-    ? string
-    : DeepKeys<TFormData> = unknown extends TFormData
-    ? string
-    : DeepKeys<TFormData>,
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  TData = DeepValue<TParentData, TName>,
 >(
-  opts: UseFieldOptions<TData, TFormData, TName>,
+  opts: UseFieldOptions<TParentData, TName>,
 ): {
   api: FieldApi<
-    TData,
-    TFormData,
-    Omit<typeof opts, 'onMount'> & {
-      form: FormApi<TFormData>
-    }
+    TParentData,
+    TName
+    // Omit<typeof opts, 'onMount'> & {
+    //   form: FormApi<TParentData>
+    // }
   >
   state: Readonly<
     Ref<
       FieldApi<
-        TData,
-        TFormData,
-        Omit<typeof opts, 'onMount'> & {
-          form: FormApi<TFormData>
-        }
+        TParentData,
+        TName,
+        TData
+        // Omit<typeof opts, 'onMount'> & {
+        //   form: FormApi<TParentData>
+        // }
       >['state']
     >
   >
@@ -91,17 +89,15 @@ export function useField<
   return { api: fieldApi, state: fieldState } as never
 }
 
-export type FieldValue<TFormData, TField> = TFormData extends any[]
-  ? unknown extends TField
-    ? TFormData[number]
-    : DeepValue<TFormData[number], TField>
-  : DeepValue<TFormData, TField>
+export type FieldValue<TParentData, TName> = TParentData extends any[]
+  ? unknown extends TName
+    ? TParentData[number]
+    : DeepValue<TParentData[number], TName>
+  : DeepValue<TParentData, TName>
 
 type FieldComponentProps<
   TParentData,
-  TFormData,
-  TField,
-  TName extends unknown extends TFormData ? string : DeepKeys<TFormData>,
+  TName extends DeepKeys<TParentData>,
 > = (TParentData extends any[]
   ? {
       name?: TName
@@ -111,40 +107,30 @@ type FieldComponentProps<
       name: TName
       index?: never
     }) &
-  Omit<UseFieldOptions<TField, TFormData, TName>, 'name' | 'index'>
+  Omit<UseFieldOptions<TParentData, TName>, 'name' | 'index'>
 
-export type FieldComponent<TParentData, TFormData> = <
-  // Type of the field
-  TField,
-  // Name of the field
-  TName extends unknown extends TFormData ? string : DeepKeys<TFormData>,
+export type FieldComponent<TParentData> = <
+  TName extends DeepKeys<TParentData>,
+  TData = DeepValue<TParentData, TName>,
 >(
-  fieldOptions: FieldComponentProps<TParentData, TFormData, TField, TName>,
+  fieldOptions: FieldComponentProps<TParentData, TName>,
   context: SetupContext<
     {},
     SlotsType<{
       default: {
-        field: FieldApi<
-          TField,
-          TFormData,
-          FieldApiOptions<TField, TFormData, TName>
-        >
-        state: FieldApi<
-          TField,
-          TFormData,
-          FieldApiOptions<TField, TFormData, TName>
-        >['state']
+        field: FieldApi<TParentData, TName, TData>
+        state: FieldApi<TParentData, TName, TData>['state']
       }
     }>
   >,
 ) => any
 
 export const Field = defineComponent(
-  <TData, TFormData>(
-    fieldOptions: UseFieldOptions<TData, TFormData>,
+  <TParentData, TName extends DeepKeys<TParentData>>(
+    fieldOptions: UseFieldOptions<TParentData, TName>,
     context: SetupContext,
   ) => {
-    const fieldApi = useField({ ...fieldOptions, ...context.attrs })
+    const fieldApi = useField({ ...fieldOptions, ...context.attrs } as any)
 
     provideFormContext({
       formApi: fieldApi.api.form,

package/src/useForm.tsx

@@ -14,7 +14,7 @@ declare module '@tanstack/form-core' {
   interface FormApi<TFormData> {
     Provider: (props: Record<string, any> & {}) => any
     provideFormContext: () => void
-    Field: FieldComponent<TFormData, TFormData>
+    Field: FieldComponent<TFormData>
     useField: UseField<TFormData>
     useStore: <TSelected = NoInfer<FormState<TFormData>>>(
       selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,

package/build/lib/createFormFactory.d.ts

@@ -1,8 +0,0 @@
-import type { FormApi, FormOptions } from '@tanstack/form-core';
-import { type UseField, type FieldComponent } from './useField';
-export type FormFactory<TFormData> = {
-    useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>;
-    useField: UseField<TFormData>;
-    Field: FieldComponent<TFormData, TFormData>;
-};
-export declare function createFormFactory<TFormData>(defaultOpts?: FormOptions<TFormData>): FormFactory<TFormData>;

package/build/lib/createFormFactory.js

@@ -1,12 +0,0 @@
-import { Field, useField } from './useField';
-import { useForm } from './useForm';
-export function createFormFactory(defaultOpts) {
-    return {
-        useForm: (opts) => {
-            const formOptions = Object.assign({}, defaultOpts, opts);
-            return useForm(formOptions);
-        },
-        useField: useField,
-        Field: Field,
-    };
-}

package/build/lib/formContext.d.ts

@@ -1,11 +0,0 @@
-import type { FormApi } from '@tanstack/form-core';
-export type FormContext = {
-    formApi: FormApi<any>;
-    parentFieldName?: string;
-} | null;
-export declare const formContext: unique symbol;
-export declare function provideFormContext(val: FormContext): void;
-export declare function useFormContext(): {
-    formApi: FormApi<any>;
-    parentFieldName?: string | undefined;
-};

package/build/lib/formContext.js

@@ -1,12 +0,0 @@
-import { inject, provide } from 'vue-demi';
-export const formContext = Symbol('FormContext');
-export function provideFormContext(val) {
-    provide(formContext, val);
-}
-export function useFormContext() {
-    const formApi = inject(formContext);
-    if (!formApi) {
-        throw new Error(`You are trying to use the form API outside of a form!`);
-    }
-    return formApi;
-}

package/build/lib/index.d.ts

@@ -1,5 +0,0 @@
-export * from '@tanstack/form-core';
-export * from './createFormFactory';
-export * from './formContext';
-export * from './useField';
-export * from './useForm';

package/build/lib/index.js

@@ -1,5 +0,0 @@
-export * from '@tanstack/form-core';
-export * from './createFormFactory';
-export * from './formContext';
-export * from './useField';
-export * from './useForm';

package/build/lib/tests/useField.test.d.ts

@@ -1,2 +0,0 @@
-/// <reference lib="dom" />
-import '@testing-library/jest-dom';

package/build/lib/tests/useField.test.jsx

@@ -1,109 +0,0 @@
-/// <reference lib="dom" />
-import { defineComponent } from 'vue-demi';
-import { render, waitFor } from '@testing-library/vue';
-import '@testing-library/jest-dom';
-import { createFormFactory, provideFormContext, } from '../index';
-import userEvent from '@testing-library/user-event';
-import { sleep } from './utils';
-const user = userEvent.setup();
-describe('useField', () => {
-    it('should allow to set default value', async () => {
-        const formFactory = createFormFactory();
-        const Comp = defineComponent(() => {
-            const form = formFactory.useForm();
-            provideFormContext({ formApi: form });
-            return () => (<form.Field name="firstName" defaultValue="FirstName">
-          {({ field }) => (<input data-testid={'fieldinput'} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.handleChange(e.target.value)}/>)}
-        </form.Field>);
-        });
-        const { getByTestId } = render(Comp);
-        const input = getByTestId('fieldinput');
-        await waitFor(() => expect(input).toHaveValue('FirstName'));
-    });
-    it('should not validate on change if isTouched is false', async () => {
-        const error = 'Please enter a different value';
-        const formFactory = createFormFactory();
-        const Comp = defineComponent(() => {
-            const form = formFactory.useForm();
-            provideFormContext({ formApi: form });
-            return () => (<form.Field name="firstName" onChange={(value) => (value === 'other' ? error : undefined)}>
-          {({ field }) => (<div>
-              <input data-testid="fieldinput" name={field.name} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.setValue(e.target.value)}/>
-              <p>{field.getMeta().errors}</p>
-            </div>)}
-        </form.Field>);
-        });
-        const { getByTestId, queryByText } = render(Comp);
-        const input = getByTestId('fieldinput');
-        await user.type(input, 'other');
-        expect(queryByText(error)).not.toBeInTheDocument();
-    });
-    it('should validate on change if isTouched is true', async () => {
-        const error = 'Please enter a different value';
-        const formFactory = createFormFactory();
-        const Comp = defineComponent(() => {
-            const form = formFactory.useForm();
-            provideFormContext({ formApi: form });
-            return () => (<form.Field name="firstName" onChange={(value) => (value === 'other' ? error : undefined)}>
-          {({ field }) => (<div>
-              <input data-testid="fieldinput" name={field.name} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.handleChange(e.target.value)}/>
-              <p>{field.getMeta().errors}</p>
-            </div>)}
-        </form.Field>);
-        });
-        const { getByTestId, getByText, queryByText } = render(Comp);
-        const input = getByTestId('fieldinput');
-        expect(queryByText(error)).not.toBeInTheDocument();
-        await user.type(input, 'other');
-        expect(getByText(error)).toBeInTheDocument();
-    });
-    it('should validate async on change', async () => {
-        const error = 'Please enter a different value';
-        const formFactory = createFormFactory();
-        const Comp = defineComponent(() => {
-            const form = formFactory.useForm();
-            provideFormContext({ formApi: form });
-            return () => (<form.Field name="firstName" defaultMeta={{ isTouched: true }} onChangeAsync={async () => {
-                    await sleep(10);
-                    return error;
-                }}>
-          {({ field }) => (<div>
-              <input data-testid="fieldinput" name={field.name} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.handleChange(e.target.value)}/>
-              <p>{field.getMeta().errors}</p>
-            </div>)}
-        </form.Field>);
-        });
-        const { getByTestId, getByText, queryByText } = render(Comp);
-        const input = getByTestId('fieldinput');
-        expect(queryByText(error)).not.toBeInTheDocument();
-        await user.type(input, 'other');
-        await waitFor(() => getByText(error));
-        expect(getByText(error)).toBeInTheDocument();
-    });
-    it('should validate async on change with debounce', async () => {
-        const mockFn = vi.fn();
-        const error = 'Please enter a different value';
-        const formFactory = createFormFactory();
-        const Comp = defineComponent(() => {
-            const form = formFactory.useForm();
-            provideFormContext({ formApi: form });
-            return () => (<form.Field name="firstName" defaultMeta={{ isTouched: true }} onChangeAsyncDebounceMs={100} onChangeAsync={async () => {
-                    mockFn();
-                    await sleep(10);
-                    return error;
-                }}>
-          {({ field }) => (<div>
-              <input data-testid="fieldinput" name={field.name} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.handleChange(e.target.value)}/>
-              <p>{field.getMeta().errors}</p>
-            </div>)}
-        </form.Field>);
-        });
-        const { getByTestId, getByText } = render(<Comp />);
-        const input = getByTestId('fieldinput');
-        await user.type(input, 'other');
-        // mockFn will have been called 5 times without onChangeAsyncDebounceMs
-        expect(mockFn).toHaveBeenCalledTimes(0);
-        await waitFor(() => getByText(error));
-        expect(getByText(error)).toBeInTheDocument();
-    });
-});

package/build/lib/tests/useForm.test.d.ts

@@ -1,2 +0,0 @@
-/// <reference lib="dom" />
-import '@testing-library/jest-dom';

package/build/lib/tests/useForm.test.jsx

@@ -1,71 +0,0 @@
-/// <reference lib="dom" />
-import { defineComponent, ref } from 'vue-demi';
-import { render, waitFor } from '@testing-library/vue';
-import '@testing-library/jest-dom';
-import { createFormFactory, provideFormContext, useForm, } from '../index';
-import userEvent from '@testing-library/user-event';
-const user = userEvent.setup();
-describe('useForm', () => {
-    it('preserved field state', async () => {
-        const formFactory = createFormFactory();
-        const Comp = defineComponent(() => {
-            const form = formFactory.useForm();
-            provideFormContext({ formApi: form });
-            return () => (<form.Field name="firstName" defaultValue="">
-          {({ field }) => (<input data-testid={'fieldinput'} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.handleChange(e.target.value)}/>)}
-        </form.Field>);
-        });
-        const { getByTestId, queryByText } = render(Comp);
-        const input = getByTestId('fieldinput');
-        expect(queryByText('FirstName')).not.toBeInTheDocument();
-        await user.type(input, 'FirstName');
-        expect(input).toHaveValue('FirstName');
-    });
-    it('should allow default values to be set', async () => {
-        const formFactory = createFormFactory();
-        const Comp = defineComponent(() => {
-            const form = formFactory.useForm({
-                defaultValues: {
-                    firstName: 'FirstName',
-                    lastName: 'LastName',
-                },
-            });
-            form.provideFormContext();
-            return () => (<form.Field name="firstName" defaultValue="">
-          {({ field }) => (<p>{field.state.value}</p>)}
-        </form.Field>);
-        });
-        const { findByText, queryByText } = render(Comp);
-        expect(await findByText('FirstName')).toBeInTheDocument();
-        expect(queryByText('LastName')).not.toBeInTheDocument();
-    });
-    it('should handle submitting properly', async () => {
-        const Comp = defineComponent(() => {
-            const submittedData = ref();
-            const form = useForm({
-                defaultValues: {
-                    firstName: 'FirstName',
-                },
-                onSubmit: (data) => {
-                    submittedData.value = data;
-                },
-            });
-            form.provideFormContext();
-            return () => (<form.Provider>
-          <form.Field name="firstName">
-            {({ field, }) => {
-                    return (<input value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} placeholder={'First name'}/>);
-                }}
-          </form.Field>
-          <button onClick={form.handleSubmit}>Submit</button>
-          {submittedData.value && (<p>Submitted data: {submittedData.value.firstName}</p>)}
-        </form.Provider>);
-        });
-        const { findByPlaceholderText, getByText } = render(Comp);
-        const input = await findByPlaceholderText('First name');
-        await user.clear(input);
-        await user.type(input, 'OtherName');
-        await user.click(getByText('Submit'));
-        await waitFor(() => expect(getByText('Submitted data: OtherName')).toBeInTheDocument());
-    });
-});

package/build/lib/tests/utils.d.ts

@@ -1 +0,0 @@
-export declare function sleep(timeout: number): Promise<void>;

package/build/lib/tests/utils.js

@@ -1,5 +0,0 @@
-export function sleep(timeout) {
-    return new Promise((resolve, _reject) => {
-        setTimeout(resolve, timeout);
-    });
-}

package/build/lib/types.d.ts

@@ -1,4 +0,0 @@
-import type { FieldOptions, DeepKeys } from '@tanstack/form-core';
-export type UseFieldOptions<TData, TFormData, TName = unknown extends TFormData ? string : DeepKeys<TFormData>> = FieldOptions<TData, TFormData, TName> & {
-    mode?: 'value' | 'array';
-};

package/build/lib/types.js

@@ -1 +0,0 @@
-export {};