@tanstack/react-form 0.0.12 → 0.0.14

package/build/lib/useForm.cjs

@@ -42,7 +42,9 @@ function useForm(opts) {
     return api;
   });
   formApi.useStore(state => state.isSubmitting);
-  formApi.update(opts);
+  React.useEffect(() => {
+    formApi.update(opts);
+  }, [formApi, opts]);
   return formApi;
 }
 

package/build/lib/useForm.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import type { FormState, FormOptions } from '@tanstack/form-core'\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/react-store'\nimport { useStore } from '@tanstack/react-store'\nimport React from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\n\nexport type FormSubmitEvent = React.FormEvent<HTMLFormElement>\n\ndeclare module '@tanstack/form-core' {\n  interface Register {\n    FormSubmitEvent: FormSubmitEvent\n  }\n\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: { children: any }) => any\n    getFormProps: () => FormProps\n    Field: FieldComponent<TFormData, TFormData>\n    useField: UseField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      children:\n        | ((state: NoInfer<TSelected>) => React.ReactNode)\n        | React.ReactNode\n    }) => any\n  }\n}\n\nexport type FormProps = {\n  onSubmit: (e: FormSubmitEvent) => void\n  disabled: boolean\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const [formApi] = React.useState(() => {\n    // @ts-ignore\n    const api = new FormApi<TData>(opts)\n\n    // eslint-disable-next-line react/display-name\n    api.Provider = (props) => (\n      <formContext.Provider {...props} value={{ formApi: api }} />\n    )\n    api.getFormProps = () => {\n      return {\n        onSubmit: formApi.handleSubmit,\n        disabled: api.state.isSubmitting,\n      }\n    }\n    api.Field = Field as any\n    api.useField = useField as any\n    api.useStore = (\n      // @ts-ignore\n      selector,\n    ) => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      return useStore(api.store as any, selector as any) as any\n    }\n    api.Subscribe = (\n      // @ts-ignore\n      props,\n    ) => {\n      return functionalUpdate(\n        props.children,\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useStore(api.store as any, props.selector as any),\n      ) as any\n    }\n\n    return api\n  })\n\n  formApi.useStore((state) => state.isSubmitting)\n  formApi.update(opts)\n\n  return formApi as any\n}\n"],"names":["useForm","opts","formApi","React","useState","api","FormApi","Provider","props","createElement","formContext","_extends","value","getFormProps","onSubmit","handleSubmit","disabled","state","isSubmitting","Field","useField","useStore","selector","store","Subscribe","functionalUpdate","children","update"],"mappings":";;;;;;;;;AAsCO,SAASA,OAAOA,CAAQC,IAAyB,EAAkB;EACxE,MAAM,CAACC,OAAO,CAAC,GAAGC,KAAK,CAACC,QAAQ,CAAC,MAAM;AACrC;AACA,IAAA,MAAMC,GAAG,GAAG,IAAIC,gBAAO,CAAQL,IAAI,CAAC,CAAA;;AAEpC;AACAI,IAAAA,GAAG,CAACE,QAAQ,GAAIC,KAAK,iBACnBL,KAAA,CAAAM,aAAA,CAACC,uBAAW,CAACH,QAAQ,EAAAI,iCAAA,KAAKH,KAAK,EAAA;AAAEI,MAAAA,KAAK,EAAE;AAAEV,QAAAA,OAAO,EAAEG,GAAAA;AAAI,OAAA;AAAE,KAAA,CAAE,CAC5D,CAAA;IACDA,GAAG,CAACQ,YAAY,GAAG,MAAM;MACvB,OAAO;QACLC,QAAQ,EAAEZ,OAAO,CAACa,YAAY;AAC9BC,QAAAA,QAAQ,EAAEX,GAAG,CAACY,KAAK,CAACC,YAAAA;OACrB,CAAA;KACF,CAAA;IACDb,GAAG,CAACc,KAAK,GAAGA,cAAY,CAAA;IACxBd,GAAG,CAACe,QAAQ,GAAGA,iBAAe,CAAA;IAC9Bf,GAAG,CAACgB,QAAQ,GAAG;AACb;AACAC,IAAAA,QAAQ,KACL;AACH;AACA,MAAA,OAAOD,mBAAQ,CAAChB,GAAG,CAACkB,KAAK,EAASD,QAAe,CAAC,CAAA;KACnD,CAAA;IACDjB,GAAG,CAACmB,SAAS,GAAG;AACd;AACAhB,IAAAA,KAAK,KACF;AACH,MAAA,OAAOiB,yBAAgB,CACrBjB,KAAK,CAACkB,QAAQ;AACd;MACAL,mBAAQ,CAAChB,GAAG,CAACkB,KAAK,EAASf,KAAK,CAACc,QAAe,CAClD,CAAC,CAAA;KACF,CAAA;AAED,IAAA,OAAOjB,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;EAEFH,OAAO,CAACmB,QAAQ,CAAEJ,KAAK,IAAKA,KAAK,CAACC,YAAY,CAAC,CAAA;AAC/ChB,EAAAA,OAAO,CAACyB,MAAM,CAAC1B,IAAI,CAAC,CAAA;AAEpB,EAAA,OAAOC,OAAO,CAAA;AAChB;;;;"}
+{"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import type { FormState, FormOptions } from '@tanstack/form-core'\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/react-store'\nimport { useStore } from '@tanstack/react-store'\nimport React from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\n\nexport type FormSubmitEvent = React.FormEvent<HTMLFormElement>\n\ndeclare module '@tanstack/form-core' {\n  interface Register {\n    FormSubmitEvent: FormSubmitEvent\n  }\n\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: { children: any }) => any\n    getFormProps: () => FormProps\n    Field: FieldComponent<TFormData, TFormData>\n    useField: UseField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      children:\n        | ((state: NoInfer<TSelected>) => React.ReactNode)\n        | React.ReactNode\n    }) => any\n  }\n}\n\nexport type FormProps = {\n  onSubmit: (e: FormSubmitEvent) => void\n  disabled: boolean\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const [formApi] = React.useState(() => {\n    // @ts-ignore\n    const api = new FormApi<TData>(opts)\n\n    // eslint-disable-next-line react/display-name\n    api.Provider = (props) => (\n      <formContext.Provider {...props} value={{ formApi: api }} />\n    )\n    api.getFormProps = () => {\n      return {\n        onSubmit: formApi.handleSubmit,\n        disabled: api.state.isSubmitting,\n      }\n    }\n    api.Field = Field as any\n    api.useField = useField as any\n    api.useStore = (\n      // @ts-ignore\n      selector,\n    ) => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      return useStore(api.store as any, selector as any) as any\n    }\n    api.Subscribe = (\n      // @ts-ignore\n      props,\n    ) => {\n      return functionalUpdate(\n        props.children,\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useStore(api.store as any, props.selector as any),\n      ) as any\n    }\n\n    return api\n  })\n\n  formApi.useStore((state) => state.isSubmitting)\n\n  React.useEffect(() => {\n    formApi.update(opts)\n  }, [formApi, opts])\n\n  return formApi as any\n}\n"],"names":["useForm","opts","formApi","React","useState","api","FormApi","Provider","props","createElement","formContext","_extends","value","getFormProps","onSubmit","handleSubmit","disabled","state","isSubmitting","Field","useField","useStore","selector","store","Subscribe","functionalUpdate","children","useEffect","update"],"mappings":";;;;;;;;;AAsCO,SAASA,OAAOA,CAAQC,IAAyB,EAAkB;EACxE,MAAM,CAACC,OAAO,CAAC,GAAGC,KAAK,CAACC,QAAQ,CAAC,MAAM;AACrC;AACA,IAAA,MAAMC,GAAG,GAAG,IAAIC,gBAAO,CAAQL,IAAI,CAAC,CAAA;;AAEpC;AACAI,IAAAA,GAAG,CAACE,QAAQ,GAAIC,KAAK,iBACnBL,KAAA,CAAAM,aAAA,CAACC,uBAAW,CAACH,QAAQ,EAAAI,iCAAA,KAAKH,KAAK,EAAA;AAAEI,MAAAA,KAAK,EAAE;AAAEV,QAAAA,OAAO,EAAEG,GAAAA;AAAI,OAAA;AAAE,KAAA,CAAE,CAC5D,CAAA;IACDA,GAAG,CAACQ,YAAY,GAAG,MAAM;MACvB,OAAO;QACLC,QAAQ,EAAEZ,OAAO,CAACa,YAAY;AAC9BC,QAAAA,QAAQ,EAAEX,GAAG,CAACY,KAAK,CAACC,YAAAA;OACrB,CAAA;KACF,CAAA;IACDb,GAAG,CAACc,KAAK,GAAGA,cAAY,CAAA;IACxBd,GAAG,CAACe,QAAQ,GAAGA,iBAAe,CAAA;IAC9Bf,GAAG,CAACgB,QAAQ,GAAG;AACb;AACAC,IAAAA,QAAQ,KACL;AACH;AACA,MAAA,OAAOD,mBAAQ,CAAChB,GAAG,CAACkB,KAAK,EAASD,QAAe,CAAC,CAAA;KACnD,CAAA;IACDjB,GAAG,CAACmB,SAAS,GAAG;AACd;AACAhB,IAAAA,KAAK,KACF;AACH,MAAA,OAAOiB,yBAAgB,CACrBjB,KAAK,CAACkB,QAAQ;AACd;MACAL,mBAAQ,CAAChB,GAAG,CAACkB,KAAK,EAASf,KAAK,CAACc,QAAe,CAClD,CAAC,CAAA;KACF,CAAA;AAED,IAAA,OAAOjB,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;EAEFH,OAAO,CAACmB,QAAQ,CAAEJ,KAAK,IAAKA,KAAK,CAACC,YAAY,CAAC,CAAA;EAE/Cf,KAAK,CAACwB,SAAS,CAAC,MAAM;AACpBzB,IAAAA,OAAO,CAAC0B,MAAM,CAAC3B,IAAI,CAAC,CAAA;AACtB,GAAC,EAAE,CAACC,OAAO,EAAED,IAAI,CAAC,CAAC,CAAA;AAEnB,EAAA,OAAOC,OAAO,CAAA;AAChB;;;;"}

