@tanstack/vue-form 0.6.1 → 0.7.1

package/build/legacy/useForm.cjs

@@ -33,6 +33,7 @@ function useForm(opts) {
     const api = new import_form_core.FormApi(opts);
     api.Provider = (0, import_vue_demi.defineComponent)(
       (_, context) => {
+        (0, import_vue_demi.onMounted)(formApi.mount);
         (0, import_formContext.provideFormContext)({ formApi });
         return () => context.slots.default();
       },

package/build/legacy/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, ValidatorType> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData, ValidatorType>\n    useField: UseField<TFormData, ValidatorType>\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, FormValidator>(\n  opts?: FormOptions<TData, FormValidator>,\n): FormApi<TData, FormValidator> {\n  const formApi = (() => {\n    const api = new FormApi<TData, FormValidator>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        provideFormContext({ formApi: formApi as never })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0D;AAC1D,uBAAuC;AACvC,sBAAoE;AACpE,yBAAmC;AACnC,sBAKO;AAwBA,SAAS,QACd,MAC+B;AAC/B,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,yBAA8B,IAAI;AAElD,QAAI,eAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,mDAAmB,EAAE,QAA0B,CAAC;AAChD,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,iDAAmB,EAAE,QAA0B,CAAC;AAAA,IAClD;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  onMounted,\n} from 'vue-demi'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, ValidatorType> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData, ValidatorType>\n    useField: UseField<TFormData, ValidatorType>\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, FormValidator>(\n  opts?: FormOptions<TData, FormValidator>,\n): FormApi<TData, FormValidator> {\n  const formApi = (() => {\n    const api = new FormApi<TData, FormValidator>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        onMounted(formApi.mount)\n        provideFormContext({ formApi: formApi as never })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0D;AAC1D,uBAAuC;AACvC,sBAAoE;AACpE,yBAAmC;AACnC,sBAMO;AAwBA,SAAS,QACd,MAC+B;AAC/B,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,yBAA8B,IAAI;AAElD,QAAI,eAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,uCAAU,QAAQ,KAAK;AACvB,mDAAmB,EAAE,QAA0B,CAAC;AAChD,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,iDAAmB,EAAE,QAA0B,CAAC;AAAA,IAClD;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/legacy/useForm.js

@@ -4,13 +4,15 @@ import { useStore } from "@tanstack/vue-store";
 import { Field, useField } from "./useField.js";
 import { provideFormContext } from "./formContext.js";
 import {
-  defineComponent
+  defineComponent,
+  onMounted
 } from "vue-demi";
 function useForm(opts) {
   const formApi = (() => {
     const api = new FormApi(opts);
     api.Provider = defineComponent(
       (_, context) => {
+        onMounted(formApi.mount);
         provideFormContext({ formApi });
         return () => context.slots.default();
       },

package/build/legacy/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, ValidatorType> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData, ValidatorType>\n    useField: UseField<TFormData, ValidatorType>\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, FormValidator>(\n  opts?: FormOptions<TData, FormValidator>,\n): FormApi<TData, FormValidator> {\n  const formApi = (() => {\n    const api = new FormApi<TData, FormValidator>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        provideFormContext({ formApi: formApi as never })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\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"],"mappings":";AAAA,SAAS,eAAiD;AAC1D,SAAuB,gBAAgB;AACvC,SAA6C,OAAO,gBAAgB;AACpE,SAAS,0BAA0B;AACnC;AAAA,EAIE;AAAA,OACK;AAwBA,SAAS,QACd,MAC+B;AAC/B,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,QAA8B,IAAI;AAElD,QAAI,WAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,2BAAmB,EAAE,QAA0B,CAAC;AAChD,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,yBAAmB,EAAE,QAA0B,CAAC;AAAA,IAClD;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  onMounted,\n} from 'vue-demi'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, ValidatorType> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData, ValidatorType>\n    useField: UseField<TFormData, ValidatorType>\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, FormValidator>(\n  opts?: FormOptions<TData, FormValidator>,\n): FormApi<TData, FormValidator> {\n  const formApi = (() => {\n    const api = new FormApi<TData, FormValidator>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        onMounted(formApi.mount)\n        provideFormContext({ formApi: formApi as never })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\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"],"mappings":";AAAA,SAAS,eAAiD;AAC1D,SAAuB,gBAAgB;AACvC,SAA6C,OAAO,gBAAgB;AACpE,SAAS,0BAA0B;AACnC;AAAA,EAIE;AAAA,EACA;AAAA,OACK;AAwBA,SAAS,QACd,MAC+B;AAC/B,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,QAA8B,IAAI;AAElD,QAAI,WAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,kBAAU,QAAQ,KAAK;AACvB,2BAAmB,EAAE,QAA0B,CAAC;AAChD,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,yBAAmB,EAAE,QAA0B,CAAC;AAAA,IAClD;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/build/modern/useForm.cjs

@@ -33,6 +33,7 @@ function useForm(opts) {
     const api = new import_form_core.FormApi(opts);
     api.Provider = (0, import_vue_demi.defineComponent)(
       (_, context) => {
+        (0, import_vue_demi.onMounted)(formApi.mount);
         (0, import_formContext.provideFormContext)({ formApi });
         return () => context.slots.default();
       },

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, ValidatorType> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData, ValidatorType>\n    useField: UseField<TFormData, ValidatorType>\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, FormValidator>(\n  opts?: FormOptions<TData, FormValidator>,\n): FormApi<TData, FormValidator> {\n  const formApi = (() => {\n    const api = new FormApi<TData, FormValidator>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        provideFormContext({ formApi: formApi as never })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0D;AAC1D,uBAAuC;AACvC,sBAAoE;AACpE,yBAAmC;AACnC,sBAKO;AAwBA,SAAS,QACd,MAC+B;AAC/B,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,yBAA8B,IAAI;AAElD,QAAI,eAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,mDAAmB,EAAE,QAA0B,CAAC;AAChD,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,iDAAmB,EAAE,QAA0B,CAAC;AAAA,IAClD;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  onMounted,\n} from 'vue-demi'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, ValidatorType> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData, ValidatorType>\n    useField: UseField<TFormData, ValidatorType>\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, FormValidator>(\n  opts?: FormOptions<TData, FormValidator>,\n): FormApi<TData, FormValidator> {\n  const formApi = (() => {\n    const api = new FormApi<TData, FormValidator>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        onMounted(formApi.mount)\n        provideFormContext({ formApi: formApi as never })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0D;AAC1D,uBAAuC;AACvC,sBAAoE;AACpE,yBAAmC;AACnC,sBAMO;AAwBA,SAAS,QACd,MAC+B;AAC/B,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,yBAA8B,IAAI;AAElD,QAAI,eAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,uCAAU,QAAQ,KAAK;AACvB,mDAAmB,EAAE,QAA0B,CAAC;AAChD,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,iDAAmB,EAAE,QAA0B,CAAC;AAAA,IAClD;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.js

@@ -4,13 +4,15 @@ import { useStore } from "@tanstack/vue-store";
 import { Field, useField } from "./useField.js";
 import { provideFormContext } from "./formContext.js";
 import {
-  defineComponent
+  defineComponent,
+  onMounted
 } from "vue-demi";
 function useForm(opts) {
   const formApi = (() => {
     const api = new FormApi(opts);
     api.Provider = defineComponent(
       (_, context) => {
+        onMounted(formApi.mount);
         provideFormContext({ formApi });
         return () => context.slots.default();
       },

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, ValidatorType> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData, ValidatorType>\n    useField: UseField<TFormData, ValidatorType>\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, FormValidator>(\n  opts?: FormOptions<TData, FormValidator>,\n): FormApi<TData, FormValidator> {\n  const formApi = (() => {\n    const api = new FormApi<TData, FormValidator>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        provideFormContext({ formApi: formApi as never })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\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"],"mappings":";AAAA,SAAS,eAAiD;AAC1D,SAAuB,gBAAgB;AACvC,SAA6C,OAAO,gBAAgB;AACpE,SAAS,0BAA0B;AACnC;AAAA,EAIE;AAAA,OACK;AAwBA,SAAS,QACd,MAC+B;AAC/B,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,QAA8B,IAAI;AAElD,QAAI,WAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,2BAAmB,EAAE,QAA0B,CAAC;AAChD,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,yBAAmB,EAAE,QAA0B,CAAC;AAAA,IAClD;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  onMounted,\n} from 'vue-demi'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, ValidatorType> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData, ValidatorType>\n    useField: UseField<TFormData, ValidatorType>\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, FormValidator>(\n  opts?: FormOptions<TData, FormValidator>,\n): FormApi<TData, FormValidator> {\n  const formApi = (() => {\n    const api = new FormApi<TData, FormValidator>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        onMounted(formApi.mount)\n        provideFormContext({ formApi: formApi as never })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\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"],"mappings":";AAAA,SAAS,eAAiD;AAC1D,SAAuB,gBAAgB;AACvC,SAA6C,OAAO,gBAAgB;AACpE,SAAS,0BAA0B;AACnC;AAAA,EAIE;AAAA,EACA;AAAA,OACK;AAwBA,SAAS,QACd,MAC+B;AAC/B,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,QAA8B,IAAI;AAElD,QAAI,WAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,kBAAU,QAAQ,KAAK;AACvB,2BAAmB,EAAE,QAA0B,CAAC;AAChD,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,yBAAmB,EAAE,QAA0B,CAAC;AAAA,IAClD;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.6.1",
+  "version": "0.7.1",
   "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.6.1"
+    "@tanstack/form-core": "0.7.1"
   },
   "devDependencies": {
     "@vue/composition-api": "1.7.2",

package/src/tests/useForm.test.tsx

@@ -138,4 +138,35 @@ describe('useForm', () => {
       expect(getByText('Submitted data: OtherName')).toBeInTheDocument(),
     )
   })
+
+  it('should run on form mount', async () => {
+    const Comp = defineComponent(() => {
+      const formMounted = ref(false)
+      const mountForm = ref(false)
+
+      const form = useForm({
+        defaultValues: {
+          firstName: 'FirstName',
+        },
+        onMount: () => {
+          formMounted.value = true
+          return undefined
+        },
+      })
+      form.provideFormContext()
+
+      return () =>
+        mountForm.value ? (
+          <form.Provider>
+            <h1>{formMounted.value ? 'Form mounted' : 'Not mounted'}</h1>
+          </form.Provider>
+        ) : (
+          <button onClick={() => (mountForm.value = true)}>Mount form</button>
+        )
+    })
+
+    const { getByText, findByText } = render(Comp)
+    await user.click(getByText('Mount form'))
+    expect(await findByText('Form mounted')).toBeInTheDocument()
+  })
 })

package/src/useForm.tsx

@@ -7,6 +7,7 @@ import {
   type SlotsType,
   type SetupContext,
   defineComponent,
+  onMounted,
 } from 'vue-demi'
 
 declare module '@tanstack/form-core' {
@@ -39,6 +40,7 @@ export function useForm<TData, FormValidator>(
 
     api.Provider = defineComponent(
       (_, context) => {
+        onMounted(formApi.mount)
         provideFormContext({ formApi: formApi as never })
         return () => context.slots.default!()
       },