@tanstack/vue-form 0.13.7 → 0.16.0

package/dist/cjs/createFormFactory.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"createFormFactory.cjs","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import { Field, useField } from './useField'\nimport { useForm } from './useForm'\nimport type { FormApi, FormOptions, Validator } from '@tanstack/form-core'\nimport type { FieldComponent, UseField } from './useField'\n\nexport type FormFactory<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = {\n  useForm: (\n    opts?: FormOptions<TFormData, TFormValidator>,\n  ) => FormApi<TFormData, TFormValidator>\n  useField: UseField<TFormData, TFormValidator>\n  Field: FieldComponent<TFormData, TFormValidator>\n}\n\nexport function createFormFactory<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  defaultOpts?: FormOptions<TFormData, TFormValidator>,\n): FormFactory<TFormData, TFormValidator> {\n  return {\n    useForm: (opts) => {\n      const formOptions = Object.assign({}, defaultOpts, opts)\n      return useForm<TFormData, TFormValidator>(formOptions)\n    },\n    useField: useField as any,\n    Field: Field as any,\n  }\n}\n"],"names":["useForm","useField","Field"],"mappings":";;;;AAgBO,SAAS,kBAId,aACwC;AACjC,SAAA;AAAA,IACL,SAAS,CAAC,SAAS;AACjB,YAAM,cAAc,OAAO,OAAO,CAAA,GAAI,aAAa,IAAI;AACvD,aAAOA,QAAAA,QAAmC,WAAW;AAAA,IACvD;AAAA,IAAA,UACAC,SAAA;AAAA,IAAA,OACAC,SAAA;AAAA,EAAA;AAEJ;;"}
+{"version":3,"file":"createFormFactory.cjs","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import { Field, useField } from './useField'\nimport { useForm } from './useForm'\nimport type { FormApi, FormOptions, Validator } from '@tanstack/form-core'\nimport type { FieldComponent, UseField } from './useField'\n\nexport type FormFactory<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = {\n  useForm: (\n    opts?: FormOptions<TFormData, TFormValidator>,\n  ) => FormApi<TFormData, TFormValidator>\n  useField: typeof useField\n  Field: typeof Field\n}\n\nexport function createFormFactory<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  defaultOpts?: FormOptions<TFormData, TFormValidator>,\n): FormFactory<TFormData, TFormValidator> {\n  return {\n    useForm: (opts) => {\n      const formOptions = Object.assign({}, defaultOpts, opts)\n      return useForm<TFormData, TFormValidator>(formOptions)\n    },\n    useField: useField,\n    Field: Field,\n  }\n}\n"],"names":["useForm","useField","Field"],"mappings":";;;;AAgBO,SAAS,kBAId,aACwC;AACjC,SAAA;AAAA,IACL,SAAS,CAAC,SAAS;AACjB,YAAM,cAAc,OAAO,OAAO,CAAA,GAAI,aAAa,IAAI;AACvD,aAAOA,QAAAA,QAAmC,WAAW;AAAA,IACvD;AAAA,IAAA,UACAC,SAAA;AAAA,IAAA,OACAC,SAAA;AAAA,EAAA;AAEJ;;"}

package/dist/cjs/createFormFactory.d.cts

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

package/dist/cjs/index.cjs

@@ -2,13 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const formCore = require("@tanstack/form-core");
 const createFormFactory = require("./createFormFactory.cjs");
-const formContext = require("./formContext.cjs");
 const useField = require("./useField.cjs");
 const useForm = require("./useForm.cjs");
 exports.createFormFactory = createFormFactory.createFormFactory;
-exports.formContext = formContext.formContext;
-exports.provideFormContext = formContext.provideFormContext;
-exports.useFormContext = formContext.useFormContext;
 exports.Field = useField.Field;
 exports.useField = useField.useField;
 exports.useForm = useForm.useForm;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/dist/cjs/index.d.cts

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

package/dist/cjs/types.d.cts

@@ -1,4 +1,4 @@
-import type { DeepKeys, DeepValue, FieldOptions, Validator } from '@tanstack/form-core';
-export type UseFieldOptions<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
+import type { DeepKeys, DeepValue, FieldApiOptions, Validator } from '@tanstack/form-core';
+export type UseFieldOptions<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = FieldApiOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
     mode?: 'value' | 'array';
 };

package/dist/cjs/useField.cjs

@@ -3,13 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const formCore = require("@tanstack/form-core");
 const vueStore = require("@tanstack/vue-store");
 const vue = require("vue");