package/build/lib/useForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../src/useForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjE,OAAO,EAAE,OAAO,EAAoB,MAAM,qBAAqB,CAAA;AAC/D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAmB,MAAM,YAAY,CAAA;AAGhF,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,CAAA;AAE9D,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,QAAQ;QAChB,eAAe,EAAE,eAAe,CAAA;KACjC;IAGD,UAAU,OAAO,CAAC,SAAS;QACzB,QAAQ,EAAE,CAAC,KAAK,EAAE;YAAE,QAAQ,EAAE,GAAG,CAAA;SAAE,KAAK,GAAG,CAAA;QAC3C,YAAY,EAAE,MAAM,SAAS,CAAA;QAC7B,KAAK,EAAE,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;QAC3C,QAAQ,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;QAC7B,QAAQ,EAAE,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,EAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,KAAK,SAAS,KAC3D,SAAS,CAAA;QACd,SAAS,EAAE,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE;YAC5D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,KAAK,SAAS,CAAA;YAC9D,QAAQ,EACJ,CAAC,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAChD,KAAK,CAAC,SAAS,CAAA;SACpB,KAAK,GAAG,CAAA;KACV;CACF;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,CAAC,CAAC,EAAE,eAAe,KAAK,IAAI,CAAA;IACtC,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CA0CxE"}
+{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../src/useForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjE,OAAO,EAAE,OAAO,EAAoB,MAAM,qBAAqB,CAAA;AAC/D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAmB,MAAM,YAAY,CAAA;AAGhF,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,CAAA;AAE9D,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,QAAQ;QAChB,eAAe,EAAE,eAAe,CAAA;KACjC;IAGD,UAAU,OAAO,CAAC,SAAS;QACzB,QAAQ,EAAE,CAAC,KAAK,EAAE;YAAE,QAAQ,EAAE,GAAG,CAAA;SAAE,KAAK,GAAG,CAAA;QAC3C,YAAY,EAAE,MAAM,SAAS,CAAA;QAC7B,KAAK,EAAE,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;QAC3C,QAAQ,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;QAC7B,QAAQ,EAAE,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,EAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,KAAK,SAAS,KAC3D,SAAS,CAAA;QACd,SAAS,EAAE,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE;YAC5D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,KAAK,SAAS,CAAA;YAC9D,QAAQ,EACJ,CAAC,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAChD,KAAK,CAAC,SAAS,CAAA;SACpB,KAAK,GAAG,CAAA;KACV;CACF;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,CAAC,CAAC,EAAE,eAAe,KAAK,IAAI,CAAA;IACtC,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CA6CxE"}

package/build/lib/useForm.js

@@ -40,7 +40,9 @@ function useForm(opts) {
     return api;
   });
   formApi.useStore(state => state.isSubmitting);
-  formApi.update(opts);
+  React__default.useEffect(() => {
+    formApi.update(opts);
+  }, [formApi, opts]);
   return formApi;
 }
 

package/build/lib/useForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import type { FormState, FormOptions } from '@tanstack/form-core'\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/react-store'\nimport { useStore } from '@tanstack/react-store'\nimport React from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\n\nexport type FormSubmitEvent = React.FormEvent<HTMLFormElement>\n\ndeclare module '@tanstack/form-core' {\n  interface Register {\n    FormSubmitEvent: FormSubmitEvent\n  }\n\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: { children: any }) => any\n    getFormProps: () => FormProps\n    Field: FieldComponent<TFormData, TFormData>\n    useField: UseField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      children:\n        | ((state: NoInfer<TSelected>) => React.ReactNode)\n        | React.ReactNode\n    }) => any\n  }\n}\n\nexport type FormProps = {\n  onSubmit: (e: FormSubmitEvent) => void\n  disabled: boolean\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const [formApi] = React.useState(() => {\n    // @ts-ignore\n    const api = new FormApi<TData>(opts)\n\n    // eslint-disable-next-line react/display-name\n    api.Provider = (props) => (\n      <formContext.Provider {...props} value={{ formApi: api }} />\n    )\n    api.getFormProps = () => {\n      return {\n        onSubmit: formApi.handleSubmit,\n        disabled: api.state.isSubmitting,\n      }\n    }\n    api.Field = Field as any\n    api.useField = useField as any\n    api.useStore = (\n      // @ts-ignore\n      selector,\n    ) => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      return useStore(api.store as any, selector as any) as any\n    }\n    api.Subscribe = (\n      // @ts-ignore\n      props,\n    ) => {\n      return functionalUpdate(\n        props.children,\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useStore(api.store as any, props.selector as any),\n      ) as any\n    }\n\n    return api\n  })\n\n  formApi.useStore((state) => state.isSubmitting)\n  formApi.update(opts)\n\n  return formApi as any\n}\n"],"names":["useForm","opts","formApi","React","useState","api","FormApi","Provider","props","createElement","formContext","_extends","value","getFormProps","onSubmit","handleSubmit","disabled","state","isSubmitting","Field","useField","useStore","selector","store","Subscribe","functionalUpdate","children","update"],"mappings":";;;;;;;AAsCO,SAASA,OAAOA,CAAQC,IAAyB,EAAkB;EACxE,MAAM,CAACC,OAAO,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAC,MAAM;AACrC;AACA,IAAA,MAAMC,GAAG,GAAG,IAAIC,OAAO,CAAQL,IAAI,CAAC,CAAA;;AAEpC;AACAI,IAAAA,GAAG,CAACE,QAAQ,GAAIC,KAAK,iBACnBL,cAAA,CAAAM,aAAA,CAACC,WAAW,CAACH,QAAQ,EAAAI,QAAA,KAAKH,KAAK,EAAA;AAAEI,MAAAA,KAAK,EAAE;AAAEV,QAAAA,OAAO,EAAEG,GAAAA;AAAI,OAAA;AAAE,KAAA,CAAE,CAC5D,CAAA;IACDA,GAAG,CAACQ,YAAY,GAAG,MAAM;MACvB,OAAO;QACLC,QAAQ,EAAEZ,OAAO,CAACa,YAAY;AAC9BC,QAAAA,QAAQ,EAAEX,GAAG,CAACY,KAAK,CAACC,YAAAA;OACrB,CAAA;KACF,CAAA;IACDb,GAAG,CAACc,KAAK,GAAGA,KAAY,CAAA;IACxBd,GAAG,CAACe,QAAQ,GAAGA,QAAe,CAAA;IAC9Bf,GAAG,CAACgB,QAAQ,GAAG;AACb;AACAC,IAAAA,QAAQ,KACL;AACH;AACA,MAAA,OAAOD,QAAQ,CAAChB,GAAG,CAACkB,KAAK,EAASD,QAAe,CAAC,CAAA;KACnD,CAAA;IACDjB,GAAG,CAACmB,SAAS,GAAG;AACd;AACAhB,IAAAA,KAAK,KACF;AACH,MAAA,OAAOiB,gBAAgB,CACrBjB,KAAK,CAACkB,QAAQ;AACd;MACAL,QAAQ,CAAChB,GAAG,CAACkB,KAAK,EAASf,KAAK,CAACc,QAAe,CAClD,CAAC,CAAA;KACF,CAAA;AAED,IAAA,OAAOjB,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;EAEFH,OAAO,CAACmB,QAAQ,CAAEJ,KAAK,IAAKA,KAAK,CAACC,YAAY,CAAC,CAAA;AAC/ChB,EAAAA,OAAO,CAACyB,MAAM,CAAC1B,IAAI,CAAC,CAAA;AAEpB,EAAA,OAAOC,OAAO,CAAA;AAChB;;;;"}
+{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import type { FormState, FormOptions } from '@tanstack/form-core'\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/react-store'\nimport { useStore } from '@tanstack/react-store'\nimport React from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\n\nexport type FormSubmitEvent = React.FormEvent<HTMLFormElement>\n\ndeclare module '@tanstack/form-core' {\n  interface Register {\n    FormSubmitEvent: FormSubmitEvent\n  }\n\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: { children: any }) => any\n    getFormProps: () => FormProps\n    Field: FieldComponent<TFormData, TFormData>\n    useField: UseField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      children:\n        | ((state: NoInfer<TSelected>) => React.ReactNode)\n        | React.ReactNode\n    }) => any\n  }\n}\n\nexport type FormProps = {\n  onSubmit: (e: FormSubmitEvent) => void\n  disabled: boolean\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const [formApi] = React.useState(() => {\n    // @ts-ignore\n    const api = new FormApi<TData>(opts)\n\n    // eslint-disable-next-line react/display-name\n    api.Provider = (props) => (\n      <formContext.Provider {...props} value={{ formApi: api }} />\n    )\n    api.getFormProps = () => {\n      return {\n        onSubmit: formApi.handleSubmit,\n        disabled: api.state.isSubmitting,\n      }\n    }\n    api.Field = Field as any\n    api.useField = useField as any\n    api.useStore = (\n      // @ts-ignore\n      selector,\n    ) => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      return useStore(api.store as any, selector as any) as any\n    }\n    api.Subscribe = (\n      // @ts-ignore\n      props,\n    ) => {\n      return functionalUpdate(\n        props.children,\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useStore(api.store as any, props.selector as any),\n      ) as any\n    }\n\n    return api\n  })\n\n  formApi.useStore((state) => state.isSubmitting)\n\n  React.useEffect(() => {\n    formApi.update(opts)\n  }, [formApi, opts])\n\n  return formApi as any\n}\n"],"names":["useForm","opts","formApi","React","useState","api","FormApi","Provider","props","createElement","formContext","_extends","value","getFormProps","onSubmit","handleSubmit","disabled","state","isSubmitting","Field","useField","useStore","selector","store","Subscribe","functionalUpdate","children","useEffect","update"],"mappings":";;;;;;;AAsCO,SAASA,OAAOA,CAAQC,IAAyB,EAAkB;EACxE,MAAM,CAACC,OAAO,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAC,MAAM;AACrC;AACA,IAAA,MAAMC,GAAG,GAAG,IAAIC,OAAO,CAAQL,IAAI,CAAC,CAAA;;AAEpC;AACAI,IAAAA,GAAG,CAACE,QAAQ,GAAIC,KAAK,iBACnBL,cAAA,CAAAM,aAAA,CAACC,WAAW,CAACH,QAAQ,EAAAI,QAAA,KAAKH,KAAK,EAAA;AAAEI,MAAAA,KAAK,EAAE;AAAEV,QAAAA,OAAO,EAAEG,GAAAA;AAAI,OAAA;AAAE,KAAA,CAAE,CAC5D,CAAA;IACDA,GAAG,CAACQ,YAAY,GAAG,MAAM;MACvB,OAAO;QACLC,QAAQ,EAAEZ,OAAO,CAACa,YAAY;AAC9BC,QAAAA,QAAQ,EAAEX,GAAG,CAACY,KAAK,CAACC,YAAAA;OACrB,CAAA;KACF,CAAA;IACDb,GAAG,CAACc,KAAK,GAAGA,KAAY,CAAA;IACxBd,GAAG,CAACe,QAAQ,GAAGA,QAAe,CAAA;IAC9Bf,GAAG,CAACgB,QAAQ,GAAG;AACb;AACAC,IAAAA,QAAQ,KACL;AACH;AACA,MAAA,OAAOD,QAAQ,CAAChB,GAAG,CAACkB,KAAK,EAASD,QAAe,CAAC,CAAA;KACnD,CAAA;IACDjB,GAAG,CAACmB,SAAS,GAAG;AACd;AACAhB,IAAAA,KAAK,KACF;AACH,MAAA,OAAOiB,gBAAgB,CACrBjB,KAAK,CAACkB,QAAQ;AACd;MACAL,QAAQ,CAAChB,GAAG,CAACkB,KAAK,EAASf,KAAK,CAACc,QAAe,CAClD,CAAC,CAAA;KACF,CAAA;AAED,IAAA,OAAOjB,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;EAEFH,OAAO,CAACmB,QAAQ,CAAEJ,KAAK,IAAKA,KAAK,CAACC,YAAY,CAAC,CAAA;EAE/Cf,cAAK,CAACwB,SAAS,CAAC,MAAM;AACpBzB,IAAAA,OAAO,CAAC0B,MAAM,CAAC3B,IAAI,CAAC,CAAA;AACtB,GAAC,EAAE,CAACC,OAAO,EAAED,IAAI,CAAC,CAAC,CAAA;AAEnB,EAAA,OAAOC,OAAO,CAAA;AAChB;;;;"}

package/build/lib/useForm.legacy.cjs

@@ -42,7 +42,9 @@ function useForm(opts) {
     return api;
   });
   formApi.useStore(state => state.isSubmitting);