-const formContext = require("./formContext.cjs");
 function useField(opts) {
-  const { formApi, parentFieldName } = formContext.useFormContext();
   const fieldApi = (() => {
     const api = new formCore.FieldApi({
       ...opts,
-      form: formApi,
+      form: opts.form,
       name: opts.name
     });
     api.Field = Field;
@@ -26,7 +24,7 @@ function useField(opts) {
   vue.watch(
     () => opts,
     () => {
-      fieldApi.update({ ...opts, form: formApi });
+      fieldApi.update({ ...opts, form: opts.form });
     }
   );
   return { api: fieldApi, state: fieldState };
@@ -34,10 +32,6 @@ function useField(opts) {
 const Field = vue.defineComponent(
   (fieldOptions, context) => {
     const fieldApi = useField({ ...fieldOptions, ...context.attrs });
-    formContext.provideFormContext({
-      formApi: fieldApi.api.form,
-      parentFieldName: fieldApi.api.name
-    });
     return () => context.slots.default({
       field: fieldApi.api,
       state: fieldApi.state.value

package/dist/cjs/useField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport { provideFormContext, useFormContext } from './formContext'\nimport type {\n  DeepKeys,\n  DeepValue,\n  Narrow,\n  Validator,\n} from '@tanstack/form-core'\nimport type { Ref, SetupContext, SlotsType } from 'vue'\nimport type { UseFieldOptions } from './types'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    TFieldValidator extends\n      | Validator<DeepValue<TParentData, TName>, unknown>\n      | undefined = undefined,\n    TFormValidator extends\n      | Validator<TParentData, unknown>\n      | undefined = undefined,\n    TData = DeepValue<TParentData, TName>,\n  > {\n    Field: FieldComponent<TParentData, TFormValidator>\n  }\n}\n\nexport type UseField<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n>(\n  opts?: { name: Narrow<TName> } & UseFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    DeepValue<TParentData, TName>\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  DeepValue<TParentData, TName>\n>\n\nexport function useField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  opts: UseFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n): {\n  api: FieldApi<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n    // Omit<typeof opts, 'onMount'> & {\n    //   form: FormApi<TParentData>\n    // }\n  >\n  state: Readonly<\n    Ref<\n      FieldApi<\n        TParentData,\n        TName,\n        TFieldValidator,\n        TFormValidator,\n        TData\n      >['state']\n    >\n  >\n} {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const fieldApi = (() => {\n    const api = new FieldApi({\n      ...opts,\n      form: formApi,\n      name: opts.name,\n    } as never)\n\n    api.Field = Field as never\n\n    return api\n  })()\n\n  const fieldState = useStore(fieldApi.store, (state) => state)\n\n  let cleanup!: () => void\n  onMounted(() => {\n    cleanup = fieldApi.mount()\n  })\n\n  onUnmounted(() => {\n    cleanup()\n  })\n\n  watch(\n    () => opts,\n    () => {\n      // Keep options up to date as they are rendered\n      fieldApi.update({ ...opts, form: formApi } as never)\n    },\n  )\n\n  return { api: fieldApi, state: fieldState } as never\n}\n\nexport type FieldValue<TParentData, TName> = TParentData extends any[]\n  ? unknown extends TName\n    ? TParentData[number]\n    : DeepValue<TParentData[number], TName>\n  : DeepValue<TParentData, TName>\n\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = (TParentData extends any[]\n  ? {\n      name?: TName\n      index: number\n    }\n  : {\n      name: TName\n      index?: never\n    }) &\n  Omit<\n    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n    'name' | 'index'\n  >\n\nexport type FieldComponent<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  fieldOptions: FieldComponentProps<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator\n  >,\n  context: SetupContext<\n    {},\n    SlotsType<{\n      default: {\n        field: FieldApi<\n          TParentData,\n          TName,\n          TFieldValidator,\n          TFormValidator,\n          TData\n        >\n        state: FieldApi<\n          TParentData,\n          TName,\n          TFieldValidator,\n          TFormValidator,\n          TData\n        >['state']\n      }\n    }>\n  >,\n) => any\n\nexport const Field = defineComponent(\n  <\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    TFieldValidator extends\n      | Validator<DeepValue<TParentData, TName>, unknown>\n      | undefined = undefined,\n    TFormValidator extends\n      | Validator<TParentData, unknown>\n      | undefined = undefined,\n  >(\n    fieldOptions: UseFieldOptions<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator\n    >,\n    context: SetupContext,\n  ) => {\n    const fieldApi = useField({ ...fieldOptions, ...context.attrs } as any)\n\n    provideFormContext({\n      formApi: fieldApi.api.form,\n      parentFieldName: fieldApi.api.name,\n    } as never)\n\n    return () =>\n      context.slots.default!({\n        field: fieldApi.api,\n        state: fieldApi.state.value,\n      })\n  },\n  { name: 'Field', inheritAttrs: false },\n)\n"],"names":["useFormContext","FieldApi","useStore","onMounted","onUnmounted","watch","defineComponent","provideFormContext"],"mappings":";;;;;;AAwDO,SAAS,SAWd,MA6BA;AAEA,QAAM,EAAE,SAAS,gBAAgB,IAAIA,YAAe,eAAA;AAEpD,QAAM,YAAY,MAAM;AAChB,UAAA,MAAM,IAAIC,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM;AAAA,MACN,MAAM,KAAK;AAAA,IAAA,CACH;AAEV,QAAI,QAAQ;AAEL,WAAA;AAAA,EAAA;AAGT,QAAM,aAAaC,SAAAA,SAAS,SAAS,OAAO,CAAC,UAAU,KAAK;AAExD,MAAA;AACJC,MAAAA,UAAU,MAAM;AACd,cAAU,SAAS;EAAM,CAC1B;AAEDC,MAAAA,YAAY,MAAM;AACR;EAAA,CACT;AAEDC,MAAA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,eAAS,OAAO,EAAE,GAAG,MAAM,MAAM,SAAkB;AAAA,IACrD;AAAA,EAAA;AAGF,SAAO,EAAE,KAAK,UAAU,OAAO,WAAW;AAC5C;AAwEO,MAAM,QAAQC,IAAA;AAAA,EACnB,CAUE,cAMA,YACG;AACG,UAAA,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,OAAc;AAEnDC,mCAAA;AAAA,MACjB,SAAS,SAAS,IAAI;AAAA,MACtB,iBAAiB,SAAS,IAAI;AAAA,IAAA,CACtB;AAEH,WAAA,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS,MAAM;AAAA,IAAA,CACvB;AAAA,EACL;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAM;AACvC;;;"}
+{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport type {\n  DeepKeys,\n  DeepValue,\n  Narrow,\n  Validator,\n} from '@tanstack/form-core'\nimport type { Ref, SetupContext, SlotsType } from 'vue'\nimport type { UseFieldOptions } from './types'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    TFieldValidator extends\n      | Validator<DeepValue<TParentData, TName>, unknown>\n      | undefined = undefined,\n    TFormValidator extends\n      | Validator<TParentData, unknown>\n      | undefined = undefined,\n    TData = DeepValue<TParentData, TName>,\n  > {\n    Field: FieldComponent<TParentData, TFormValidator>\n  }\n}\n\nexport type UseField<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  opts: Omit<\n    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n    'form'\n  >,\n) => {\n  api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>\n  state: Readonly<\n    Ref<\n      FieldApi<\n        TParentData,\n        TName,\n        TFieldValidator,\n        TFormValidator,\n        TData\n      >['state']\n    >\n  >\n}\n\nexport function useField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  opts: UseFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n): {\n  api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>\n  state: Readonly<\n    Ref<\n      FieldApi<\n        TParentData,\n        TName,\n        TFieldValidator,\n        TFormValidator,\n        TData\n      >['state']\n    >\n  >\n} {\n  const fieldApi = (() => {\n    const api = new FieldApi({\n      ...opts,\n      form: opts.form,\n      name: opts.name,\n    } as never)\n\n    api.Field = Field as never\n\n    return api\n  })()\n\n  const fieldState = useStore(fieldApi.store, (state) => state)\n\n  let cleanup!: () => void\n  onMounted(() => {\n    cleanup = fieldApi.mount()\n  })\n\n  onUnmounted(() => {\n    cleanup()\n  })\n\n  watch(\n    () => opts,\n    () => {\n      // Keep options up to date as they are rendered\n      fieldApi.update({ ...opts, form: opts.form } as never)\n    },\n  )\n\n  return { api: fieldApi, state: fieldState } as never\n}\n\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>\n\nexport type FieldComponent<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  fieldOptions: Omit<\n    FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator>,\n    'form'\n  >,\n  context: SetupContext<\n    {},\n    SlotsType<{\n      default: {\n        field: FieldApi<\n          TParentData,\n          TName,\n          TFieldValidator,\n          TFormValidator,\n          TData\n        >\n        state: FieldApi<\n          TParentData,\n          TName,\n          TFieldValidator,\n          TFormValidator,\n          TData\n        >['state']\n      }\n    }>\n  >,\n) => any\n\nexport const Field = defineComponent(\n  <\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    TFieldValidator extends\n      | Validator<DeepValue<TParentData, TName>, unknown>\n      | undefined = undefined,\n    TFormValidator extends\n      | Validator<TParentData, unknown>\n      | undefined = undefined,\n  >(\n    fieldOptions: UseFieldOptions<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator\n    >,\n    context: SetupContext,\n  ) => {\n    const fieldApi = useField({ ...fieldOptions, ...context.attrs } as any)\n\n    return () =>\n      context.slots.default!({\n        field: fieldApi.api,\n        state: fieldApi.state.value,\n      })\n  },\n  { name: 'Field', inheritAttrs: false },\n)\n"],"names":["FieldApi","useStore","onMounted","onUnmounted","watch","defineComponent"],"mappings":";;;;;AA4DO,SAAS,SAWd,MAoBA;AACA,QAAM,YAAY,MAAM;AAChB,UAAA,MAAM,IAAIA,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACH;AAEV,QAAI,QAAQ;AAEL,WAAA;AAAA,EAAA;AAGT,QAAM,aAAaC,SAAAA,SAAS,SAAS,OAAO,CAAC,UAAU,KAAK;AAExD,MAAA;AACJC,MAAAA,UAAU,MAAM;AACd,cAAU,SAAS;EAAM,CAC1B;AAEDC,MAAAA,YAAY,MAAM;AACR;EAAA,CACT;AAEDC,MAAA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,eAAS,OAAO,EAAE,GAAG,MAAM,MAAM,KAAK,MAAe;AAAA,IACvD;AAAA,EAAA;AAGF,SAAO,EAAE,KAAK,UAAU,OAAO,WAAW;AAC5C;AAoDO,MAAM,QAAQC,IAAA;AAAA,EACnB,CAUE,cAMA,YACG;AACG,UAAA,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,OAAc;AAE/D,WAAA,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS,MAAM;AAAA,IAAA,CACvB;AAAA,EACL;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAM;AACvC;;;"}

package/dist/cjs/useField.d.cts

@@ -1,5 +1,5 @@
 import { FieldApi } from '@tanstack/form-core';
-import type { DeepKeys, DeepValue, Narrow, Validator } from '@tanstack/form-core';
+import type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
 import type { Ref, SetupContext, SlotsType } from 'vue';
 import type { UseFieldOptions } from './types.cjs';
 declare module '@tanstack/form-core' {
@@ -7,32 +7,26 @@ declare module '@tanstack/form-core' {
         Field: FieldComponent<TParentData, TFormValidator>;
     }
 }
-export type UseField<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined>(opts?: {
-    name: Narrow<TName>;
-} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, DeepValue<TParentData, TName>>) => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, DeepValue<TParentData, TName>>;
+export type UseField<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(opts: Omit<UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>, 'form'>) => {
+    api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
+    state: Readonly<Ref<FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>['state']>>;
+};
 export declare function useField<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>): {
     api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
     state: Readonly<Ref<FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>['state']>>;
 };
-export type FieldValue<TParentData, TName> = TParentData extends any[] ? unknown extends TName ? TParentData[number] : DeepValue<TParentData[number], TName> : DeepValue<TParentData, TName>;
-type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = (TParentData extends any[] ? {
-    name?: TName;
-    index: number;
-} : {
-    name: TName;
-    index?: never;
-}) & Omit<UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>, 'name' | 'index'>;
-export type FieldComponent<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(fieldOptions: FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator>, context: SetupContext<{}, SlotsType<{
+type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>;
+export type FieldComponent<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(fieldOptions: Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator>, 'form'>, context: SetupContext<{}, SlotsType<{
     default: {
         field: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
         state: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>['state'];
     };
 }>>) => any;
-export declare const Field: <TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined>(props: import("@tanstack/form-core").FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, DeepValue<TParentData, TName>> & {
+export declare const Field: <TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined>(props: import("@tanstack/form-core").FieldApiOptions<TParentData, TName, TFieldValidator, TFormValidator, DeepValue<TParentData, TName>> & {
     mode?: "value" | "array" | undefined;
 } & ({
-    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
-} | {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+} | {
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
 })) => any;
 export {};

package/dist/cjs/useForm.cjs

@@ -4,24 +4,23 @@ const formCore = require("@tanstack/form-core");
 const vueStore = require("@tanstack/vue-store");
 const vue = require("vue");
 const useField = require("./useField.cjs");
-const formContext = require("./formContext.cjs");
 function useForm(opts) {
   const formApi = (() => {
     const api = new formCore.FormApi(opts);
-    api.Provider = vue.defineComponent(
-      (_, context) => {
-        vue.onMounted(api.mount);
-        formContext.provideFormContext({ formApi });
-        return () => context.slots.default();
+    api.Field = vue.defineComponent(
+      (props, context) => {
+        return () => vue.h(
+          useField.Field,
+          { ...props, ...context.attrs, form: api },
+          context.slots
+        );
       },
-      { name: "Provider" }
+      {
+        name: "APIField",
+        inheritAttrs: false
+      }
     );
-    api.provideFormContext = () => {
-      vue.onMounted(api.mount);
-      formContext.provideFormContext({ formApi });
-    };
-    api.Field = useField.Field;
-    api.useField = useField.useField;
+    api.useField = (props) => useField.useField({ ...props, form: api });
     api.useStore = (selector) => {
       return vueStore.useStore(api.store, selector);
     };
@@ -39,6 +38,7 @@ function useForm(opts) {
     );
     return api;
   })();
+  vue.onMounted(formApi.mount);
   formApi.update(opts);
   return formApi;
 }

package/dist/cjs/useForm.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted } from 'vue'\nimport { Field, useField } from './useField'\nimport { provideFormContext } from './formContext'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/vue-store'\nimport type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue'\nimport type { FieldComponent, UseField } from './useField'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, TFormValidator> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData, TFormValidator>\n    useField: UseField<TFormData, TFormValidator>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => Readonly<Ref<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<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  opts?: FormOptions<TFormData, TFormValidator>,\n): FormApi<TFormData, TFormValidator> {\n  const formApi = (() => {\n    const api = new FormApi<TFormData, TFormValidator>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        onMounted(api.mount)\n        provideFormContext({ formApi: formApi as never })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\n      onMounted(api.mount)\n      provideFormContext({ formApi: formApi as never })\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"],"names":["FormApi","defineComponent","onMounted","provideFormContext","Field","useField","useStore"],"mappings":";;;;;;;AAgCO,SAAS,QAId,MACoC;AACpC,QAAM,WAAW,MAAM;AACf,UAAA,MAAM,IAAIA,iBAAmC,IAAI;AAEvD,QAAI,WAAWC,IAAA;AAAA,MACb,CAAC,GAAG,YAAY;AACdC,sBAAU,IAAI,KAAK;AACAC,uCAAA,EAAE,SAA2B;AACzC,eAAA,MAAM,QAAQ,MAAM;MAC7B;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IAAA;AAErB,QAAI,qBAAqB,MAAM;AAC7BD,oBAAU,IAAI,KAAK;AACAC,qCAAA,EAAE,SAA2B;AAAA,IAAA;AAElD,QAAI,QAAQC;AACZ,QAAI,WAAWC;AACX,QAAA,WAAW,CAAC,aAAa;AACpB,aAAAC,kBAAS,IAAI,OAAgB,QAAiB;AAAA,IAAA;AAEvD,QAAI,YAAYL,IAAA;AAAA,MACd,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAU;AAClD,cAAM,OAAOK,SAAA,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,IAAA;AAGK,WAAA;AAAA,EAAA;AAIT,UAAQ,OAAO,IAAI;AAEZ,SAAA;AACT;;"}
+{"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, h, onMounted } from 'vue'\nimport { Field, useField } from './useField'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/vue-store'\nimport type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue'\nimport type { FieldComponent, UseField } from './useField'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, TFormValidator> {\n    Field: FieldComponent<TFormData, TFormValidator>\n    useField: UseField<TFormData, TFormValidator>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => Readonly<Ref<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<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  opts?: FormOptions<TFormData, TFormValidator>,\n): FormApi<TFormData, TFormValidator> {\n  const formApi = (() => {\n    const api = new FormApi<TFormData, TFormValidator>(opts)\n\n    api.Field = defineComponent(\n      (props, context) => {\n        return () =>\n          h(\n            Field as never,\n            { ...props, ...context.attrs, form: api },\n            context.slots,\n          )\n      },\n      {\n        name: 'APIField',\n        inheritAttrs: false,\n      },\n    )\n    api.useField = (props) => useField({ ...props, form: api })\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  onMounted(formApi.mount)\n\n  // formApi.useStore((state) => state.isSubmitting)\n  formApi.update(opts)\n\n  return formApi as never\n}\n"],"names":["FormApi","defineComponent","h","Field","useField","useStore","onMounted"],"mappings":";;;;;;AA6BO,SAAS,QAId,MACoC;AACpC,QAAM,WAAW,MAAM;AACf,UAAA,MAAM,IAAIA,iBAAmC,IAAI;AAEvD,QAAI,QAAQC,IAAA;AAAA,MACV,CAAC,OAAO,YAAY;AAClB,eAAO,MACLC,IAAA;AAAA,UACEC,SAAA;AAAA,UACA,EAAE,GAAG,OAAO,GAAG,QAAQ,OAAO,MAAM,IAAI;AAAA,UACxC,QAAQ;AAAA,QAAA;AAAA,MAEd;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAChB;AAAA,IAAA;AAEE,QAAA,WAAW,CAAC,UAAUC,SAAA,SAAS,EAAE,GAAG,OAAO,MAAM,IAAA,CAAK;AACtD,QAAA,WAAW,CAAC,aAAa;AACpB,aAAAC,kBAAS,IAAI,OAAgB,QAAiB;AAAA,IAAA;AAEvD,QAAI,YAAYJ,IAAA;AAAA,MACd,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAU;AAClD,cAAM,OAAOI,SAAA,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,IAAA;AAGK,WAAA;AAAA,EAAA;AAGTC,gBAAU,QAAQ,KAAK;AAGvB,UAAQ,OAAO,IAAI;AAEZ,SAAA;AACT;;"}

package/dist/cjs/useForm.d.cts

@@ -5,8 +5,6 @@ import type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue';
 import type { FieldComponent, UseField } from './useField.cjs';
 declare module '@tanstack/form-core' {
     interface FormApi<TFormData, TFormValidator> {
-        Provider: (props: Record<string, any> & {}) => any;
-        provideFormContext: () => void;
         Field: FieldComponent<TFormData, TFormValidator>;
         useField: UseField<TFormData, TFormValidator>;
         useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => Readonly<Ref<TSelected>>;

package/dist/esm/createFormFactory.d.ts

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

package/dist/esm/createFormFactory.js.map

@@ -1 +1 @@
-{"version":3,"file":"createFormFactory.js","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import { Field, useField } from './useField'\nimport { useForm } from './useForm'\nimport type { FormApi, FormOptions, Validator } from '@tanstack/form-core'\nimport type { FieldComponent, UseField } from './useField'\n\nexport type FormFactory<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = {\n  useForm: (\n    opts?: FormOptions<TFormData, TFormValidator>,\n  ) => FormApi<TFormData, TFormValidator>\n  useField: UseField<TFormData, TFormValidator>\n  Field: FieldComponent<TFormData, TFormValidator>\n}\n\nexport function createFormFactory<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  defaultOpts?: FormOptions<TFormData, TFormValidator>,\n): FormFactory<TFormData, TFormValidator> {\n  return {\n    useForm: (opts) => {\n      const formOptions = Object.assign({}, defaultOpts, opts)\n      return useForm<TFormData, TFormValidator>(formOptions)\n    },\n    useField: useField as any,\n    Field: Field as any,\n  }\n}\n"],"names":[],"mappings":";;AAgBO,SAAS,kBAId,aACwC;AACjC,SAAA;AAAA,IACL,SAAS,CAAC,SAAS;AACjB,YAAM,cAAc,OAAO,OAAO,CAAA,GAAI,aAAa,IAAI;AACvD,aAAO,QAAmC,WAAW;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"createFormFactory.js","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import { Field, useField } from './useField'\nimport { useForm } from './useForm'\nimport type { FormApi, FormOptions, Validator } from '@tanstack/form-core'\nimport type { FieldComponent, UseField } from './useField'\n\nexport type FormFactory<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = {\n  useForm: (\n    opts?: FormOptions<TFormData, TFormValidator>,\n  ) => FormApi<TFormData, TFormValidator>\n  useField: typeof useField\n  Field: typeof Field\n}\n\nexport function createFormFactory<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  defaultOpts?: FormOptions<TFormData, TFormValidator>,\n): FormFactory<TFormData, TFormValidator> {\n  return {\n    useForm: (opts) => {\n      const formOptions = Object.assign({}, defaultOpts, opts)\n      return useForm<TFormData, TFormValidator>(formOptions)\n    },\n    useField: useField,\n    Field: Field,\n  }\n}\n"],"names":[],"mappings":";;AAgBO,SAAS,kBAId,aACwC;AACjC,SAAA;AAAA,IACL,SAAS,CAAC,SAAS;AACjB,YAAM,cAAc,OAAO,OAAO,CAAA,GAAI,aAAa,IAAI;AACvD,aAAO,QAAmC,WAAW;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/esm/index.d.ts

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

package/dist/esm/index.js

@@ -1,15 +1,11 @@
 export * from "@tanstack/form-core";
 import { createFormFactory } from "./createFormFactory.js";
-import { formContext, provideFormContext, useFormContext } from "./formContext.js";
 import { Field, useField } from "./useField.js";
 import { useForm } from "./useForm.js";
 export {
   Field,
   createFormFactory,
-  formContext,
-  provideFormContext,
   useField,
-  useForm,
-  useFormContext
+  useForm
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/types.d.ts

@@ -1,4 +1,4 @@
-import type { DeepKeys, DeepValue, FieldOptions, Validator } from '@tanstack/form-core';
-export type UseFieldOptions<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
+import type { DeepKeys, DeepValue, FieldApiOptions, Validator } from '@tanstack/form-core';
+export type UseFieldOptions<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = FieldApiOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
     mode?: 'value' | 'array';
 };

package/dist/esm/useField.d.ts

@@ -1,5 +1,5 @@
 import { FieldApi } from '@tanstack/form-core';
-import type { DeepKeys, DeepValue, Narrow, Validator } from '@tanstack/form-core';
+import type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
 import type { Ref, SetupContext, SlotsType } from 'vue';
 import type { UseFieldOptions } from './types.js';
 declare module '@tanstack/form-core' {
@@ -7,32 +7,26 @@ declare module '@tanstack/form-core' {
         Field: FieldComponent<TParentData, TFormValidator>;
     }
 }
-export type UseField<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined>(opts?: {
-    name: Narrow<TName>;
-} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, DeepValue<TParentData, TName>>) => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, DeepValue<TParentData, TName>>;
+export type UseField<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(opts: Omit<UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>, 'form'>) => {
+    api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
+    state: Readonly<Ref<FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>['state']>>;
+};
 export declare function useField<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>): {
     api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
     state: Readonly<Ref<FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>['state']>>;
 };
-export type FieldValue<TParentData, TName> = TParentData extends any[] ? unknown extends TName ? TParentData[number] : DeepValue<TParentData[number], TName> : DeepValue<TParentData, TName>;
-type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = (TParentData extends any[] ? {
-    name?: TName;
-    index: number;
-} : {
-    name: TName;
-    index?: never;
-}) & Omit<UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>, 'name' | 'index'>;
-export type FieldComponent<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(fieldOptions: FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator>, context: SetupContext<{}, SlotsType<{
+type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>;
+export type FieldComponent<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(fieldOptions: Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator>, 'form'>, context: SetupContext<{}, SlotsType<{
     default: {
         field: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
         state: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>['state'];
     };
 }>>) => any;
-export declare const Field: <TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined>(props: import("@tanstack/form-core").FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, DeepValue<TParentData, TName>> & {
+export declare const Field: <TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined>(props: import("@tanstack/form-core").FieldApiOptions<TParentData, TName, TFieldValidator, TFormValidator, DeepValue<TParentData, TName>> & {
     mode?: "value" | "array" | undefined;
 } & ({
-    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
-} | {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+} | {
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
 })) => any;
 export {};

package/dist/esm/useField.js

@@ -1,13 +1,11 @@
 import { FieldApi } from "@tanstack/form-core";
 import { useStore } from "@tanstack/vue-store";
 import { onMounted, onUnmounted, watch, defineComponent } from "vue";
-import { useFormContext, provideFormContext } from "./formContext.js";
 function useField(opts) {
-  const { formApi, parentFieldName } = useFormContext();
   const fieldApi = (() => {
     const api = new FieldApi({
       ...opts,
-      form: formApi,
+      form: opts.form,
       name: opts.name
     });
     api.Field = Field;
@@ -24,7 +22,7 @@ function useField(opts) {
   watch(
     () => opts,
     () => {
-      fieldApi.update({ ...opts, form: formApi });
+      fieldApi.update({ ...opts, form: opts.form });
     }
   );
   return { api: fieldApi, state: fieldState };
@@ -32,10 +30,6 @@ function useField(opts) {
 const Field = defineComponent(
   (fieldOptions, context) => {
     const fieldApi = useField({ ...fieldOptions, ...context.attrs });
-    provideFormContext({
-      formApi: fieldApi.api.form,
-      parentFieldName: fieldApi.api.name
-    });
     return () => context.slots.default({
       field: fieldApi.api,
       state: fieldApi.state.value

package/dist/esm/useField.js.map

@@ -1 +1 @@
-{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport { provideFormContext, useFormContext } from './formContext'\nimport type {\n  DeepKeys,\n  DeepValue,\n  Narrow,\n  Validator,\n} from '@tanstack/form-core'\nimport type { Ref, SetupContext, SlotsType } from 'vue'\nimport type { UseFieldOptions } from './types'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    TFieldValidator extends\n      | Validator<DeepValue<TParentData, TName>, unknown>\n      | undefined = undefined,\n    TFormValidator extends\n      | Validator<TParentData, unknown>\n      | undefined = undefined,\n    TData = DeepValue<TParentData, TName>,\n  > {\n    Field: FieldComponent<TParentData, TFormValidator>\n  }\n}\n\nexport type UseField<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n>(\n  opts?: { name: Narrow<TName> } & UseFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    DeepValue<TParentData, TName>\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  DeepValue<TParentData, TName>\n>\n\nexport function useField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  opts: UseFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n): {\n  api: FieldApi<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n    // Omit<typeof opts, 'onMount'> & {\n    //   form: FormApi<TParentData>\n    // }\n  >\n  state: Readonly<\n    Ref<\n      FieldApi<\n        TParentData,\n        TName,\n        TFieldValidator,\n        TFormValidator,\n        TData\n      >['state']\n    >\n  >\n} {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const fieldApi = (() => {\n    const api = new FieldApi({\n      ...opts,\n      form: formApi,\n      name: opts.name,\n    } as never)\n\n    api.Field = Field as never\n\n    return api\n  })()\n\n  const fieldState = useStore(fieldApi.store, (state) => state)\n\n  let cleanup!: () => void\n  onMounted(() => {\n    cleanup = fieldApi.mount()\n  })\n\n  onUnmounted(() => {\n    cleanup()\n  })\n\n  watch(\n    () => opts,\n    () => {\n      // Keep options up to date as they are rendered\n      fieldApi.update({ ...opts, form: formApi } as never)\n    },\n  )\n\n  return { api: fieldApi, state: fieldState } as never\n}\n\nexport type FieldValue<TParentData, TName> = TParentData extends any[]\n  ? unknown extends TName\n    ? TParentData[number]\n    : DeepValue<TParentData[number], TName>\n  : DeepValue<TParentData, TName>\n\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = (TParentData extends any[]\n  ? {\n      name?: TName\n      index: number\n    }\n  : {\n      name: TName\n      index?: never\n    }) &\n  Omit<\n    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n    'name' | 'index'\n  >\n\nexport type FieldComponent<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  fieldOptions: FieldComponentProps<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator\n  >,\n  context: SetupContext<\n    {},\n    SlotsType<{\n      default: {\n        field: FieldApi<\n          TParentData,\n          TName,\n          TFieldValidator,\n          TFormValidator,\n          TData\n        >\n        state: FieldApi<\n          TParentData,\n          TName,\n          TFieldValidator,\n          TFormValidator,\n          TData\n        >['state']\n      }\n    }>\n  >,\n) => any\n\nexport const Field = defineComponent(\n  <\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    TFieldValidator extends\n      | Validator<DeepValue<TParentData, TName>, unknown>\n      | undefined = undefined,\n    TFormValidator extends\n      | Validator<TParentData, unknown>\n      | undefined = undefined,\n  >(\n    fieldOptions: UseFieldOptions<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator\n    >,\n    context: SetupContext,\n  ) => {\n    const fieldApi = useField({ ...fieldOptions, ...context.attrs } as any)\n\n    provideFormContext({\n      formApi: fieldApi.api.form,\n      parentFieldName: fieldApi.api.name,\n    } as never)\n\n    return () =>\n      context.slots.default!({\n        field: fieldApi.api,\n        state: fieldApi.state.value,\n      })\n  },\n  { name: 'Field', inheritAttrs: false },\n)\n"],"names":[],"mappings":";;;;AAwDO,SAAS,SAWd,MA6BA;AAEA,QAAM,EAAE,SAAS,gBAAgB,IAAI,eAAe;AAEpD,QAAM,YAAY,MAAM;AAChB,UAAA,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM;AAAA,MACN,MAAM,KAAK;AAAA,IAAA,CACH;AAEV,QAAI,QAAQ;AAEL,WAAA;AAAA,EAAA;AAGT,QAAM,aAAa,SAAS,SAAS,OAAO,CAAC,UAAU,KAAK;AAExD,MAAA;AACJ,YAAU,MAAM;AACd,cAAU,SAAS;EAAM,CAC1B;AAED,cAAY,MAAM;AACR;EAAA,CACT;AAED;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,eAAS,OAAO,EAAE,GAAG,MAAM,MAAM,SAAkB;AAAA,IACrD;AAAA,EAAA;AAGF,SAAO,EAAE,KAAK,UAAU,OAAO,WAAW;AAC5C;AAwEO,MAAM,QAAQ;AAAA,EACnB,CAUE,cAMA,YACG;AACG,UAAA,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,OAAc;AAEnD,uBAAA;AAAA,MACjB,SAAS,SAAS,IAAI;AAAA,MACtB,iBAAiB,SAAS,IAAI;AAAA,IAAA,CACtB;AAEH,WAAA,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS,MAAM;AAAA,IAAA,CACvB;AAAA,EACL;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAM;AACvC;"}
+{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport type {\n  DeepKeys,\n  DeepValue,\n  Narrow,\n  Validator,\n} from '@tanstack/form-core'\nimport type { Ref, SetupContext, SlotsType } from 'vue'\nimport type { UseFieldOptions } from './types'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    TFieldValidator extends\n      | Validator<DeepValue<TParentData, TName>, unknown>\n      | undefined = undefined,\n    TFormValidator extends\n      | Validator<TParentData, unknown>\n      | undefined = undefined,\n    TData = DeepValue<TParentData, TName>,\n  > {\n    Field: FieldComponent<TParentData, TFormValidator>\n  }\n}\n\nexport type UseField<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  opts: Omit<\n    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n    'form'\n  >,\n) => {\n  api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>\n  state: Readonly<\n    Ref<\n      FieldApi<\n        TParentData,\n        TName,\n        TFieldValidator,\n        TFormValidator,\n        TData\n      >['state']\n    >\n  >\n}\n\nexport function useField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  opts: UseFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n): {\n  api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>\n  state: Readonly<\n    Ref<\n      FieldApi<\n        TParentData,\n        TName,\n        TFieldValidator,\n        TFormValidator,\n        TData\n      >['state']\n    >\n  >\n} {\n  const fieldApi = (() => {\n    const api = new FieldApi({\n      ...opts,\n      form: opts.form,\n      name: opts.name,\n    } as never)\n\n    api.Field = Field as never\n\n    return api\n  })()\n\n  const fieldState = useStore(fieldApi.store, (state) => state)\n\n  let cleanup!: () => void\n  onMounted(() => {\n    cleanup = fieldApi.mount()\n  })\n\n  onUnmounted(() => {\n    cleanup()\n  })\n\n  watch(\n    () => opts,\n    () => {\n      // Keep options up to date as they are rendered\n      fieldApi.update({ ...opts, form: opts.form } as never)\n    },\n  )\n\n  return { api: fieldApi, state: fieldState } as never\n}\n\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>\n\nexport type FieldComponent<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  fieldOptions: Omit<\n    FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator>,\n    'form'\n  >,\n  context: SetupContext<\n    {},\n    SlotsType<{\n      default: {\n        field: FieldApi<\n          TParentData,\n          TName,\n          TFieldValidator,\n          TFormValidator,\n          TData\n        >\n        state: FieldApi<\n          TParentData,\n          TName,\n          TFieldValidator,\n          TFormValidator,\n          TData\n        >['state']\n      }\n    }>\n  >,\n) => any\n\nexport const Field = defineComponent(\n  <\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    TFieldValidator extends\n      | Validator<DeepValue<TParentData, TName>, unknown>\n      | undefined = undefined,\n    TFormValidator extends\n      | Validator<TParentData, unknown>\n      | undefined = undefined,\n  >(\n    fieldOptions: UseFieldOptions<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator\n    >,\n    context: SetupContext,\n  ) => {\n    const fieldApi = useField({ ...fieldOptions, ...context.attrs } as any)\n\n    return () =>\n      context.slots.default!({\n        field: fieldApi.api,\n        state: fieldApi.state.value,\n      })\n  },\n  { name: 'Field', inheritAttrs: false },\n)\n"],"names":[],"mappings":";;;AA4DO,SAAS,SAWd,MAoBA;AACA,QAAM,YAAY,MAAM;AAChB,UAAA,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACH;AAEV,QAAI,QAAQ;AAEL,WAAA;AAAA,EAAA;AAGT,QAAM,aAAa,SAAS,SAAS,OAAO,CAAC,UAAU,KAAK;AAExD,MAAA;AACJ,YAAU,MAAM;AACd,cAAU,SAAS;EAAM,CAC1B;AAED,cAAY,MAAM;AACR;EAAA,CACT;AAED;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,eAAS,OAAO,EAAE,GAAG,MAAM,MAAM,KAAK,MAAe;AAAA,IACvD;AAAA,EAAA;AAGF,SAAO,EAAE,KAAK,UAAU,OAAO,WAAW;AAC5C;AAoDO,MAAM,QAAQ;AAAA,EACnB,CAUE,cAMA,YACG;AACG,UAAA,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,OAAc;AAE/D,WAAA,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS,MAAM;AAAA,IAAA,CACvB;AAAA,EACL;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAM;AACvC;"}

package/dist/esm/useForm.d.ts

@@ -5,8 +5,6 @@ import type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue';
 import type { FieldComponent, UseField } from './useField.js';
 declare module '@tanstack/form-core' {
     interface FormApi<TFormData, TFormValidator> {
-        Provider: (props: Record<string, any> & {}) => any;
-        provideFormContext: () => void;
         Field: FieldComponent<TFormData, TFormValidator>;
         useField: UseField<TFormData, TFormValidator>;
         useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => Readonly<Ref<TSelected>>;

package/dist/esm/useForm.js

@@ -1,25 +1,24 @@
 import { FormApi } from "@tanstack/form-core";
 import { useStore } from "@tanstack/vue-store";
-import { defineComponent, onMounted } from "vue";
+import { defineComponent, h, onMounted } from "vue";
 import { Field, useField } from "./useField.js";
-import { provideFormContext } from "./formContext.js";
 function useForm(opts) {
   const formApi = (() => {
     const api = new FormApi(opts);
-    api.Provider = defineComponent(
-      (_, context) => {
-        onMounted(api.mount);
-        provideFormContext({ formApi });
-        return () => context.slots.default();
+    api.Field = defineComponent(
+      (props, context) => {
+        return () => h(
+          Field,
+          { ...props, ...context.attrs, form: api },
+          context.slots
+        );
       },
-      { name: "Provider" }
+      {
+        name: "APIField",
+        inheritAttrs: false
+      }
     );
-    api.provideFormContext = () => {
-      onMounted(api.mount);
-      provideFormContext({ formApi });
-    };
-    api.Field = Field;
-    api.useField = useField;
+    api.useField = (props) => useField({ ...props, form: api });
     api.useStore = (selector) => {
       return useStore(api.store, selector);
     };
@@ -37,6 +36,7 @@ function useForm(opts) {
     );
     return api;
   })();
+  onMounted(formApi.mount);
   formApi.update(opts);
   return formApi;
 }

package/dist/esm/useForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted } from 'vue'\nimport { Field, useField } from './useField'\nimport { provideFormContext } from './formContext'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/vue-store'\nimport type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue'\nimport type { FieldComponent, UseField } from './useField'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, TFormValidator> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData, TFormValidator>\n    useField: UseField<TFormData, TFormValidator>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => Readonly<Ref<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<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  opts?: FormOptions<TFormData, TFormValidator>,\n): FormApi<TFormData, TFormValidator> {\n  const formApi = (() => {\n    const api = new FormApi<TFormData, TFormValidator>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        onMounted(api.mount)\n        provideFormContext({ formApi: formApi as never })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\n      onMounted(api.mount)\n      provideFormContext({ formApi: formApi as never })\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"],"names":[],"mappings":";;;;;AAgCO,SAAS,QAId,MACoC;AACpC,QAAM,WAAW,MAAM;AACf,UAAA,MAAM,IAAI,QAAmC,IAAI;AAEvD,QAAI,WAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,kBAAU,IAAI,KAAK;AACA,2BAAA,EAAE,SAA2B;AACzC,eAAA,MAAM,QAAQ,MAAM;MAC7B;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IAAA;AAErB,QAAI,qBAAqB,MAAM;AAC7B,gBAAU,IAAI,KAAK;AACA,yBAAA,EAAE,SAA2B;AAAA,IAAA;AAElD,QAAI,QAAQ;AACZ,QAAI,WAAW;AACX,QAAA,WAAW,CAAC,aAAa;AACpB,aAAA,SAAS,IAAI,OAAgB,QAAiB;AAAA,IAAA;AAEvD,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,IAAA;AAGK,WAAA;AAAA,EAAA;AAIT,UAAQ,OAAO,IAAI;AAEZ,SAAA;AACT;"}
+{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, h, onMounted } from 'vue'\nimport { Field, useField } from './useField'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/vue-store'\nimport type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue'\nimport type { FieldComponent, UseField } from './useField'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, TFormValidator> {\n    Field: FieldComponent<TFormData, TFormValidator>\n    useField: UseField<TFormData, TFormValidator>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => Readonly<Ref<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<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  opts?: FormOptions<TFormData, TFormValidator>,\n): FormApi<TFormData, TFormValidator> {\n  const formApi = (() => {\n    const api = new FormApi<TFormData, TFormValidator>(opts)\n\n    api.Field = defineComponent(\n      (props, context) => {\n        return () =>\n          h(\n            Field as never,\n            { ...props, ...context.attrs, form: api },\n            context.slots,\n          )\n      },\n      {\n        name: 'APIField',\n        inheritAttrs: false,\n      },\n    )\n    api.useField = (props) => useField({ ...props, form: api })\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  onMounted(formApi.mount)\n\n  // formApi.useStore((state) => state.isSubmitting)\n  formApi.update(opts)\n\n  return formApi as never\n}\n"],"names":[],"mappings":";;;;AA6BO,SAAS,QAId,MACoC;AACpC,QAAM,WAAW,MAAM;AACf,UAAA,MAAM,IAAI,QAAmC,IAAI;AAEvD,QAAI,QAAQ;AAAA,MACV,CAAC,OAAO,YAAY;AAClB,eAAO,MACL;AAAA,UACE;AAAA,UACA,EAAE,GAAG,OAAO,GAAG,QAAQ,OAAO,MAAM,IAAI;AAAA,UACxC,QAAQ;AAAA,QAAA;AAAA,MAEd;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAChB;AAAA,IAAA;AAEE,QAAA,WAAW,CAAC,UAAU,SAAS,EAAE,GAAG,OAAO,MAAM,IAAA,CAAK;AACtD,QAAA,WAAW,CAAC,aAAa;AACpB,aAAA,SAAS,IAAI,OAAgB,QAAiB;AAAA,IAAA;AAEvD,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,IAAA;AAGK,WAAA;AAAA,EAAA;AAGT,YAAU,QAAQ,KAAK;AAGvB,UAAQ,OAAO,IAAI;AAEZ,SAAA;AACT;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-form",
-  "version": "0.13.7",
+  "version": "0.16.0",
   "description": "Powerful, type-safe forms for Vue.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -34,10 +34,10 @@
   ],
   "dependencies": {
     "@tanstack/vue-store": "^0.3.1",
-    "@tanstack/form-core": "0.13.7"
+    "@tanstack/form-core": "0.16.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.2",
+    "@vitejs/plugin-vue": "^5.0.4",
     "vue": "^3.3.4"
   },
   "peerDependencies": {

package/src/createFormFactory.ts

@@ -10,8 +10,8 @@ export type FormFactory<
   useForm: (
     opts?: FormOptions<TFormData, TFormValidator>,
   ) => FormApi<TFormData, TFormValidator>
-  useField: UseField<TFormData, TFormValidator>
-  Field: FieldComponent<TFormData, TFormValidator>
+  useField: typeof useField
+  Field: typeof Field
 }
 
 export function createFormFactory<
@@ -25,7 +25,7 @@ export function createFormFactory<
       const formOptions = Object.assign({}, defaultOpts, opts)
       return useForm<TFormData, TFormValidator>(formOptions)
     },
-    useField: useField as any,
-    Field: Field as any,
+    useField: useField,
+    Field: Field,
   }
 }

package/src/index.ts

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

package/src/tests/useField.test.tsx

@@ -1,9 +1,9 @@
-/// <reference lib="dom" />
+import { describe, expect, it, vi } from 'vitest'
 import { defineComponent, h } from 'vue'
 import { render, waitFor } from '@testing-library/vue'
-import '@testing-library/jest-dom'
+import '@testing-library/jest-dom/vitest'
 import userEvent from '@testing-library/user-event'
-import { createFormFactory, provideFormContext } from '../index'
+import { createFormFactory, useForm } from '../index'
 import { sleep } from './utils'
 import type { FieldApi } from '../index'
 
@@ -21,8 +21,6 @@ describe('useField', () => {
     const Comp = defineComponent(() => {
       const form = formFactory.useForm()
 
-      provideFormContext({ formApi: form })
-
       return () => (
         <form.Field name="firstName" defaultValue="FirstName">
           {({
@@ -60,8 +58,6 @@ describe('useField', () => {
     const Comp = defineComponent(() => {
       const form = formFactory.useForm()
 
-      provideFormContext({ formApi: form })
-
       return () => (
         <form.Field
           name="firstName"
@@ -109,8 +105,6 @@ describe('useField', () => {
     const Comp = defineComponent(() => {
       const form = formFactory.useForm()
 
-      provideFormContext({ formApi: form })
-
       return () => (
         <form.Field
           name="firstName"
@@ -159,8 +153,6 @@ describe('useField', () => {
     const Comp = defineComponent(() => {
       const form = formFactory.useForm()
 
-      provideFormContext({ formApi: form })
-
       return () => (
         <form.Field
           name="firstName"
@@ -215,8 +207,6 @@ describe('useField', () => {
     const Comp = defineComponent(() => {
       const form = formFactory.useForm()
 
-      provideFormContext({ formApi: form })
-
       return () => (
         <form.Field
           name="firstName"
@@ -260,4 +250,88 @@ describe('useField', () => {
     await waitFor(() => getByText(error))
     expect(getByText(error)).toBeInTheDocument()
   })
+
+  it('should handle arrays with subvalues', async () => {
+    const fn = vi.fn()
+
+    type CompVal = { people: Array<{ age: number; name: string }> }
+
+    const Comp = defineComponent(() => {
+      const form = useForm({
+        defaultValues: {
+          people: [],
+        } as CompVal,
+        onSubmit: ({ value }) => fn(value),
+      })
+
+      return () => (
+        <div>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              void form.handleSubmit()
+            }}
+          >
+            <form.Field name="people">
+              {({
+                field,
+              }: {
+                field: FieldApi<CompVal, 'people', never, never>
+              }) => (
+                <div>
+                  {field.state.value.map((_, i) => {
+                    return (
+                      <form.Field key={i} name={`people[${i}].name`}>
+                        {({
+                          field: subField,
+                        }: {
+                          field: FieldApi<
+                            CompVal,
+                            `people[${number}].name`,
+                            never,
+                            never
+                          >
+                        }) => (
+                          <div>
+                            <label>
+                              <div>Name for person {i}</div>
+                              <input
+                                value={subField.state.value}
+                                onChange={(e) =>
+                                  subField.handleChange(
+                                    (e.target as HTMLInputElement).value,
+                                  )
+                                }
+                              />
+                            </label>
+                          </div>
+                        )}
+                      </form.Field>
+                    )
+                  })}
+                  <button
+                    onClick={() => field.pushValue({ name: '', age: 0 })}
+                    type="button"
+                  >
+                    Add person
+                  </button>
+                </div>
+              )}
+            </form.Field>
+            <button type="submit">Submit</button>
+          </form>
+        </div>
+      )
+    })
+
+    const { queryByText, getByText, findByLabelText, findByText } = render(Comp)
+    expect(queryByText('Name for person 0')).not.toBeInTheDocument()
+    await user.click(getByText('Add person'))
+    const input = await findByLabelText('Name for person 0')
+    expect(input).toBeInTheDocument()
+    await user.type(input, 'John')
+    await user.click(await findByText('Submit'))
+    expect(fn).toHaveBeenCalledWith({ people: [{ name: 'John', age: 0 }] })
+  })
 })

package/src/tests/useForm.test.tsx

@@ -1,14 +1,8 @@
-/// <reference lib="dom" />
-import '@testing-library/jest-dom'
+import { describe, expect, it, vi } from 'vitest'
 import userEvent from '@testing-library/user-event'
 import { render, waitFor } from '@testing-library/vue'
 import { defineComponent, h, ref } from 'vue'
-import {
-  ValidationError,
-  createFormFactory,
-  provideFormContext,
-  useForm,
-} from '../index'
+import { createFormFactory, useForm } from '../index'
 import { sleep } from './utils'
 
 import type { FieldApi, ValidationErrorMap } from '../index'
@@ -27,8 +21,6 @@ describe('useForm', () => {
     const Comp = defineComponent(() => {
       const form = formFactory.useForm()
 
-      provideFormContext({ formApi: form })
-
       return () => (
         <form.Field name="firstName" defaultValue="">
           {({
@@ -66,7 +58,6 @@ describe('useForm', () => {
           lastName: 'LastName',
         },
       })
-      form.provideFormContext()
 
       return () => (
         <form.Field name="firstName">
@@ -96,7 +87,6 @@ describe('useForm', () => {
           submittedData.value = value
         },
       })
-      form.provideFormContext()
 
       return () => (
         <div>
@@ -153,8 +143,6 @@ describe('useForm', () => {
         },
       })
 
-      form.provideFormContext()
-
       return () =>
         mountForm.value ? (
           <div>
@@ -184,8 +172,6 @@ describe('useForm', () => {
         },
       })
 
-      form.provideFormContext()
-
       return () => (
         <div>
           <form.Field name="firstName">
@@ -234,8 +220,6 @@ describe('useForm', () => {
 
       const errors = form.useStore((s) => s.errors)
 
-      form.provideFormContext()
-
       return () => (
         <div>
           <form.Field name="firstName">
@@ -283,8 +267,6 @@ describe('useForm', () => {
 
       const errors = form.useStore((s) => s.errorMap)
 
-      form.provideFormContext()
-
       return () => (
         <div>
           <form.Field name="firstName" defaultMeta={{ isTouched: true }}>
@@ -341,8 +323,6 @@ describe('useForm', () => {
 
       const errors = form.useStore((s) => s.errorMap)
 
-      form.provideFormContext()
-
       return () => (
         <div>
           <form.Field name="firstName" defaultMeta={{ isTouched: true }}>
@@ -396,8 +376,6 @@ describe('useForm', () => {
 
       const errors = form.useStore((s) => s.errorMap)
 
-      form.provideFormContext()
-
       return () => (
         <div>
           <form.Field name="firstName" defaultMeta={{ isTouched: true }}>
@@ -453,8 +431,6 @@ describe('useForm', () => {
       })
       const errors = form.useStore((s) => s.errorMap)
 
-      form.provideFormContext()
-
       return () => (
         <div>
           <form.Field name="firstName" defaultMeta={{ isTouched: true }}>
@@ -513,8 +489,6 @@ describe('useForm', () => {
       })
       const errors = form.useStore((s) => s.errors)
 
-      form.provideFormContext()
-
       return () => (
         <div>
           <form.Field name="firstName" defaultMeta={{ isTouched: true }}>

package/src/types.ts

@@ -1,7 +1,7 @@
 import type {
   DeepKeys,
   DeepValue,
-  FieldOptions,
+  FieldApiOptions,
   Validator,
 } from '@tanstack/form-core'
 
@@ -15,6 +15,12 @@ export type UseFieldOptions<
     | Validator<TParentData, unknown>
     | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
-> = FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
+> = FieldApiOptions<
+  TParentData,
+  TName,
+  TFieldValidator,
+  TFormValidator,
+  TData
+> & {
   mode?: 'value' | 'array'
 }

package/src/useField.tsx

@@ -1,7 +1,6 @@
 import { FieldApi } from '@tanstack/form-core'
 import { useStore } from '@tanstack/vue-store'
 import { defineComponent, onMounted, onUnmounted, watch } from 'vue'
-import { provideFormContext, useFormContext } from './formContext'
 import type {
   DeepKeys,
   DeepValue,
@@ -38,21 +37,26 @@ export type UseField<
   TFieldValidator extends
     | Validator<DeepValue<TParentData, TName>, unknown>
     | undefined = undefined,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
 >(
-  opts?: { name: Narrow<TName> } & UseFieldOptions<
-    TParentData,
-    TName,
-    TFieldValidator,
-    TFormValidator,
-    DeepValue<TParentData, TName>
+  opts: Omit<
+    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,
+    'form'
   >,
-) => FieldApi<
-  TParentData,
-  TName,
-  TFieldValidator,
-  TFormValidator,
-  DeepValue<TParentData, TName>
->
+) => {
+  api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>
+  state: Readonly<
+    Ref<
+      FieldApi<
+        TParentData,
+        TName,
+        TFieldValidator,
+        TFormValidator,
+        TData
+      >['state']
+    >
+  >
+}
 
 export function useField<
   TParentData,
@@ -73,16 +77,7 @@ export function useField<
     TData
   >,
 ): {
-  api: FieldApi<
-    TParentData,
-    TName,
-    TFieldValidator,
-    TFormValidator,
-    TData
-    // Omit<typeof opts, 'onMount'> & {
-    //   form: FormApi<TParentData>
-    // }
-  >
+  api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>
   state: Readonly<
     Ref<
       FieldApi<
@@ -95,13 +90,10 @@ export function useField<
     >
   >
 } {
-  // Get the form API either manually or from context
-  const { formApi, parentFieldName } = useFormContext()
-
   const fieldApi = (() => {
     const api = new FieldApi({
       ...opts,
-      form: formApi,
+      form: opts.form,
       name: opts.name,
     } as never)
 
@@ -125,19 +117,13 @@ export function useField<
     () => opts,
     () => {
       // Keep options up to date as they are rendered
-      fieldApi.update({ ...opts, form: formApi } as never)
+      fieldApi.update({ ...opts, form: opts.form } as never)
     },
   )
 
   return { api: fieldApi, state: fieldState } as never
 }
 
-export type FieldValue<TParentData, TName> = TParentData extends any[]
-  ? unknown extends TName
-    ? TParentData[number]
-    : DeepValue<TParentData[number], TName>
-  : DeepValue<TParentData, TName>
-
 type FieldComponentProps<
   TParentData,
   TName extends DeepKeys<TParentData>,
@@ -147,19 +133,7 @@ type FieldComponentProps<
   TFormValidator extends
     | Validator<TParentData, unknown>
     | undefined = undefined,
-> = (TParentData extends any[]
-  ? {
-      name?: TName
-      index: number
-    }
-  : {
-      name: TName
-      index?: never
-    }) &
-  Omit<
-    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,
-    'name' | 'index'
-  >
+> = UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>
 
 export type FieldComponent<
   TParentData,
@@ -173,11 +147,9 @@ export type FieldComponent<
     | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
 >(
-  fieldOptions: FieldComponentProps<
-    TParentData,
-    TName,
-    TFieldValidator,
-    TFormValidator
+  fieldOptions: Omit<
+    FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator>,
+    'form'
   >,
   context: SetupContext<
     {},
@@ -223,11 +195,6 @@ export const Field = defineComponent(
   ) => {
     const fieldApi = useField({ ...fieldOptions, ...context.attrs } as any)
 
-    provideFormContext({
-      formApi: fieldApi.api.form,
-      parentFieldName: fieldApi.api.name,
-    } as never)
-
     return () =>
       context.slots.default!({
         field: fieldApi.api,

package/src/useForm.tsx

@@ -1,8 +1,7 @@
 import { FormApi } from '@tanstack/form-core'
 import { useStore } from '@tanstack/vue-store'
-import { defineComponent, onMounted } from 'vue'
+import { defineComponent, h, onMounted } from 'vue'
 import { Field, useField } from './useField'
-import { provideFormContext } from './formContext'
 import type { FormOptions, FormState, Validator } from '@tanstack/form-core'
 import type { NoInfer } from '@tanstack/vue-store'
 import type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue'
@@ -11,8 +10,6 @@ import type { FieldComponent, UseField } from './useField'
 declare module '@tanstack/form-core' {
   // eslint-disable-next-line no-shadow
   interface FormApi<TFormData, TFormValidator> {
-    Provider: (props: Record<string, any> & {}) => any
-    provideFormContext: () => void
     Field: FieldComponent<TFormData, TFormValidator>
     useField: UseField<TFormData, TFormValidator>
     useStore: <TSelected = NoInfer<FormState<TFormData>>>(
@@ -39,20 +36,21 @@ export function useForm<
   const formApi = (() => {
     const api = new FormApi<TFormData, TFormValidator>(opts)
 
-    api.Provider = defineComponent(
-      (_, context) => {
-        onMounted(api.mount)
-        provideFormContext({ formApi: formApi as never })
-        return () => context.slots.default!()
+    api.Field = defineComponent(
+      (props, context) => {
+        return () =>
+          h(
+            Field as never,
+            { ...props, ...context.attrs, form: api },
+            context.slots,
+          )
+      },
+      {
+        name: 'APIField',
+        inheritAttrs: false,
       },
-      { name: 'Provider' },
     )
-    api.provideFormContext = () => {
-      onMounted(api.mount)
-      provideFormContext({ formApi: formApi as never })
-    }
-    api.Field = Field as never
-    api.useField = useField as never
+    api.useField = (props) => useField({ ...props, form: api })
     api.useStore = (selector) => {
       return useStore(api.store as never, selector as never) as never
     }
@@ -72,6 +70,8 @@ export function useForm<
     return api
   })()
 
+  onMounted(formApi.mount)
+
   // formApi.useStore((state) => state.isSubmitting)
   formApi.update(opts)
 

package/dist/cjs/formContext.cjs

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const vue = require("vue");
-const formContext = Symbol("FormContext");
-function provideFormContext(val) {
-  vue.provide(formContext, val);
-}
-function useFormContext() {
-  const formApi = vue.inject(formContext);
-  if (!formApi) {
-    throw new Error(`You are trying to use the form API outside of a form!`);
-  }
-  return formApi;
-}
-exports.formContext = formContext;
-exports.provideFormContext = provideFormContext;
-exports.useFormContext = useFormContext;
-//# sourceMappingURL=formContext.cjs.map

package/dist/cjs/formContext.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"formContext.cjs","sources":["../../src/formContext.ts"],"sourcesContent":["import { inject, provide } from 'vue'\nimport type { FormApi, Validator } from '@tanstack/form-core'\n\nexport type FormContext<\n  TFormData = any,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = {\n  formApi: FormApi<TFormData, TFormValidator>\n  parentFieldName?: string\n} | null\n\nexport const formContext = Symbol('FormContext')\n\nexport function provideFormContext<\n  TFormData = any,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(val: FormContext<TFormData, TFormValidator>) {\n  provide(formContext, val)\n}\n\nexport function useFormContext() {\n  const formApi = inject(formContext) as FormContext\n\n  if (!formApi) {\n    throw new Error(`You are trying to use the form API outside of a form!`)\n  }\n\n  return formApi\n}\n"],"names":["provide","inject"],"mappings":";;;AAWa,MAAA,cAAc,OAAO,aAAa;AAExC,SAAS,mBAGd,KAA6C;AAC7CA,cAAQ,aAAa,GAAG;AAC1B;AAEO,SAAS,iBAAiB;AACzB,QAAA,UAAUC,WAAO,WAAW;AAElC,MAAI,CAAC,SAAS;AACN,UAAA,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEO,SAAA;AACT;;;;"}

package/dist/cjs/formContext.d.cts

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

package/dist/esm/formContext.d.ts

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

package/dist/esm/formContext.js

@@ -1,18 +0,0 @@
-import { provide, inject } from "vue";
-const formContext = Symbol("FormContext");
-function provideFormContext(val) {
-  provide(formContext, val);
-}
-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;
-}
-export {
-  formContext,
-  provideFormContext,
-  useFormContext
-};
-//# sourceMappingURL=formContext.js.map

package/dist/esm/formContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"formContext.js","sources":["../../src/formContext.ts"],"sourcesContent":["import { inject, provide } from 'vue'\nimport type { FormApi, Validator } from '@tanstack/form-core'\n\nexport type FormContext<\n  TFormData = any,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = {\n  formApi: FormApi<TFormData, TFormValidator>\n  parentFieldName?: string\n} | null\n\nexport const formContext = Symbol('FormContext')\n\nexport function provideFormContext<\n  TFormData = any,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(val: FormContext<TFormData, TFormValidator>) {\n  provide(formContext, val)\n}\n\nexport function useFormContext() {\n  const formApi = inject(formContext) as FormContext\n\n  if (!formApi) {\n    throw new Error(`You are trying to use the form API outside of a form!`)\n  }\n\n  return formApi\n}\n"],"names":[],"mappings":";AAWa,MAAA,cAAc,OAAO,aAAa;AAExC,SAAS,mBAGd,KAA6C;AAC7C,UAAQ,aAAa,GAAG;AAC1B;AAEO,SAAS,iBAAiB;AACzB,QAAA,UAAU,OAAO,WAAW;AAElC,MAAI,CAAC,SAAS;AACN,UAAA,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEO,SAAA;AACT;"}

package/src/formContext.ts

@@ -1,29 +0,0 @@
-import { inject, provide } from 'vue'
-import type { FormApi, Validator } from '@tanstack/form-core'
-
-export type FormContext<
-  TFormData = any,
-  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
-> = {
-  formApi: FormApi<TFormData, TFormValidator>
-  parentFieldName?: string
-} | null
-
-export const formContext = Symbol('FormContext')
-
-export function provideFormContext<
-  TFormData = any,
-  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
->(val: FormContext<TFormData, TFormValidator>) {
-  provide(formContext, val)
-}
-
-export function useFormContext() {
-  const formApi = inject(formContext) as FormContext
-
-  if (!formApi) {
-    throw new Error(`You are trying to use the form API outside of a form!`)
-  }
-
-  return formApi
-}