-  formApi.update(opts);
+  React.useEffect(() => {
+    formApi.update(opts);
+  }, [formApi, opts]);
   return formApi;
 }
 

package/build/lib/useForm.legacy.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.legacy.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import type { FormState, FormOptions } from '@tanstack/form-core'\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/react-store'\nimport { useStore } from '@tanstack/react-store'\nimport React from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\n\nexport type FormSubmitEvent = React.FormEvent<HTMLFormElement>\n\ndeclare module '@tanstack/form-core' {\n  interface Register {\n    FormSubmitEvent: FormSubmitEvent\n  }\n\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: { children: any }) => any\n    getFormProps: () => FormProps\n    Field: FieldComponent<TFormData, TFormData>\n    useField: UseField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      children:\n        | ((state: NoInfer<TSelected>) => React.ReactNode)\n        | React.ReactNode\n    }) => any\n  }\n}\n\nexport type FormProps = {\n  onSubmit: (e: FormSubmitEvent) => void\n  disabled: boolean\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const [formApi] = React.useState(() => {\n    // @ts-ignore\n    const api = new FormApi<TData>(opts)\n\n    // eslint-disable-next-line react/display-name\n    api.Provider = (props) => (\n      <formContext.Provider {...props} value={{ formApi: api }} />\n    )\n    api.getFormProps = () => {\n      return {\n        onSubmit: formApi.handleSubmit,\n        disabled: api.state.isSubmitting,\n      }\n    }\n    api.Field = Field as any\n    api.useField = useField as any\n    api.useStore = (\n      // @ts-ignore\n      selector,\n    ) => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      return useStore(api.store as any, selector as any) as any\n    }\n    api.Subscribe = (\n      // @ts-ignore\n      props,\n    ) => {\n      return functionalUpdate(\n        props.children,\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useStore(api.store as any, props.selector as any),\n      ) as any\n    }\n\n    return api\n  })\n\n  formApi.useStore((state) => state.isSubmitting)\n  formApi.update(opts)\n\n  return formApi as any\n}\n"],"names":["useForm","opts","formApi","React","useState","api","FormApi","Provider","props","createElement","formContext","_extends","value","getFormProps","onSubmit","handleSubmit","disabled","state","isSubmitting","Field","useField","useStore","selector","store","Subscribe","functionalUpdate","children","update"],"mappings":";;;;;;;;;AAsCO,SAASA,OAAOA,CAAQC,IAAyB,EAAkB;EACxE,MAAM,CAACC,OAAO,CAAC,GAAGC,KAAK,CAACC,QAAQ,CAAC,MAAM;AACrC;AACA,IAAA,MAAMC,GAAG,GAAG,IAAIC,gBAAO,CAAQL,IAAI,CAAC,CAAA;;AAEpC;AACAI,IAAAA,GAAG,CAACE,QAAQ,GAAIC,KAAK,iBACnBL,KAAA,CAAAM,aAAA,CAACC,uBAAW,CAACH,QAAQ,EAAAI,iCAAA,KAAKH,KAAK,EAAA;AAAEI,MAAAA,KAAK,EAAE;AAAEV,QAAAA,OAAO,EAAEG,GAAAA;AAAI,OAAA;AAAE,KAAA,CAAE,CAC5D,CAAA;IACDA,GAAG,CAACQ,YAAY,GAAG,MAAM;MACvB,OAAO;QACLC,QAAQ,EAAEZ,OAAO,CAACa,YAAY;AAC9BC,QAAAA,QAAQ,EAAEX,GAAG,CAACY,KAAK,CAACC,YAAAA;OACrB,CAAA;KACF,CAAA;IACDb,GAAG,CAACc,KAAK,GAAGA,cAAY,CAAA;IACxBd,GAAG,CAACe,QAAQ,GAAGA,iBAAe,CAAA;IAC9Bf,GAAG,CAACgB,QAAQ,GAAG;AACb;AACAC,IAAAA,QAAQ,KACL;AACH;AACA,MAAA,OAAOD,mBAAQ,CAAChB,GAAG,CAACkB,KAAK,EAASD,QAAe,CAAC,CAAA;KACnD,CAAA;IACDjB,GAAG,CAACmB,SAAS,GAAG;AACd;AACAhB,IAAAA,KAAK,KACF;AACH,MAAA,OAAOiB,yBAAgB,CACrBjB,KAAK,CAACkB,QAAQ;AACd;MACAL,mBAAQ,CAAChB,GAAG,CAACkB,KAAK,EAASf,KAAK,CAACc,QAAe,CAClD,CAAC,CAAA;KACF,CAAA;AAED,IAAA,OAAOjB,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;EAEFH,OAAO,CAACmB,QAAQ,CAAEJ,KAAK,IAAKA,KAAK,CAACC,YAAY,CAAC,CAAA;AAC/ChB,EAAAA,OAAO,CAACyB,MAAM,CAAC1B,IAAI,CAAC,CAAA;AAEpB,EAAA,OAAOC,OAAO,CAAA;AAChB;;;;"}
+{"version":3,"file":"useForm.legacy.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import type { FormState, FormOptions } from '@tanstack/form-core'\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/react-store'\nimport { useStore } from '@tanstack/react-store'\nimport React from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\n\nexport type FormSubmitEvent = React.FormEvent<HTMLFormElement>\n\ndeclare module '@tanstack/form-core' {\n  interface Register {\n    FormSubmitEvent: FormSubmitEvent\n  }\n\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: { children: any }) => any\n    getFormProps: () => FormProps\n    Field: FieldComponent<TFormData, TFormData>\n    useField: UseField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      children:\n        | ((state: NoInfer<TSelected>) => React.ReactNode)\n        | React.ReactNode\n    }) => any\n  }\n}\n\nexport type FormProps = {\n  onSubmit: (e: FormSubmitEvent) => void\n  disabled: boolean\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const [formApi] = React.useState(() => {\n    // @ts-ignore\n    const api = new FormApi<TData>(opts)\n\n    // eslint-disable-next-line react/display-name\n    api.Provider = (props) => (\n      <formContext.Provider {...props} value={{ formApi: api }} />\n    )\n    api.getFormProps = () => {\n      return {\n        onSubmit: formApi.handleSubmit,\n        disabled: api.state.isSubmitting,\n      }\n    }\n    api.Field = Field as any\n    api.useField = useField as any\n    api.useStore = (\n      // @ts-ignore\n      selector,\n    ) => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      return useStore(api.store as any, selector as any) as any\n    }\n    api.Subscribe = (\n      // @ts-ignore\n      props,\n    ) => {\n      return functionalUpdate(\n        props.children,\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useStore(api.store as any, props.selector as any),\n      ) as any\n    }\n\n    return api\n  })\n\n  formApi.useStore((state) => state.isSubmitting)\n\n  React.useEffect(() => {\n    formApi.update(opts)\n  }, [formApi, opts])\n\n  return formApi as any\n}\n"],"names":["useForm","opts","formApi","React","useState","api","FormApi","Provider","props","createElement","formContext","_extends","value","getFormProps","onSubmit","handleSubmit","disabled","state","isSubmitting","Field","useField","useStore","selector","store","Subscribe","functionalUpdate","children","useEffect","update"],"mappings":";;;;;;;;;AAsCO,SAASA,OAAOA,CAAQC,IAAyB,EAAkB;EACxE,MAAM,CAACC,OAAO,CAAC,GAAGC,KAAK,CAACC,QAAQ,CAAC,MAAM;AACrC;AACA,IAAA,MAAMC,GAAG,GAAG,IAAIC,gBAAO,CAAQL,IAAI,CAAC,CAAA;;AAEpC;AACAI,IAAAA,GAAG,CAACE,QAAQ,GAAIC,KAAK,iBACnBL,KAAA,CAAAM,aAAA,CAACC,uBAAW,CAACH,QAAQ,EAAAI,iCAAA,KAAKH,KAAK,EAAA;AAAEI,MAAAA,KAAK,EAAE;AAAEV,QAAAA,OAAO,EAAEG,GAAAA;AAAI,OAAA;AAAE,KAAA,CAAE,CAC5D,CAAA;IACDA,GAAG,CAACQ,YAAY,GAAG,MAAM;MACvB,OAAO;QACLC,QAAQ,EAAEZ,OAAO,CAACa,YAAY;AAC9BC,QAAAA,QAAQ,EAAEX,GAAG,CAACY,KAAK,CAACC,YAAAA;OACrB,CAAA;KACF,CAAA;IACDb,GAAG,CAACc,KAAK,GAAGA,cAAY,CAAA;IACxBd,GAAG,CAACe,QAAQ,GAAGA,iBAAe,CAAA;IAC9Bf,GAAG,CAACgB,QAAQ,GAAG;AACb;AACAC,IAAAA,QAAQ,KACL;AACH;AACA,MAAA,OAAOD,mBAAQ,CAAChB,GAAG,CAACkB,KAAK,EAASD,QAAe,CAAC,CAAA;KACnD,CAAA;IACDjB,GAAG,CAACmB,SAAS,GAAG;AACd;AACAhB,IAAAA,KAAK,KACF;AACH,MAAA,OAAOiB,yBAAgB,CACrBjB,KAAK,CAACkB,QAAQ;AACd;MACAL,mBAAQ,CAAChB,GAAG,CAACkB,KAAK,EAASf,KAAK,CAACc,QAAe,CAClD,CAAC,CAAA;KACF,CAAA;AAED,IAAA,OAAOjB,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;EAEFH,OAAO,CAACmB,QAAQ,CAAEJ,KAAK,IAAKA,KAAK,CAACC,YAAY,CAAC,CAAA;EAE/Cf,KAAK,CAACwB,SAAS,CAAC,MAAM;AACpBzB,IAAAA,OAAO,CAAC0B,MAAM,CAAC3B,IAAI,CAAC,CAAA;AACtB,GAAC,EAAE,CAACC,OAAO,EAAED,IAAI,CAAC,CAAC,CAAA;AAEnB,EAAA,OAAOC,OAAO,CAAA;AAChB;;;;"}

package/build/lib/useForm.legacy.js

@@ -40,7 +40,9 @@ function useForm(opts) {
     return api;
   });
   formApi.useStore(state => state.isSubmitting);
-  formApi.update(opts);
+  React__default.useEffect(() => {
+    formApi.update(opts);
+  }, [formApi, opts]);
   return formApi;
 }
 

package/build/lib/useForm.legacy.js.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.legacy.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import type { FormState, FormOptions } from '@tanstack/form-core'\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/react-store'\nimport { useStore } from '@tanstack/react-store'\nimport React from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\n\nexport type FormSubmitEvent = React.FormEvent<HTMLFormElement>\n\ndeclare module '@tanstack/form-core' {\n  interface Register {\n    FormSubmitEvent: FormSubmitEvent\n  }\n\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: { children: any }) => any\n    getFormProps: () => FormProps\n    Field: FieldComponent<TFormData, TFormData>\n    useField: UseField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      children:\n        | ((state: NoInfer<TSelected>) => React.ReactNode)\n        | React.ReactNode\n    }) => any\n  }\n}\n\nexport type FormProps = {\n  onSubmit: (e: FormSubmitEvent) => void\n  disabled: boolean\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const [formApi] = React.useState(() => {\n    // @ts-ignore\n    const api = new FormApi<TData>(opts)\n\n    // eslint-disable-next-line react/display-name\n    api.Provider = (props) => (\n      <formContext.Provider {...props} value={{ formApi: api }} />\n    )\n    api.getFormProps = () => {\n      return {\n        onSubmit: formApi.handleSubmit,\n        disabled: api.state.isSubmitting,\n      }\n    }\n    api.Field = Field as any\n    api.useField = useField as any\n    api.useStore = (\n      // @ts-ignore\n      selector,\n    ) => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      return useStore(api.store as any, selector as any) as any\n    }\n    api.Subscribe = (\n      // @ts-ignore\n      props,\n    ) => {\n      return functionalUpdate(\n        props.children,\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useStore(api.store as any, props.selector as any),\n      ) as any\n    }\n\n    return api\n  })\n\n  formApi.useStore((state) => state.isSubmitting)\n  formApi.update(opts)\n\n  return formApi as any\n}\n"],"names":["useForm","opts","formApi","React","useState","api","FormApi","Provider","props","createElement","formContext","_extends","value","getFormProps","onSubmit","handleSubmit","disabled","state","isSubmitting","Field","useField","useStore","selector","store","Subscribe","functionalUpdate","children","update"],"mappings":";;;;;;;AAsCO,SAASA,OAAOA,CAAQC,IAAyB,EAAkB;EACxE,MAAM,CAACC,OAAO,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAC,MAAM;AACrC;AACA,IAAA,MAAMC,GAAG,GAAG,IAAIC,OAAO,CAAQL,IAAI,CAAC,CAAA;;AAEpC;AACAI,IAAAA,GAAG,CAACE,QAAQ,GAAIC,KAAK,iBACnBL,cAAA,CAAAM,aAAA,CAACC,WAAW,CAACH,QAAQ,EAAAI,QAAA,KAAKH,KAAK,EAAA;AAAEI,MAAAA,KAAK,EAAE;AAAEV,QAAAA,OAAO,EAAEG,GAAAA;AAAI,OAAA;AAAE,KAAA,CAAE,CAC5D,CAAA;IACDA,GAAG,CAACQ,YAAY,GAAG,MAAM;MACvB,OAAO;QACLC,QAAQ,EAAEZ,OAAO,CAACa,YAAY;AAC9BC,QAAAA,QAAQ,EAAEX,GAAG,CAACY,KAAK,CAACC,YAAAA;OACrB,CAAA;KACF,CAAA;IACDb,GAAG,CAACc,KAAK,GAAGA,KAAY,CAAA;IACxBd,GAAG,CAACe,QAAQ,GAAGA,QAAe,CAAA;IAC9Bf,GAAG,CAACgB,QAAQ,GAAG;AACb;AACAC,IAAAA,QAAQ,KACL;AACH;AACA,MAAA,OAAOD,QAAQ,CAAChB,GAAG,CAACkB,KAAK,EAASD,QAAe,CAAC,CAAA;KACnD,CAAA;IACDjB,GAAG,CAACmB,SAAS,GAAG;AACd;AACAhB,IAAAA,KAAK,KACF;AACH,MAAA,OAAOiB,gBAAgB,CACrBjB,KAAK,CAACkB,QAAQ;AACd;MACAL,QAAQ,CAAChB,GAAG,CAACkB,KAAK,EAASf,KAAK,CAACc,QAAe,CAClD,CAAC,CAAA;KACF,CAAA;AAED,IAAA,OAAOjB,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;EAEFH,OAAO,CAACmB,QAAQ,CAAEJ,KAAK,IAAKA,KAAK,CAACC,YAAY,CAAC,CAAA;AAC/ChB,EAAAA,OAAO,CAACyB,MAAM,CAAC1B,IAAI,CAAC,CAAA;AAEpB,EAAA,OAAOC,OAAO,CAAA;AAChB;;;;"}
+{"version":3,"file":"useForm.legacy.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import type { FormState, FormOptions } from '@tanstack/form-core'\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/react-store'\nimport { useStore } from '@tanstack/react-store'\nimport React from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\n\nexport type FormSubmitEvent = React.FormEvent<HTMLFormElement>\n\ndeclare module '@tanstack/form-core' {\n  interface Register {\n    FormSubmitEvent: FormSubmitEvent\n  }\n\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: { children: any }) => any\n    getFormProps: () => FormProps\n    Field: FieldComponent<TFormData, TFormData>\n    useField: UseField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      children:\n        | ((state: NoInfer<TSelected>) => React.ReactNode)\n        | React.ReactNode\n    }) => any\n  }\n}\n\nexport type FormProps = {\n  onSubmit: (e: FormSubmitEvent) => void\n  disabled: boolean\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const [formApi] = React.useState(() => {\n    // @ts-ignore\n    const api = new FormApi<TData>(opts)\n\n    // eslint-disable-next-line react/display-name\n    api.Provider = (props) => (\n      <formContext.Provider {...props} value={{ formApi: api }} />\n    )\n    api.getFormProps = () => {\n      return {\n        onSubmit: formApi.handleSubmit,\n        disabled: api.state.isSubmitting,\n      }\n    }\n    api.Field = Field as any\n    api.useField = useField as any\n    api.useStore = (\n      // @ts-ignore\n      selector,\n    ) => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      return useStore(api.store as any, selector as any) as any\n    }\n    api.Subscribe = (\n      // @ts-ignore\n      props,\n    ) => {\n      return functionalUpdate(\n        props.children,\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useStore(api.store as any, props.selector as any),\n      ) as any\n    }\n\n    return api\n  })\n\n  formApi.useStore((state) => state.isSubmitting)\n\n  React.useEffect(() => {\n    formApi.update(opts)\n  }, [formApi, opts])\n\n  return formApi as any\n}\n"],"names":["useForm","opts","formApi","React","useState","api","FormApi","Provider","props","createElement","formContext","_extends","value","getFormProps","onSubmit","handleSubmit","disabled","state","isSubmitting","Field","useField","useStore","selector","store","Subscribe","functionalUpdate","children","useEffect","update"],"mappings":";;;;;;;AAsCO,SAASA,OAAOA,CAAQC,IAAyB,EAAkB;EACxE,MAAM,CAACC,OAAO,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAC,MAAM;AACrC;AACA,IAAA,MAAMC,GAAG,GAAG,IAAIC,OAAO,CAAQL,IAAI,CAAC,CAAA;;AAEpC;AACAI,IAAAA,GAAG,CAACE,QAAQ,GAAIC,KAAK,iBACnBL,cAAA,CAAAM,aAAA,CAACC,WAAW,CAACH,QAAQ,EAAAI,QAAA,KAAKH,KAAK,EAAA;AAAEI,MAAAA,KAAK,EAAE;AAAEV,QAAAA,OAAO,EAAEG,GAAAA;AAAI,OAAA;AAAE,KAAA,CAAE,CAC5D,CAAA;IACDA,GAAG,CAACQ,YAAY,GAAG,MAAM;MACvB,OAAO;QACLC,QAAQ,EAAEZ,OAAO,CAACa,YAAY;AAC9BC,QAAAA,QAAQ,EAAEX,GAAG,CAACY,KAAK,CAACC,YAAAA;OACrB,CAAA;KACF,CAAA;IACDb,GAAG,CAACc,KAAK,GAAGA,KAAY,CAAA;IACxBd,GAAG,CAACe,QAAQ,GAAGA,QAAe,CAAA;IAC9Bf,GAAG,CAACgB,QAAQ,GAAG;AACb;AACAC,IAAAA,QAAQ,KACL;AACH;AACA,MAAA,OAAOD,QAAQ,CAAChB,GAAG,CAACkB,KAAK,EAASD,QAAe,CAAC,CAAA;KACnD,CAAA;IACDjB,GAAG,CAACmB,SAAS,GAAG;AACd;AACAhB,IAAAA,KAAK,KACF;AACH,MAAA,OAAOiB,gBAAgB,CACrBjB,KAAK,CAACkB,QAAQ;AACd;MACAL,QAAQ,CAAChB,GAAG,CAACkB,KAAK,EAASf,KAAK,CAACc,QAAe,CAClD,CAAC,CAAA;KACF,CAAA;AAED,IAAA,OAAOjB,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;EAEFH,OAAO,CAACmB,QAAQ,CAAEJ,KAAK,IAAKA,KAAK,CAACC,YAAY,CAAC,CAAA;EAE/Cf,cAAK,CAACwB,SAAS,CAAC,MAAM;AACpBzB,IAAAA,OAAO,CAAC0B,MAAM,CAAC3B,IAAI,CAAC,CAAA;AACtB,GAAC,EAAE,CAACC,OAAO,EAAED,IAAI,CAAC,CAAC,CAAA;AAEnB,EAAA,OAAOC,OAAO,CAAA;AAChB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-form",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "Powerful, type-safe forms for React.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@tanstack/react-store": "0.0.1-beta.85",
-    "@tanstack/form-core": "0.0.12"
+    "@tanstack/form-core": "0.0.14"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",

package/src/useForm.tsx

@@ -75,7 +75,10 @@ export function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {
   })
 
   formApi.useStore((state) => state.isSubmitting)
-  formApi.update(opts)
+
+  React.useEffect(() => {
+    formApi.update(opts)
+  }, [formApi, opts])
 
   return formApi as any
 }