@tanstack/react-form 0.1.1 → 0.1.3

package/build/lib/types.d.ts

@@ -0,0 +1,5 @@
+import type { FieldOptions } from '@tanstack/form-core';
+export type UseFieldOptions<TData, TFormData> = FieldOptions<TData, TFormData> & {
+    mode?: 'value' | 'array';
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAEvD,MAAM,MAAM,eAAe,CAAC,KAAK,EAAE,SAAS,IAAI,YAAY,CAC1D,KAAK,EACL,SAAS,CACV,GAAG;IACF,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CACzB,CAAA"}

package/build/lib/useField.cjs

@@ -4,25 +4,7 @@ var React = require('react');
 var reactStore = require('@tanstack/react-store');
 var formCore = require('@tanstack/form-core');
 var formContext = require('./formContext.cjs');
-
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var useIsomorphicLayoutEffect = require('./utils/useIsomorphicLayoutEffect.cjs');
 
 function useField(opts) {
   // Get the form API either manually or from context
@@ -30,7 +12,7 @@ function useField(opts) {
     formApi,
     parentFieldName
   } = formContext.useFormContext();
-  const [fieldApi] = React__namespace.useState(() => {
+  const [fieldApi] = React.useState(() => {
     const name = (typeof opts.index === 'number' ? [parentFieldName, opts.index, opts.name] : [parentFieldName, opts.name]).filter(d => d !== undefined).join('.');
     const api = new formCore.FieldApi({
       ...opts,
@@ -41,17 +23,22 @@ function useField(opts) {
     return api;
   });
 
-  // Keep options up to date as they are rendered
-  fieldApi.update({
-    ...opts,
-    form: formApi
+  /**
+   * fieldApi.update should not have any side effects. Think of it like a `useRef`
+   * that we need to keep updated every render with the most up-to-date information.
+   */
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    fieldApi.update({
+      ...opts,
+      form: formApi
+    });
   });
   reactStore.useStore(fieldApi.store, opts.mode === 'array' ? state => {
     return [state.meta, Object.keys(state.value || []).length];
   } : undefined);
 
   // Instantiates field meta and removes it when unrendered
-  React__namespace.useEffect(() => fieldApi.mount(), [fieldApi]);
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => fieldApi.mount(), [fieldApi]);
   return fieldApi;
 }
 
@@ -82,7 +69,7 @@ function Field({
   ...fieldOptions
 }) {
   const fieldApi = useField(fieldOptions);
-  return /*#__PURE__*/React__namespace.createElement(formContext.formContext.Provider, {
+  return /*#__PURE__*/React.createElement(formContext.formContext.Provider, {
     value: {
       formApi: fieldApi.form,
       parentFieldName: fieldApi.name

package/build/lib/useField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import * as React from 'react'\n//\nimport { useStore } from '@tanstack/react-store'\nimport type {\n  DeepKeys,\n  DeepValue,\n  FieldOptions,\n  Narrow,\n} from '@tanstack/form-core'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useFormContext, formContext } from './formContext'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<TData, TFormData> {\n    Field: FieldComponent<TData, TFormData>\n  }\n}\n\nexport type UseFieldOptions<TData, TFormData> = FieldOptions<\n  TData,\n  TFormData\n> & {\n  mode?: 'value' | 'array'\n}\n\nexport type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(\n  opts?: { name: Narrow<TField> } & UseFieldOptions<\n    DeepValue<TFormData, TField>,\n    TFormData\n  >,\n) => FieldApi<DeepValue<TFormData, TField>, TFormData>\n\nexport function useField<TData, TFormData>(\n  opts: UseFieldOptions<TData, TFormData>,\n): FieldApi<TData, TFormData> {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const [fieldApi] = React.useState<FieldApi<TData, TFormData>>(() => {\n    const name = (\n      typeof opts.index === 'number'\n        ? [parentFieldName, opts.index, opts.name]\n        : [parentFieldName, opts.name]\n    )\n      .filter((d) => d !== undefined)\n      .join('.')\n\n    const api = new FieldApi({ ...opts, form: formApi, name: name as any })\n\n    api.Field = Field as any\n\n    return api\n  })\n\n  // Keep options up to date as they are rendered\n  fieldApi.update({ ...opts, form: formApi } as never)\n\n  useStore(\n    fieldApi.store as any,\n    opts.mode === 'array'\n      ? (state: any) => {\n          return [state.meta, Object.keys(state.value || []).length]\n        }\n      : undefined,\n  )\n\n  // Instantiates field meta and removes it when unrendered\n  React.useEffect(() => fieldApi.mount(), [fieldApi])\n\n  return fieldApi\n}\n\n// export type FieldValue<TFormData, TField> = TFormData extends any[]\n//   ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`\n//     ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>\n//     : TField extends `[${infer TIndex extends number | 'i'}]`\n//     ? TFormData[TIndex extends 'i' ? number : TIndex]\n//     : never\n//   : TField extends `${infer TPrefix}[${infer TIndex extends\n//       | number\n//       | 'i'}].${infer TRest}`\n//   ? DeepValue<\n//       DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],\n//       TRest\n//     >\n//   : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`\n//   ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]\n//   : DeepValue<TFormData, TField>\n\nexport type FieldValue<TFormData, TField> = TFormData extends any[]\n  ? unknown extends TField\n    ? TFormData[number]\n    : DeepValue<TFormData[number], TField>\n  : DeepValue<TFormData, TField>\n\n// type Test1 = FieldValue<{ foo: { bar: string }[] }, 'foo'>\n// //   ^?\n// type Test2 = FieldValue<{ foo: { bar: string }[] }, 'foo[i]'>\n// //   ^?\n// type Test3 = FieldValue<{ foo: { bar: string }[] }, 'foo[2].bar'>\n// //   ^?\n\nexport type FieldComponent<TParentData, TFormData> = <TField>({\n  children,\n  ...fieldOptions\n}: {\n  children: (\n    fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>,\n  ) => any\n} & Omit<\n  UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,\n  'name' | 'index'\n> &\n  (TParentData extends any[]\n    ? {\n        name?: TField extends undefined ? TField : DeepKeys<TParentData>\n        index: number\n      }\n    : {\n        name: TField extends undefined ? TField : DeepKeys<TParentData>\n        index?: never\n      })) => any\n\nexport function Field<TData, TFormData>({\n  children,\n  ...fieldOptions\n}: {\n  children: (fieldApi: FieldApi<TData, TFormData>) => any\n} & UseFieldOptions<TData, TFormData>) {\n  const fieldApi = useField(fieldOptions as any)\n\n  return (\n    <formContext.Provider\n      value={{ formApi: fieldApi.form, parentFieldName: fieldApi.name }}\n      children={functionalUpdate(children, fieldApi as any)}\n    />\n  )\n}\n"],"names":["useField","opts","formApi","parentFieldName","useFormContext","fieldApi","React","useState","name","index","filter","d","undefined","join","api","FieldApi","form","Field","update","useStore","store","mode","state","meta","Object","keys","value","length","useEffect","mount","children","fieldOptions","createElement","formContext","Provider","functionalUpdate"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiCO,SAASA,QAAQA,CACtBC,IAAuC,EACX;AAC5B;EACA,MAAM;IAAEC,OAAO;AAAEC,IAAAA,eAAAA;GAAiB,GAAGC,0BAAc,EAAE,CAAA;EAErD,MAAM,CAACC,QAAQ,CAAC,GAAGC,gBAAK,CAACC,QAAQ,CAA6B,MAAM;AAClE,IAAA,MAAMC,IAAI,GAAG,CACX,OAAOP,IAAI,CAACQ,KAAK,KAAK,QAAQ,GAC1B,CAACN,eAAe,EAAEF,IAAI,CAACQ,KAAK,EAAER,IAAI,CAACO,IAAI,CAAC,GACxC,CAACL,eAAe,EAAEF,IAAI,CAACO,IAAI,CAAC,EAE/BE,MAAM,CAAEC,CAAC,IAAKA,CAAC,KAAKC,SAAS,CAAC,CAC9BC,IAAI,CAAC,GAAG,CAAC,CAAA;AAEZ,IAAA,MAAMC,GAAG,GAAG,IAAIC,iBAAQ,CAAC;AAAE,MAAA,GAAGd,IAAI;AAAEe,MAAAA,IAAI,EAAEd,OAAO;AAAEM,MAAAA,IAAI,EAAEA,IAAAA;AAAY,KAAC,CAAC,CAAA;IAEvEM,GAAG,CAACG,KAAK,GAAGA,KAAY,CAAA;AAExB,IAAA,OAAOH,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;;AAEF;EACAT,QAAQ,CAACa,MAAM,CAAC;AAAE,IAAA,GAAGjB,IAAI;AAAEe,IAAAA,IAAI,EAAEd,OAAAA;AAAQ,GAAU,CAAC,CAAA;AAEpDiB,EAAAA,mBAAQ,CACNd,QAAQ,CAACe,KAAK,EACdnB,IAAI,CAACoB,IAAI,KAAK,OAAO,GAChBC,KAAU,IAAK;AACd,IAAA,OAAO,CAACA,KAAK,CAACC,IAAI,EAAEC,MAAM,CAACC,IAAI,CAACH,KAAK,CAACI,KAAK,IAAI,EAAE,CAAC,CAACC,MAAM,CAAC,CAAA;GAC3D,GACDf,SACN,CAAC,CAAA;;AAED;AACAN,EAAAA,gBAAK,CAACsB,SAAS,CAAC,MAAMvB,QAAQ,CAACwB,KAAK,EAAE,EAAE,CAACxB,QAAQ,CAAC,CAAC,CAAA;AAEnD,EAAA,OAAOA,QAAQ,CAAA;AACjB,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAQA;AACA;AACA;AACA;AACA;AACA;AAuBO,SAASY,KAAKA,CAAmB;EACtCa,QAAQ;EACR,GAAGC,YAAAA;AAG+B,CAAC,EAAE;AACrC,EAAA,MAAM1B,QAAQ,GAAGL,QAAQ,CAAC+B,YAAmB,CAAC,CAAA;AAE9C,EAAA,oBACEzB,gBAAA,CAAA0B,aAAA,CAACC,uBAAW,CAACC,QAAQ,EAAA;AACnBR,IAAAA,KAAK,EAAE;MAAExB,OAAO,EAAEG,QAAQ,CAACW,IAAI;MAAEb,eAAe,EAAEE,QAAQ,CAACG,IAAAA;KAAO;AAClEsB,IAAAA,QAAQ,EAAEK,yBAAgB,CAACL,QAAQ,EAAEzB,QAAe,CAAA;AAAE,GACvD,CAAC,CAAA;AAEN;;;;;"}
+{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport type {\n  DeepKeys,\n  DeepValue,\n  FieldOptions,\n  Narrow,\n} from '@tanstack/form-core'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useFormContext, formContext } from './formContext'\nimport { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect'\nimport type { UseFieldOptions } from './types'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<TData, TFormData> {\n    Field: FieldComponent<TData, TFormData>\n  }\n}\n\nexport type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(\n  opts?: { name: Narrow<TField> } & UseFieldOptions<\n    DeepValue<TFormData, TField>,\n    TFormData\n  >,\n) => FieldApi<DeepValue<TFormData, TField>, TFormData>\n\nexport function useField<TData, TFormData>(\n  opts: UseFieldOptions<TData, TFormData>,\n): FieldApi<TData, TFormData> {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const [fieldApi] = useState<FieldApi<TData, TFormData>>(() => {\n    const name = (\n      typeof opts.index === 'number'\n        ? [parentFieldName, opts.index, opts.name]\n        : [parentFieldName, opts.name]\n    )\n      .filter((d) => d !== undefined)\n      .join('.')\n\n    const api = new FieldApi({ ...opts, form: formApi, name: name as any })\n\n    api.Field = Field as any\n\n    return api\n  })\n\n  /**\n   * fieldApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    fieldApi.update({ ...opts, form: formApi } as never)\n  })\n\n  useStore(\n    fieldApi.store as any,\n    opts.mode === 'array'\n      ? (state: any) => {\n          return [state.meta, Object.keys(state.value || []).length]\n        }\n      : undefined,\n  )\n\n  // Instantiates field meta and removes it when unrendered\n  useIsomorphicLayoutEffect(() => fieldApi.mount(), [fieldApi])\n\n  return fieldApi\n}\n\n// export type FieldValue<TFormData, TField> = TFormData extends any[]\n//   ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`\n//     ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>\n//     : TField extends `[${infer TIndex extends number | 'i'}]`\n//     ? TFormData[TIndex extends 'i' ? number : TIndex]\n//     : never\n//   : TField extends `${infer TPrefix}[${infer TIndex extends\n//       | number\n//       | 'i'}].${infer TRest}`\n//   ? DeepValue<\n//       DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],\n//       TRest\n//     >\n//   : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`\n//   ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]\n//   : DeepValue<TFormData, TField>\n\nexport type FieldValue<TFormData, TField> = TFormData extends any[]\n  ? unknown extends TField\n    ? TFormData[number]\n    : DeepValue<TFormData[number], TField>\n  : DeepValue<TFormData, TField>\n\n// type Test1 = FieldValue<{ foo: { bar: string }[] }, 'foo'>\n// //   ^?\n// type Test2 = FieldValue<{ foo: { bar: string }[] }, 'foo[i]'>\n// //   ^?\n// type Test3 = FieldValue<{ foo: { bar: string }[] }, 'foo[2].bar'>\n// //   ^?\n\nexport type FieldComponent<TParentData, TFormData> = <TField>({\n  children,\n  ...fieldOptions\n}: {\n  children: (\n    fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>,\n  ) => any\n} & Omit<\n  UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,\n  'name' | 'index'\n> &\n  (TParentData extends any[]\n    ? {\n        name?: TField extends undefined ? TField : DeepKeys<TParentData>\n        index: number\n      }\n    : {\n        name: TField extends undefined ? TField : DeepKeys<TParentData>\n        index?: never\n      })) => any\n\nexport function Field<TData, TFormData>({\n  children,\n  ...fieldOptions\n}: {\n  children: (fieldApi: FieldApi<TData, TFormData>) => any\n} & UseFieldOptions<TData, TFormData>) {\n  const fieldApi = useField(fieldOptions as any)\n\n  return (\n    <formContext.Provider\n      value={{ formApi: fieldApi.form, parentFieldName: fieldApi.name }}\n      children={functionalUpdate(children, fieldApi as any)}\n    />\n  )\n}\n"],"names":["useField","opts","formApi","parentFieldName","useFormContext","fieldApi","useState","name","index","filter","d","undefined","join","api","FieldApi","form","Field","useIsomorphicLayoutEffect","update","useStore","store","mode","state","meta","Object","keys","value","length","mount","children","fieldOptions","React","createElement","formContext","Provider","functionalUpdate"],"mappings":";;;;;;;;AA2BO,SAASA,QAAQA,CACtBC,IAAuC,EACX;AAC5B;EACA,MAAM;IAAEC,OAAO;AAAEC,IAAAA,eAAAA;GAAiB,GAAGC,0BAAc,EAAE,CAAA;AAErD,EAAA,MAAM,CAACC,QAAQ,CAAC,GAAGC,cAAQ,CAA6B,MAAM;AAC5D,IAAA,MAAMC,IAAI,GAAG,CACX,OAAON,IAAI,CAACO,KAAK,KAAK,QAAQ,GAC1B,CAACL,eAAe,EAAEF,IAAI,CAACO,KAAK,EAAEP,IAAI,CAACM,IAAI,CAAC,GACxC,CAACJ,eAAe,EAAEF,IAAI,CAACM,IAAI,CAAC,EAE/BE,MAAM,CAAEC,CAAC,IAAKA,CAAC,KAAKC,SAAS,CAAC,CAC9BC,IAAI,CAAC,GAAG,CAAC,CAAA;AAEZ,IAAA,MAAMC,GAAG,GAAG,IAAIC,iBAAQ,CAAC;AAAE,MAAA,GAAGb,IAAI;AAAEc,MAAAA,IAAI,EAAEb,OAAO;AAAEK,MAAAA,IAAI,EAAEA,IAAAA;AAAY,KAAC,CAAC,CAAA;IAEvEM,GAAG,CAACG,KAAK,GAAGA,KAAY,CAAA;AAExB,IAAA,OAAOH,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;;AAEF;AACF;AACA;AACA;AACEI,EAAAA,mDAAyB,CAAC,MAAM;IAC9BZ,QAAQ,CAACa,MAAM,CAAC;AAAE,MAAA,GAAGjB,IAAI;AAAEc,MAAAA,IAAI,EAAEb,OAAAA;AAAQ,KAAU,CAAC,CAAA;AACtD,GAAC,CAAC,CAAA;AAEFiB,EAAAA,mBAAQ,CACNd,QAAQ,CAACe,KAAK,EACdnB,IAAI,CAACoB,IAAI,KAAK,OAAO,GAChBC,KAAU,IAAK;AACd,IAAA,OAAO,CAACA,KAAK,CAACC,IAAI,EAAEC,MAAM,CAACC,IAAI,CAACH,KAAK,CAACI,KAAK,IAAI,EAAE,CAAC,CAACC,MAAM,CAAC,CAAA;GAC3D,GACDhB,SACN,CAAC,CAAA;;AAED;EACAM,mDAAyB,CAAC,MAAMZ,QAAQ,CAACuB,KAAK,EAAE,EAAE,CAACvB,QAAQ,CAAC,CAAC,CAAA;AAE7D,EAAA,OAAOA,QAAQ,CAAA;AACjB,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAQA;AACA;AACA;AACA;AACA;AACA;AAuBO,SAASW,KAAKA,CAAmB;EACtCa,QAAQ;EACR,GAAGC,YAAAA;AAG+B,CAAC,EAAE;AACrC,EAAA,MAAMzB,QAAQ,GAAGL,QAAQ,CAAC8B,YAAmB,CAAC,CAAA;AAE9C,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAACC,uBAAW,CAACC,QAAQ,EAAA;AACnBR,IAAAA,KAAK,EAAE;MAAExB,OAAO,EAAEG,QAAQ,CAACU,IAAI;MAAEZ,eAAe,EAAEE,QAAQ,CAACE,IAAAA;KAAO;AAClEsB,IAAAA,QAAQ,EAAEM,yBAAgB,CAACN,QAAQ,EAAExB,QAAe,CAAA;AAAE,GACvD,CAAC,CAAA;AAEN;;;;;"}

package/build/lib/useField.d.ts

@@ -1,13 +1,11 @@
-import type { DeepKeys, DeepValue, FieldOptions, Narrow } from '@tanstack/form-core';
+import type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core';
 import { FieldApi } from '@tanstack/form-core';
+import type { UseFieldOptions } from './types';
 declare module '@tanstack/form-core' {
     interface FieldApi<TData, TFormData> {
         Field: FieldComponent<TData, TFormData>;
     }
 }
-export type UseFieldOptions<TData, TFormData> = FieldOptions<TData, TFormData> & {
-    mode?: 'value' | 'array';
-};
 export type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(opts?: {
     name: Narrow<TField>;
 } & UseFieldOptions<DeepValue<TFormData, TField>, TFormData>) => FieldApi<DeepValue<TFormData, TField>, TFormData>;

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

@@ -1 +1 @@
-{"version":3,"file":"useField.d.ts","sourceRoot":"","sources":["../../src/useField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,MAAM,EACP,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,QAAQ,EAAoB,MAAM,qBAAqB,CAAA;AAGhE,OAAO,QAAQ,qBAAqB,CAAC;IAEnC,UAAU,QAAQ,CAAC,KAAK,EAAE,SAAS;QACjC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;KACxC;CACF;AAED,MAAM,MAAM,eAAe,CAAC,KAAK,EAAE,SAAS,IAAI,YAAY,CAC1D,KAAK,EACL,SAAS,CACV,GAAG;IACF,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,QAAQ,CAAC,SAAS,IAAI,CAAC,MAAM,SAAS,QAAQ,CAAC,SAAS,CAAC,EACnE,IAAI,CAAC,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAA;CAAE,GAAG,eAAe,CAC/C,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,EAC5B,SAAS,CACV,KACE,QAAQ,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,EAAE,SAAS,CAAC,CAAA;AAEtD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,EACvC,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC,GACtC,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,CAoC5B;AAmBD,MAAM,MAAM,UAAU,CAAC,SAAS,EAAE,MAAM,IAAI,SAAS,SAAS,GAAG,EAAE,GAC/D,OAAO,SAAS,MAAM,GACpB,SAAS,CAAC,MAAM,CAAC,GACjB,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,GACtC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;AAShC,MAAM,MAAM,cAAc,CAAC,WAAW,EAAE,SAAS,IAAI,CAAC,MAAM,EAAE,EAC5D,QAAQ,EACR,GAAG,YAAY,EAChB,EAAE;IACD,QAAQ,EAAE,CACR,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,WAAW,EAAE,MAAM,CAAC,EAAE,SAAS,CAAC,KAC3D,GAAG,CAAA;CACT,GAAG,IAAI,CACN,eAAe,CAAC,UAAU,CAAC,WAAW,EAAE,MAAM,CAAC,EAAE,SAAS,CAAC,EAC3D,MAAM,GAAG,OAAO,CACjB,GACC,CAAC,WAAW,SAAS,GAAG,EAAE,GACtB;IACE,IAAI,CAAC,EAAE,MAAM,SAAS,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAA;IAChE,KAAK,EAAE,MAAM,CAAA;CACd,GACD;IACE,IAAI,EAAE,MAAM,SAAS,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAA;IAC/D,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,CAAC,KAAK,GAAG,CAAA;AAEhB,wBAAgB,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,EACtC,QAAQ,EACR,GAAG,YAAY,EAChB,EAAE;IACD,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,GAAG,CAAA;CACxD,GAAG,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC,eASpC"}
+{"version":3,"file":"useField.d.ts","sourceRoot":"","sources":["../../src/useField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,QAAQ,EACR,SAAS,EAET,MAAM,EACP,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,QAAQ,EAAoB,MAAM,qBAAqB,CAAA;AAGhE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,OAAO,QAAQ,qBAAqB,CAAC;IAEnC,UAAU,QAAQ,CAAC,KAAK,EAAE,SAAS;QACjC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;KACxC;CACF;AAED,MAAM,MAAM,QAAQ,CAAC,SAAS,IAAI,CAAC,MAAM,SAAS,QAAQ,CAAC,SAAS,CAAC,EACnE,IAAI,CAAC,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAA;CAAE,GAAG,eAAe,CAC/C,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,EAC5B,SAAS,CACV,KACE,QAAQ,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,EAAE,SAAS,CAAC,CAAA;AAEtD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,EACvC,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC,GACtC,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,CAyC5B;AAmBD,MAAM,MAAM,UAAU,CAAC,SAAS,EAAE,MAAM,IAAI,SAAS,SAAS,GAAG,EAAE,GAC/D,OAAO,SAAS,MAAM,GACpB,SAAS,CAAC,MAAM,CAAC,GACjB,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,GACtC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;AAShC,MAAM,MAAM,cAAc,CAAC,WAAW,EAAE,SAAS,IAAI,CAAC,MAAM,EAAE,EAC5D,QAAQ,EACR,GAAG,YAAY,EAChB,EAAE;IACD,QAAQ,EAAE,CACR,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,WAAW,EAAE,MAAM,CAAC,EAAE,SAAS,CAAC,KAC3D,GAAG,CAAA;CACT,GAAG,IAAI,CACN,eAAe,CAAC,UAAU,CAAC,WAAW,EAAE,MAAM,CAAC,EAAE,SAAS,CAAC,EAC3D,MAAM,GAAG,OAAO,CACjB,GACC,CAAC,WAAW,SAAS,GAAG,EAAE,GACtB;IACE,IAAI,CAAC,EAAE,MAAM,SAAS,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAA;IAChE,KAAK,EAAE,MAAM,CAAA;CACd,GACD;IACE,IAAI,EAAE,MAAM,SAAS,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAA;IAC/D,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,CAAC,KAAK,GAAG,CAAA;AAEhB,wBAAgB,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,EACtC,QAAQ,EACR,GAAG,YAAY,EAChB,EAAE;IACD,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,GAAG,CAAA;CACxD,GAAG,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC,eASpC"}

package/build/lib/useField.js

@@ -1,7 +1,8 @@
-import * as React from 'react';
+import React__default, { useState } from 'react';
 import { useStore } from '@tanstack/react-store';
 import { FieldApi, functionalUpdate } from '@tanstack/form-core';
 import { useFormContext, formContext } from './formContext.js';
+import { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect.js';
 
 function useField(opts) {
   // Get the form API either manually or from context
@@ -9,7 +10,7 @@ function useField(opts) {
     formApi,
     parentFieldName
   } = useFormContext();
-  const [fieldApi] = React.useState(() => {
+  const [fieldApi] = useState(() => {
     const name = (typeof opts.index === 'number' ? [parentFieldName, opts.index, opts.name] : [parentFieldName, opts.name]).filter(d => d !== undefined).join('.');
     const api = new FieldApi({
       ...opts,
@@ -20,17 +21,22 @@ function useField(opts) {
     return api;
   });
 
-  // Keep options up to date as they are rendered
-  fieldApi.update({
-    ...opts,
-    form: formApi
+  /**
+   * fieldApi.update should not have any side effects. Think of it like a `useRef`
+   * that we need to keep updated every render with the most up-to-date information.
+   */
+  useIsomorphicLayoutEffect(() => {
+    fieldApi.update({
+      ...opts,
+      form: formApi
+    });
   });
   useStore(fieldApi.store, opts.mode === 'array' ? state => {
     return [state.meta, Object.keys(state.value || []).length];
   } : undefined);
 
   // Instantiates field meta and removes it when unrendered
-  React.useEffect(() => fieldApi.mount(), [fieldApi]);
+  useIsomorphicLayoutEffect(() => fieldApi.mount(), [fieldApi]);
   return fieldApi;
 }
 
@@ -61,7 +67,7 @@ function Field({
   ...fieldOptions
 }) {
   const fieldApi = useField(fieldOptions);
-  return /*#__PURE__*/React.createElement(formContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(formContext.Provider, {
     value: {
       formApi: fieldApi.form,
       parentFieldName: fieldApi.name

package/build/lib/useField.js.map

@@ -1 +1 @@
-{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import * as React from 'react'\n//\nimport { useStore } from '@tanstack/react-store'\nimport type {\n  DeepKeys,\n  DeepValue,\n  FieldOptions,\n  Narrow,\n} from '@tanstack/form-core'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useFormContext, formContext } from './formContext'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<TData, TFormData> {\n    Field: FieldComponent<TData, TFormData>\n  }\n}\n\nexport type UseFieldOptions<TData, TFormData> = FieldOptions<\n  TData,\n  TFormData\n> & {\n  mode?: 'value' | 'array'\n}\n\nexport type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(\n  opts?: { name: Narrow<TField> } & UseFieldOptions<\n    DeepValue<TFormData, TField>,\n    TFormData\n  >,\n) => FieldApi<DeepValue<TFormData, TField>, TFormData>\n\nexport function useField<TData, TFormData>(\n  opts: UseFieldOptions<TData, TFormData>,\n): FieldApi<TData, TFormData> {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const [fieldApi] = React.useState<FieldApi<TData, TFormData>>(() => {\n    const name = (\n      typeof opts.index === 'number'\n        ? [parentFieldName, opts.index, opts.name]\n        : [parentFieldName, opts.name]\n    )\n      .filter((d) => d !== undefined)\n      .join('.')\n\n    const api = new FieldApi({ ...opts, form: formApi, name: name as any })\n\n    api.Field = Field as any\n\n    return api\n  })\n\n  // Keep options up to date as they are rendered\n  fieldApi.update({ ...opts, form: formApi } as never)\n\n  useStore(\n    fieldApi.store as any,\n    opts.mode === 'array'\n      ? (state: any) => {\n          return [state.meta, Object.keys(state.value || []).length]\n        }\n      : undefined,\n  )\n\n  // Instantiates field meta and removes it when unrendered\n  React.useEffect(() => fieldApi.mount(), [fieldApi])\n\n  return fieldApi\n}\n\n// export type FieldValue<TFormData, TField> = TFormData extends any[]\n//   ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`\n//     ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>\n//     : TField extends `[${infer TIndex extends number | 'i'}]`\n//     ? TFormData[TIndex extends 'i' ? number : TIndex]\n//     : never\n//   : TField extends `${infer TPrefix}[${infer TIndex extends\n//       | number\n//       | 'i'}].${infer TRest}`\n//   ? DeepValue<\n//       DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],\n//       TRest\n//     >\n//   : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`\n//   ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]\n//   : DeepValue<TFormData, TField>\n\nexport type FieldValue<TFormData, TField> = TFormData extends any[]\n  ? unknown extends TField\n    ? TFormData[number]\n    : DeepValue<TFormData[number], TField>\n  : DeepValue<TFormData, TField>\n\n// type Test1 = FieldValue<{ foo: { bar: string }[] }, 'foo'>\n// //   ^?\n// type Test2 = FieldValue<{ foo: { bar: string }[] }, 'foo[i]'>\n// //   ^?\n// type Test3 = FieldValue<{ foo: { bar: string }[] }, 'foo[2].bar'>\n// //   ^?\n\nexport type FieldComponent<TParentData, TFormData> = <TField>({\n  children,\n  ...fieldOptions\n}: {\n  children: (\n    fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>,\n  ) => any\n} & Omit<\n  UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,\n  'name' | 'index'\n> &\n  (TParentData extends any[]\n    ? {\n        name?: TField extends undefined ? TField : DeepKeys<TParentData>\n        index: number\n      }\n    : {\n        name: TField extends undefined ? TField : DeepKeys<TParentData>\n        index?: never\n      })) => any\n\nexport function Field<TData, TFormData>({\n  children,\n  ...fieldOptions\n}: {\n  children: (fieldApi: FieldApi<TData, TFormData>) => any\n} & UseFieldOptions<TData, TFormData>) {\n  const fieldApi = useField(fieldOptions as any)\n\n  return (\n    <formContext.Provider\n      value={{ formApi: fieldApi.form, parentFieldName: fieldApi.name }}\n      children={functionalUpdate(children, fieldApi as any)}\n    />\n  )\n}\n"],"names":["useField","opts","formApi","parentFieldName","useFormContext","fieldApi","React","useState","name","index","filter","d","undefined","join","api","FieldApi","form","Field","update","useStore","store","mode","state","meta","Object","keys","value","length","useEffect","mount","children","fieldOptions","createElement","formContext","Provider","functionalUpdate"],"mappings":";;;;;AAiCO,SAASA,QAAQA,CACtBC,IAAuC,EACX;AAC5B;EACA,MAAM;IAAEC,OAAO;AAAEC,IAAAA,eAAAA;GAAiB,GAAGC,cAAc,EAAE,CAAA;EAErD,MAAM,CAACC,QAAQ,CAAC,GAAGC,KAAK,CAACC,QAAQ,CAA6B,MAAM;AAClE,IAAA,MAAMC,IAAI,GAAG,CACX,OAAOP,IAAI,CAACQ,KAAK,KAAK,QAAQ,GAC1B,CAACN,eAAe,EAAEF,IAAI,CAACQ,KAAK,EAAER,IAAI,CAACO,IAAI,CAAC,GACxC,CAACL,eAAe,EAAEF,IAAI,CAACO,IAAI,CAAC,EAE/BE,MAAM,CAAEC,CAAC,IAAKA,CAAC,KAAKC,SAAS,CAAC,CAC9BC,IAAI,CAAC,GAAG,CAAC,CAAA;AAEZ,IAAA,MAAMC,GAAG,GAAG,IAAIC,QAAQ,CAAC;AAAE,MAAA,GAAGd,IAAI;AAAEe,MAAAA,IAAI,EAAEd,OAAO;AAAEM,MAAAA,IAAI,EAAEA,IAAAA;AAAY,KAAC,CAAC,CAAA;IAEvEM,GAAG,CAACG,KAAK,GAAGA,KAAY,CAAA;AAExB,IAAA,OAAOH,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;;AAEF;EACAT,QAAQ,CAACa,MAAM,CAAC;AAAE,IAAA,GAAGjB,IAAI;AAAEe,IAAAA,IAAI,EAAEd,OAAAA;AAAQ,GAAU,CAAC,CAAA;AAEpDiB,EAAAA,QAAQ,CACNd,QAAQ,CAACe,KAAK,EACdnB,IAAI,CAACoB,IAAI,KAAK,OAAO,GAChBC,KAAU,IAAK;AACd,IAAA,OAAO,CAACA,KAAK,CAACC,IAAI,EAAEC,MAAM,CAACC,IAAI,CAACH,KAAK,CAACI,KAAK,IAAI,EAAE,CAAC,CAACC,MAAM,CAAC,CAAA;GAC3D,GACDf,SACN,CAAC,CAAA;;AAED;AACAN,EAAAA,KAAK,CAACsB,SAAS,CAAC,MAAMvB,QAAQ,CAACwB,KAAK,EAAE,EAAE,CAACxB,QAAQ,CAAC,CAAC,CAAA;AAEnD,EAAA,OAAOA,QAAQ,CAAA;AACjB,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAQA;AACA;AACA;AACA;AACA;AACA;AAuBO,SAASY,KAAKA,CAAmB;EACtCa,QAAQ;EACR,GAAGC,YAAAA;AAG+B,CAAC,EAAE;AACrC,EAAA,MAAM1B,QAAQ,GAAGL,QAAQ,CAAC+B,YAAmB,CAAC,CAAA;AAE9C,EAAA,oBACEzB,KAAA,CAAA0B,aAAA,CAACC,WAAW,CAACC,QAAQ,EAAA;AACnBR,IAAAA,KAAK,EAAE;MAAExB,OAAO,EAAEG,QAAQ,CAACW,IAAI;MAAEb,eAAe,EAAEE,QAAQ,CAACG,IAAAA;KAAO;AAClEsB,IAAAA,QAAQ,EAAEK,gBAAgB,CAACL,QAAQ,EAAEzB,QAAe,CAAA;AAAE,GACvD,CAAC,CAAA;AAEN;;;;"}
+{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport type {\n  DeepKeys,\n  DeepValue,\n  FieldOptions,\n  Narrow,\n} from '@tanstack/form-core'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useFormContext, formContext } from './formContext'\nimport { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect'\nimport type { UseFieldOptions } from './types'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<TData, TFormData> {\n    Field: FieldComponent<TData, TFormData>\n  }\n}\n\nexport type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(\n  opts?: { name: Narrow<TField> } & UseFieldOptions<\n    DeepValue<TFormData, TField>,\n    TFormData\n  >,\n) => FieldApi<DeepValue<TFormData, TField>, TFormData>\n\nexport function useField<TData, TFormData>(\n  opts: UseFieldOptions<TData, TFormData>,\n): FieldApi<TData, TFormData> {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const [fieldApi] = useState<FieldApi<TData, TFormData>>(() => {\n    const name = (\n      typeof opts.index === 'number'\n        ? [parentFieldName, opts.index, opts.name]\n        : [parentFieldName, opts.name]\n    )\n      .filter((d) => d !== undefined)\n      .join('.')\n\n    const api = new FieldApi({ ...opts, form: formApi, name: name as any })\n\n    api.Field = Field as any\n\n    return api\n  })\n\n  /**\n   * fieldApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    fieldApi.update({ ...opts, form: formApi } as never)\n  })\n\n  useStore(\n    fieldApi.store as any,\n    opts.mode === 'array'\n      ? (state: any) => {\n          return [state.meta, Object.keys(state.value || []).length]\n        }\n      : undefined,\n  )\n\n  // Instantiates field meta and removes it when unrendered\n  useIsomorphicLayoutEffect(() => fieldApi.mount(), [fieldApi])\n\n  return fieldApi\n}\n\n// export type FieldValue<TFormData, TField> = TFormData extends any[]\n//   ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`\n//     ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>\n//     : TField extends `[${infer TIndex extends number | 'i'}]`\n//     ? TFormData[TIndex extends 'i' ? number : TIndex]\n//     : never\n//   : TField extends `${infer TPrefix}[${infer TIndex extends\n//       | number\n//       | 'i'}].${infer TRest}`\n//   ? DeepValue<\n//       DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],\n//       TRest\n//     >\n//   : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`\n//   ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]\n//   : DeepValue<TFormData, TField>\n\nexport type FieldValue<TFormData, TField> = TFormData extends any[]\n  ? unknown extends TField\n    ? TFormData[number]\n    : DeepValue<TFormData[number], TField>\n  : DeepValue<TFormData, TField>\n\n// type Test1 = FieldValue<{ foo: { bar: string }[] }, 'foo'>\n// //   ^?\n// type Test2 = FieldValue<{ foo: { bar: string }[] }, 'foo[i]'>\n// //   ^?\n// type Test3 = FieldValue<{ foo: { bar: string }[] }, 'foo[2].bar'>\n// //   ^?\n\nexport type FieldComponent<TParentData, TFormData> = <TField>({\n  children,\n  ...fieldOptions\n}: {\n  children: (\n    fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>,\n  ) => any\n} & Omit<\n  UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,\n  'name' | 'index'\n> &\n  (TParentData extends any[]\n    ? {\n        name?: TField extends undefined ? TField : DeepKeys<TParentData>\n        index: number\n      }\n    : {\n        name: TField extends undefined ? TField : DeepKeys<TParentData>\n        index?: never\n      })) => any\n\nexport function Field<TData, TFormData>({\n  children,\n  ...fieldOptions\n}: {\n  children: (fieldApi: FieldApi<TData, TFormData>) => any\n} & UseFieldOptions<TData, TFormData>) {\n  const fieldApi = useField(fieldOptions as any)\n\n  return (\n    <formContext.Provider\n      value={{ formApi: fieldApi.form, parentFieldName: fieldApi.name }}\n      children={functionalUpdate(children, fieldApi as any)}\n    />\n  )\n}\n"],"names":["useField","opts","formApi","parentFieldName","useFormContext","fieldApi","useState","name","index","filter","d","undefined","join","api","FieldApi","form","Field","useIsomorphicLayoutEffect","update","useStore","store","mode","state","meta","Object","keys","value","length","mount","children","fieldOptions","React","createElement","formContext","Provider","functionalUpdate"],"mappings":";;;;;;AA2BO,SAASA,QAAQA,CACtBC,IAAuC,EACX;AAC5B;EACA,MAAM;IAAEC,OAAO;AAAEC,IAAAA,eAAAA;GAAiB,GAAGC,cAAc,EAAE,CAAA;AAErD,EAAA,MAAM,CAACC,QAAQ,CAAC,GAAGC,QAAQ,CAA6B,MAAM;AAC5D,IAAA,MAAMC,IAAI,GAAG,CACX,OAAON,IAAI,CAACO,KAAK,KAAK,QAAQ,GAC1B,CAACL,eAAe,EAAEF,IAAI,CAACO,KAAK,EAAEP,IAAI,CAACM,IAAI,CAAC,GACxC,CAACJ,eAAe,EAAEF,IAAI,CAACM,IAAI,CAAC,EAE/BE,MAAM,CAAEC,CAAC,IAAKA,CAAC,KAAKC,SAAS,CAAC,CAC9BC,IAAI,CAAC,GAAG,CAAC,CAAA;AAEZ,IAAA,MAAMC,GAAG,GAAG,IAAIC,QAAQ,CAAC;AAAE,MAAA,GAAGb,IAAI;AAAEc,MAAAA,IAAI,EAAEb,OAAO;AAAEK,MAAAA,IAAI,EAAEA,IAAAA;AAAY,KAAC,CAAC,CAAA;IAEvEM,GAAG,CAACG,KAAK,GAAGA,KAAY,CAAA;AAExB,IAAA,OAAOH,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;;AAEF;AACF;AACA;AACA;AACEI,EAAAA,yBAAyB,CAAC,MAAM;IAC9BZ,QAAQ,CAACa,MAAM,CAAC;AAAE,MAAA,GAAGjB,IAAI;AAAEc,MAAAA,IAAI,EAAEb,OAAAA;AAAQ,KAAU,CAAC,CAAA;AACtD,GAAC,CAAC,CAAA;AAEFiB,EAAAA,QAAQ,CACNd,QAAQ,CAACe,KAAK,EACdnB,IAAI,CAACoB,IAAI,KAAK,OAAO,GAChBC,KAAU,IAAK;AACd,IAAA,OAAO,CAACA,KAAK,CAACC,IAAI,EAAEC,MAAM,CAACC,IAAI,CAACH,KAAK,CAACI,KAAK,IAAI,EAAE,CAAC,CAACC,MAAM,CAAC,CAAA;GAC3D,GACDhB,SACN,CAAC,CAAA;;AAED;EACAM,yBAAyB,CAAC,MAAMZ,QAAQ,CAACuB,KAAK,EAAE,EAAE,CAACvB,QAAQ,CAAC,CAAC,CAAA;AAE7D,EAAA,OAAOA,QAAQ,CAAA;AACjB,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAQA;AACA;AACA;AACA;AACA;AACA;AAuBO,SAASW,KAAKA,CAAmB;EACtCa,QAAQ;EACR,GAAGC,YAAAA;AAG+B,CAAC,EAAE;AACrC,EAAA,MAAMzB,QAAQ,GAAGL,QAAQ,CAAC8B,YAAmB,CAAC,CAAA;AAE9C,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAACC,WAAW,CAACC,QAAQ,EAAA;AACnBR,IAAAA,KAAK,EAAE;MAAExB,OAAO,EAAEG,QAAQ,CAACU,IAAI;MAAEZ,eAAe,EAAEE,QAAQ,CAACE,IAAAA;KAAO;AAClEsB,IAAAA,QAAQ,EAAEM,gBAAgB,CAACN,QAAQ,EAAExB,QAAe,CAAA;AAAE,GACvD,CAAC,CAAA;AAEN;;;;"}

package/build/lib/useField.legacy.cjs

@@ -4,25 +4,7 @@ var React = require('react');
 var reactStore = require('@tanstack/react-store');
 var formCore = require('@tanstack/form-core');
 var formContext = require('./formContext.legacy.cjs');
-
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var useIsomorphicLayoutEffect = require('./utils/useIsomorphicLayoutEffect.legacy.cjs');
 
 function useField(opts) {
   // Get the form API either manually or from context
@@ -30,7 +12,7 @@ function useField(opts) {
     formApi,
     parentFieldName
   } = formContext.useFormContext();
-  const [fieldApi] = React__namespace.useState(() => {
+  const [fieldApi] = React.useState(() => {
     const name = (typeof opts.index === 'number' ? [parentFieldName, opts.index, opts.name] : [parentFieldName, opts.name]).filter(d => d !== undefined).join('.');
     const api = new formCore.FieldApi({
       ...opts,
@@ -41,17 +23,22 @@ function useField(opts) {
     return api;
   });
 
-  // Keep options up to date as they are rendered
-  fieldApi.update({
-    ...opts,
-    form: formApi
+  /**
+   * fieldApi.update should not have any side effects. Think of it like a `useRef`
+   * that we need to keep updated every render with the most up-to-date information.
+   */
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    fieldApi.update({
+      ...opts,
+      form: formApi
+    });
   });
   reactStore.useStore(fieldApi.store, opts.mode === 'array' ? state => {
     return [state.meta, Object.keys(state.value || []).length];
   } : undefined);
 
   // Instantiates field meta and removes it when unrendered
-  React__namespace.useEffect(() => fieldApi.mount(), [fieldApi]);
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => fieldApi.mount(), [fieldApi]);
   return fieldApi;
 }
 
@@ -82,7 +69,7 @@ function Field({
   ...fieldOptions
 }) {
   const fieldApi = useField(fieldOptions);
-  return /*#__PURE__*/React__namespace.createElement(formContext.formContext.Provider, {
+  return /*#__PURE__*/React.createElement(formContext.formContext.Provider, {
     value: {
       formApi: fieldApi.form,
       parentFieldName: fieldApi.name

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

@@ -1 +1 @@
-{"version":3,"file":"useField.legacy.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import * as React from 'react'\n//\nimport { useStore } from '@tanstack/react-store'\nimport type {\n  DeepKeys,\n  DeepValue,\n  FieldOptions,\n  Narrow,\n} from '@tanstack/form-core'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useFormContext, formContext } from './formContext'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<TData, TFormData> {\n    Field: FieldComponent<TData, TFormData>\n  }\n}\n\nexport type UseFieldOptions<TData, TFormData> = FieldOptions<\n  TData,\n  TFormData\n> & {\n  mode?: 'value' | 'array'\n}\n\nexport type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(\n  opts?: { name: Narrow<TField> } & UseFieldOptions<\n    DeepValue<TFormData, TField>,\n    TFormData\n  >,\n) => FieldApi<DeepValue<TFormData, TField>, TFormData>\n\nexport function useField<TData, TFormData>(\n  opts: UseFieldOptions<TData, TFormData>,\n): FieldApi<TData, TFormData> {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const [fieldApi] = React.useState<FieldApi<TData, TFormData>>(() => {\n    const name = (\n      typeof opts.index === 'number'\n        ? [parentFieldName, opts.index, opts.name]\n        : [parentFieldName, opts.name]\n    )\n      .filter((d) => d !== undefined)\n      .join('.')\n\n    const api = new FieldApi({ ...opts, form: formApi, name: name as any })\n\n    api.Field = Field as any\n\n    return api\n  })\n\n  // Keep options up to date as they are rendered\n  fieldApi.update({ ...opts, form: formApi } as never)\n\n  useStore(\n    fieldApi.store as any,\n    opts.mode === 'array'\n      ? (state: any) => {\n          return [state.meta, Object.keys(state.value || []).length]\n        }\n      : undefined,\n  )\n\n  // Instantiates field meta and removes it when unrendered\n  React.useEffect(() => fieldApi.mount(), [fieldApi])\n\n  return fieldApi\n}\n\n// export type FieldValue<TFormData, TField> = TFormData extends any[]\n//   ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`\n//     ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>\n//     : TField extends `[${infer TIndex extends number | 'i'}]`\n//     ? TFormData[TIndex extends 'i' ? number : TIndex]\n//     : never\n//   : TField extends `${infer TPrefix}[${infer TIndex extends\n//       | number\n//       | 'i'}].${infer TRest}`\n//   ? DeepValue<\n//       DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],\n//       TRest\n//     >\n//   : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`\n//   ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]\n//   : DeepValue<TFormData, TField>\n\nexport type FieldValue<TFormData, TField> = TFormData extends any[]\n  ? unknown extends TField\n    ? TFormData[number]\n    : DeepValue<TFormData[number], TField>\n  : DeepValue<TFormData, TField>\n\n// type Test1 = FieldValue<{ foo: { bar: string }[] }, 'foo'>\n// //   ^?\n// type Test2 = FieldValue<{ foo: { bar: string }[] }, 'foo[i]'>\n// //   ^?\n// type Test3 = FieldValue<{ foo: { bar: string }[] }, 'foo[2].bar'>\n// //   ^?\n\nexport type FieldComponent<TParentData, TFormData> = <TField>({\n  children,\n  ...fieldOptions\n}: {\n  children: (\n    fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>,\n  ) => any\n} & Omit<\n  UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,\n  'name' | 'index'\n> &\n  (TParentData extends any[]\n    ? {\n        name?: TField extends undefined ? TField : DeepKeys<TParentData>\n        index: number\n      }\n    : {\n        name: TField extends undefined ? TField : DeepKeys<TParentData>\n        index?: never\n      })) => any\n\nexport function Field<TData, TFormData>({\n  children,\n  ...fieldOptions\n}: {\n  children: (fieldApi: FieldApi<TData, TFormData>) => any\n} & UseFieldOptions<TData, TFormData>) {\n  const fieldApi = useField(fieldOptions as any)\n\n  return (\n    <formContext.Provider\n      value={{ formApi: fieldApi.form, parentFieldName: fieldApi.name }}\n      children={functionalUpdate(children, fieldApi as any)}\n    />\n  )\n}\n"],"names":["useField","opts","formApi","parentFieldName","useFormContext","fieldApi","React","useState","name","index","filter","d","undefined","join","api","FieldApi","form","Field","update","useStore","store","mode","state","meta","Object","keys","value","length","useEffect","mount","children","fieldOptions","createElement","formContext","Provider","functionalUpdate"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiCO,SAASA,QAAQA,CACtBC,IAAuC,EACX;AAC5B;EACA,MAAM;IAAEC,OAAO;AAAEC,IAAAA,eAAAA;GAAiB,GAAGC,0BAAc,EAAE,CAAA;EAErD,MAAM,CAACC,QAAQ,CAAC,GAAGC,gBAAK,CAACC,QAAQ,CAA6B,MAAM;AAClE,IAAA,MAAMC,IAAI,GAAG,CACX,OAAOP,IAAI,CAACQ,KAAK,KAAK,QAAQ,GAC1B,CAACN,eAAe,EAAEF,IAAI,CAACQ,KAAK,EAAER,IAAI,CAACO,IAAI,CAAC,GACxC,CAACL,eAAe,EAAEF,IAAI,CAACO,IAAI,CAAC,EAE/BE,MAAM,CAAEC,CAAC,IAAKA,CAAC,KAAKC,SAAS,CAAC,CAC9BC,IAAI,CAAC,GAAG,CAAC,CAAA;AAEZ,IAAA,MAAMC,GAAG,GAAG,IAAIC,iBAAQ,CAAC;AAAE,MAAA,GAAGd,IAAI;AAAEe,MAAAA,IAAI,EAAEd,OAAO;AAAEM,MAAAA,IAAI,EAAEA,IAAAA;AAAY,KAAC,CAAC,CAAA;IAEvEM,GAAG,CAACG,KAAK,GAAGA,KAAY,CAAA;AAExB,IAAA,OAAOH,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;;AAEF;EACAT,QAAQ,CAACa,MAAM,CAAC;AAAE,IAAA,GAAGjB,IAAI;AAAEe,IAAAA,IAAI,EAAEd,OAAAA;AAAQ,GAAU,CAAC,CAAA;AAEpDiB,EAAAA,mBAAQ,CACNd,QAAQ,CAACe,KAAK,EACdnB,IAAI,CAACoB,IAAI,KAAK,OAAO,GAChBC,KAAU,IAAK;AACd,IAAA,OAAO,CAACA,KAAK,CAACC,IAAI,EAAEC,MAAM,CAACC,IAAI,CAACH,KAAK,CAACI,KAAK,IAAI,EAAE,CAAC,CAACC,MAAM,CAAC,CAAA;GAC3D,GACDf,SACN,CAAC,CAAA;;AAED;AACAN,EAAAA,gBAAK,CAACsB,SAAS,CAAC,MAAMvB,QAAQ,CAACwB,KAAK,EAAE,EAAE,CAACxB,QAAQ,CAAC,CAAC,CAAA;AAEnD,EAAA,OAAOA,QAAQ,CAAA;AACjB,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAQA;AACA;AACA;AACA;AACA;AACA;AAuBO,SAASY,KAAKA,CAAmB;EACtCa,QAAQ;EACR,GAAGC,YAAAA;AAG+B,CAAC,EAAE;AACrC,EAAA,MAAM1B,QAAQ,GAAGL,QAAQ,CAAC+B,YAAmB,CAAC,CAAA;AAE9C,EAAA,oBACEzB,gBAAA,CAAA0B,aAAA,CAACC,uBAAW,CAACC,QAAQ,EAAA;AACnBR,IAAAA,KAAK,EAAE;MAAExB,OAAO,EAAEG,QAAQ,CAACW,IAAI;MAAEb,eAAe,EAAEE,QAAQ,CAACG,IAAAA;KAAO;AAClEsB,IAAAA,QAAQ,EAAEK,yBAAgB,CAACL,QAAQ,EAAEzB,QAAe,CAAA;AAAE,GACvD,CAAC,CAAA;AAEN;;;;;"}
+{"version":3,"file":"useField.legacy.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport type {\n  DeepKeys,\n  DeepValue,\n  FieldOptions,\n  Narrow,\n} from '@tanstack/form-core'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useFormContext, formContext } from './formContext'\nimport { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect'\nimport type { UseFieldOptions } from './types'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<TData, TFormData> {\n    Field: FieldComponent<TData, TFormData>\n  }\n}\n\nexport type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(\n  opts?: { name: Narrow<TField> } & UseFieldOptions<\n    DeepValue<TFormData, TField>,\n    TFormData\n  >,\n) => FieldApi<DeepValue<TFormData, TField>, TFormData>\n\nexport function useField<TData, TFormData>(\n  opts: UseFieldOptions<TData, TFormData>,\n): FieldApi<TData, TFormData> {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const [fieldApi] = useState<FieldApi<TData, TFormData>>(() => {\n    const name = (\n      typeof opts.index === 'number'\n        ? [parentFieldName, opts.index, opts.name]\n        : [parentFieldName, opts.name]\n    )\n      .filter((d) => d !== undefined)\n      .join('.')\n\n    const api = new FieldApi({ ...opts, form: formApi, name: name as any })\n\n    api.Field = Field as any\n\n    return api\n  })\n\n  /**\n   * fieldApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    fieldApi.update({ ...opts, form: formApi } as never)\n  })\n\n  useStore(\n    fieldApi.store as any,\n    opts.mode === 'array'\n      ? (state: any) => {\n          return [state.meta, Object.keys(state.value || []).length]\n        }\n      : undefined,\n  )\n\n  // Instantiates field meta and removes it when unrendered\n  useIsomorphicLayoutEffect(() => fieldApi.mount(), [fieldApi])\n\n  return fieldApi\n}\n\n// export type FieldValue<TFormData, TField> = TFormData extends any[]\n//   ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`\n//     ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>\n//     : TField extends `[${infer TIndex extends number | 'i'}]`\n//     ? TFormData[TIndex extends 'i' ? number : TIndex]\n//     : never\n//   : TField extends `${infer TPrefix}[${infer TIndex extends\n//       | number\n//       | 'i'}].${infer TRest}`\n//   ? DeepValue<\n//       DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],\n//       TRest\n//     >\n//   : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`\n//   ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]\n//   : DeepValue<TFormData, TField>\n\nexport type FieldValue<TFormData, TField> = TFormData extends any[]\n  ? unknown extends TField\n    ? TFormData[number]\n    : DeepValue<TFormData[number], TField>\n  : DeepValue<TFormData, TField>\n\n// type Test1 = FieldValue<{ foo: { bar: string }[] }, 'foo'>\n// //   ^?\n// type Test2 = FieldValue<{ foo: { bar: string }[] }, 'foo[i]'>\n// //   ^?\n// type Test3 = FieldValue<{ foo: { bar: string }[] }, 'foo[2].bar'>\n// //   ^?\n\nexport type FieldComponent<TParentData, TFormData> = <TField>({\n  children,\n  ...fieldOptions\n}: {\n  children: (\n    fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>,\n  ) => any\n} & Omit<\n  UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,\n  'name' | 'index'\n> &\n  (TParentData extends any[]\n    ? {\n        name?: TField extends undefined ? TField : DeepKeys<TParentData>\n        index: number\n      }\n    : {\n        name: TField extends undefined ? TField : DeepKeys<TParentData>\n        index?: never\n      })) => any\n\nexport function Field<TData, TFormData>({\n  children,\n  ...fieldOptions\n}: {\n  children: (fieldApi: FieldApi<TData, TFormData>) => any\n} & UseFieldOptions<TData, TFormData>) {\n  const fieldApi = useField(fieldOptions as any)\n\n  return (\n    <formContext.Provider\n      value={{ formApi: fieldApi.form, parentFieldName: fieldApi.name }}\n      children={functionalUpdate(children, fieldApi as any)}\n    />\n  )\n}\n"],"names":["useField","opts","formApi","parentFieldName","useFormContext","fieldApi","useState","name","index","filter","d","undefined","join","api","FieldApi","form","Field","useIsomorphicLayoutEffect","update","useStore","store","mode","state","meta","Object","keys","value","length","mount","children","fieldOptions","React","createElement","formContext","Provider","functionalUpdate"],"mappings":";;;;;;;;AA2BO,SAASA,QAAQA,CACtBC,IAAuC,EACX;AAC5B;EACA,MAAM;IAAEC,OAAO;AAAEC,IAAAA,eAAAA;GAAiB,GAAGC,0BAAc,EAAE,CAAA;AAErD,EAAA,MAAM,CAACC,QAAQ,CAAC,GAAGC,cAAQ,CAA6B,MAAM;AAC5D,IAAA,MAAMC,IAAI,GAAG,CACX,OAAON,IAAI,CAACO,KAAK,KAAK,QAAQ,GAC1B,CAACL,eAAe,EAAEF,IAAI,CAACO,KAAK,EAAEP,IAAI,CAACM,IAAI,CAAC,GACxC,CAACJ,eAAe,EAAEF,IAAI,CAACM,IAAI,CAAC,EAE/BE,MAAM,CAAEC,CAAC,IAAKA,CAAC,KAAKC,SAAS,CAAC,CAC9BC,IAAI,CAAC,GAAG,CAAC,CAAA;AAEZ,IAAA,MAAMC,GAAG,GAAG,IAAIC,iBAAQ,CAAC;AAAE,MAAA,GAAGb,IAAI;AAAEc,MAAAA,IAAI,EAAEb,OAAO;AAAEK,MAAAA,IAAI,EAAEA,IAAAA;AAAY,KAAC,CAAC,CAAA;IAEvEM,GAAG,CAACG,KAAK,GAAGA,KAAY,CAAA;AAExB,IAAA,OAAOH,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;;AAEF;AACF;AACA;AACA;AACEI,EAAAA,mDAAyB,CAAC,MAAM;IAC9BZ,QAAQ,CAACa,MAAM,CAAC;AAAE,MAAA,GAAGjB,IAAI;AAAEc,MAAAA,IAAI,EAAEb,OAAAA;AAAQ,KAAU,CAAC,CAAA;AACtD,GAAC,CAAC,CAAA;AAEFiB,EAAAA,mBAAQ,CACNd,QAAQ,CAACe,KAAK,EACdnB,IAAI,CAACoB,IAAI,KAAK,OAAO,GAChBC,KAAU,IAAK;AACd,IAAA,OAAO,CAACA,KAAK,CAACC,IAAI,EAAEC,MAAM,CAACC,IAAI,CAACH,KAAK,CAACI,KAAK,IAAI,EAAE,CAAC,CAACC,MAAM,CAAC,CAAA;GAC3D,GACDhB,SACN,CAAC,CAAA;;AAED;EACAM,mDAAyB,CAAC,MAAMZ,QAAQ,CAACuB,KAAK,EAAE,EAAE,CAACvB,QAAQ,CAAC,CAAC,CAAA;AAE7D,EAAA,OAAOA,QAAQ,CAAA;AACjB,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAQA;AACA;AACA;AACA;AACA;AACA;AAuBO,SAASW,KAAKA,CAAmB;EACtCa,QAAQ;EACR,GAAGC,YAAAA;AAG+B,CAAC,EAAE;AACrC,EAAA,MAAMzB,QAAQ,GAAGL,QAAQ,CAAC8B,YAAmB,CAAC,CAAA;AAE9C,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAACC,uBAAW,CAACC,QAAQ,EAAA;AACnBR,IAAAA,KAAK,EAAE;MAAExB,OAAO,EAAEG,QAAQ,CAACU,IAAI;MAAEZ,eAAe,EAAEE,QAAQ,CAACE,IAAAA;KAAO;AAClEsB,IAAAA,QAAQ,EAAEM,yBAAgB,CAACN,QAAQ,EAAExB,QAAe,CAAA;AAAE,GACvD,CAAC,CAAA;AAEN;;;;;"}

package/build/lib/useField.legacy.js

@@ -1,7 +1,8 @@
-import * as React from 'react';
+import React__default, { useState } from 'react';
 import { useStore } from '@tanstack/react-store';
 import { FieldApi, functionalUpdate } from '@tanstack/form-core';
 import { useFormContext, formContext } from './formContext.legacy.js';
+import { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect.legacy.js';
 
 function useField(opts) {
   // Get the form API either manually or from context
@@ -9,7 +10,7 @@ function useField(opts) {
     formApi,
     parentFieldName
   } = useFormContext();
-  const [fieldApi] = React.useState(() => {
+  const [fieldApi] = useState(() => {
     const name = (typeof opts.index === 'number' ? [parentFieldName, opts.index, opts.name] : [parentFieldName, opts.name]).filter(d => d !== undefined).join('.');
     const api = new FieldApi({
       ...opts,
@@ -20,17 +21,22 @@ function useField(opts) {
     return api;
   });
 
-  // Keep options up to date as they are rendered
-  fieldApi.update({
-    ...opts,
-    form: formApi
+  /**
+   * fieldApi.update should not have any side effects. Think of it like a `useRef`
+   * that we need to keep updated every render with the most up-to-date information.
+   */
+  useIsomorphicLayoutEffect(() => {
+    fieldApi.update({
+      ...opts,
+      form: formApi
+    });
   });
   useStore(fieldApi.store, opts.mode === 'array' ? state => {
     return [state.meta, Object.keys(state.value || []).length];
   } : undefined);
 
   // Instantiates field meta and removes it when unrendered
-  React.useEffect(() => fieldApi.mount(), [fieldApi]);
+  useIsomorphicLayoutEffect(() => fieldApi.mount(), [fieldApi]);
   return fieldApi;
 }
 
@@ -61,7 +67,7 @@ function Field({
   ...fieldOptions
 }) {
   const fieldApi = useField(fieldOptions);
-  return /*#__PURE__*/React.createElement(formContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(formContext.Provider, {
     value: {
       formApi: fieldApi.form,
       parentFieldName: fieldApi.name

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

@@ -1 +1 @@
-{"version":3,"file":"useField.legacy.js","sources":["../../src/useField.tsx"],"sourcesContent":["import * as React from 'react'\n//\nimport { useStore } from '@tanstack/react-store'\nimport type {\n  DeepKeys,\n  DeepValue,\n  FieldOptions,\n  Narrow,\n} from '@tanstack/form-core'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useFormContext, formContext } from './formContext'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<TData, TFormData> {\n    Field: FieldComponent<TData, TFormData>\n  }\n}\n\nexport type UseFieldOptions<TData, TFormData> = FieldOptions<\n  TData,\n  TFormData\n> & {\n  mode?: 'value' | 'array'\n}\n\nexport type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(\n  opts?: { name: Narrow<TField> } & UseFieldOptions<\n    DeepValue<TFormData, TField>,\n    TFormData\n  >,\n) => FieldApi<DeepValue<TFormData, TField>, TFormData>\n\nexport function useField<TData, TFormData>(\n  opts: UseFieldOptions<TData, TFormData>,\n): FieldApi<TData, TFormData> {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const [fieldApi] = React.useState<FieldApi<TData, TFormData>>(() => {\n    const name = (\n      typeof opts.index === 'number'\n        ? [parentFieldName, opts.index, opts.name]\n        : [parentFieldName, opts.name]\n    )\n      .filter((d) => d !== undefined)\n      .join('.')\n\n    const api = new FieldApi({ ...opts, form: formApi, name: name as any })\n\n    api.Field = Field as any\n\n    return api\n  })\n\n  // Keep options up to date as they are rendered\n  fieldApi.update({ ...opts, form: formApi } as never)\n\n  useStore(\n    fieldApi.store as any,\n    opts.mode === 'array'\n      ? (state: any) => {\n          return [state.meta, Object.keys(state.value || []).length]\n        }\n      : undefined,\n  )\n\n  // Instantiates field meta and removes it when unrendered\n  React.useEffect(() => fieldApi.mount(), [fieldApi])\n\n  return fieldApi\n}\n\n// export type FieldValue<TFormData, TField> = TFormData extends any[]\n//   ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`\n//     ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>\n//     : TField extends `[${infer TIndex extends number | 'i'}]`\n//     ? TFormData[TIndex extends 'i' ? number : TIndex]\n//     : never\n//   : TField extends `${infer TPrefix}[${infer TIndex extends\n//       | number\n//       | 'i'}].${infer TRest}`\n//   ? DeepValue<\n//       DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],\n//       TRest\n//     >\n//   : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`\n//   ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]\n//   : DeepValue<TFormData, TField>\n\nexport type FieldValue<TFormData, TField> = TFormData extends any[]\n  ? unknown extends TField\n    ? TFormData[number]\n    : DeepValue<TFormData[number], TField>\n  : DeepValue<TFormData, TField>\n\n// type Test1 = FieldValue<{ foo: { bar: string }[] }, 'foo'>\n// //   ^?\n// type Test2 = FieldValue<{ foo: { bar: string }[] }, 'foo[i]'>\n// //   ^?\n// type Test3 = FieldValue<{ foo: { bar: string }[] }, 'foo[2].bar'>\n// //   ^?\n\nexport type FieldComponent<TParentData, TFormData> = <TField>({\n  children,\n  ...fieldOptions\n}: {\n  children: (\n    fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>,\n  ) => any\n} & Omit<\n  UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,\n  'name' | 'index'\n> &\n  (TParentData extends any[]\n    ? {\n        name?: TField extends undefined ? TField : DeepKeys<TParentData>\n        index: number\n      }\n    : {\n        name: TField extends undefined ? TField : DeepKeys<TParentData>\n        index?: never\n      })) => any\n\nexport function Field<TData, TFormData>({\n  children,\n  ...fieldOptions\n}: {\n  children: (fieldApi: FieldApi<TData, TFormData>) => any\n} & UseFieldOptions<TData, TFormData>) {\n  const fieldApi = useField(fieldOptions as any)\n\n  return (\n    <formContext.Provider\n      value={{ formApi: fieldApi.form, parentFieldName: fieldApi.name }}\n      children={functionalUpdate(children, fieldApi as any)}\n    />\n  )\n}\n"],"names":["useField","opts","formApi","parentFieldName","useFormContext","fieldApi","React","useState","name","index","filter","d","undefined","join","api","FieldApi","form","Field","update","useStore","store","mode","state","meta","Object","keys","value","length","useEffect","mount","children","fieldOptions","createElement","formContext","Provider","functionalUpdate"],"mappings":";;;;;AAiCO,SAASA,QAAQA,CACtBC,IAAuC,EACX;AAC5B;EACA,MAAM;IAAEC,OAAO;AAAEC,IAAAA,eAAAA;GAAiB,GAAGC,cAAc,EAAE,CAAA;EAErD,MAAM,CAACC,QAAQ,CAAC,GAAGC,KAAK,CAACC,QAAQ,CAA6B,MAAM;AAClE,IAAA,MAAMC,IAAI,GAAG,CACX,OAAOP,IAAI,CAACQ,KAAK,KAAK,QAAQ,GAC1B,CAACN,eAAe,EAAEF,IAAI,CAACQ,KAAK,EAAER,IAAI,CAACO,IAAI,CAAC,GACxC,CAACL,eAAe,EAAEF,IAAI,CAACO,IAAI,CAAC,EAE/BE,MAAM,CAAEC,CAAC,IAAKA,CAAC,KAAKC,SAAS,CAAC,CAC9BC,IAAI,CAAC,GAAG,CAAC,CAAA;AAEZ,IAAA,MAAMC,GAAG,GAAG,IAAIC,QAAQ,CAAC;AAAE,MAAA,GAAGd,IAAI;AAAEe,MAAAA,IAAI,EAAEd,OAAO;AAAEM,MAAAA,IAAI,EAAEA,IAAAA;AAAY,KAAC,CAAC,CAAA;IAEvEM,GAAG,CAACG,KAAK,GAAGA,KAAY,CAAA;AAExB,IAAA,OAAOH,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;;AAEF;EACAT,QAAQ,CAACa,MAAM,CAAC;AAAE,IAAA,GAAGjB,IAAI;AAAEe,IAAAA,IAAI,EAAEd,OAAAA;AAAQ,GAAU,CAAC,CAAA;AAEpDiB,EAAAA,QAAQ,CACNd,QAAQ,CAACe,KAAK,EACdnB,IAAI,CAACoB,IAAI,KAAK,OAAO,GAChBC,KAAU,IAAK;AACd,IAAA,OAAO,CAACA,KAAK,CAACC,IAAI,EAAEC,MAAM,CAACC,IAAI,CAACH,KAAK,CAACI,KAAK,IAAI,EAAE,CAAC,CAACC,MAAM,CAAC,CAAA;GAC3D,GACDf,SACN,CAAC,CAAA;;AAED;AACAN,EAAAA,KAAK,CAACsB,SAAS,CAAC,MAAMvB,QAAQ,CAACwB,KAAK,EAAE,EAAE,CAACxB,QAAQ,CAAC,CAAC,CAAA;AAEnD,EAAA,OAAOA,QAAQ,CAAA;AACjB,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAQA;AACA;AACA;AACA;AACA;AACA;AAuBO,SAASY,KAAKA,CAAmB;EACtCa,QAAQ;EACR,GAAGC,YAAAA;AAG+B,CAAC,EAAE;AACrC,EAAA,MAAM1B,QAAQ,GAAGL,QAAQ,CAAC+B,YAAmB,CAAC,CAAA;AAE9C,EAAA,oBACEzB,KAAA,CAAA0B,aAAA,CAACC,WAAW,CAACC,QAAQ,EAAA;AACnBR,IAAAA,KAAK,EAAE;MAAExB,OAAO,EAAEG,QAAQ,CAACW,IAAI;MAAEb,eAAe,EAAEE,QAAQ,CAACG,IAAAA;KAAO;AAClEsB,IAAAA,QAAQ,EAAEK,gBAAgB,CAACL,QAAQ,EAAEzB,QAAe,CAAA;AAAE,GACvD,CAAC,CAAA;AAEN;;;;"}
+{"version":3,"file":"useField.legacy.js","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport type {\n  DeepKeys,\n  DeepValue,\n  FieldOptions,\n  Narrow,\n} from '@tanstack/form-core'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useFormContext, formContext } from './formContext'\nimport { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect'\nimport type { UseFieldOptions } from './types'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<TData, TFormData> {\n    Field: FieldComponent<TData, TFormData>\n  }\n}\n\nexport type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(\n  opts?: { name: Narrow<TField> } & UseFieldOptions<\n    DeepValue<TFormData, TField>,\n    TFormData\n  >,\n) => FieldApi<DeepValue<TFormData, TField>, TFormData>\n\nexport function useField<TData, TFormData>(\n  opts: UseFieldOptions<TData, TFormData>,\n): FieldApi<TData, TFormData> {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const [fieldApi] = useState<FieldApi<TData, TFormData>>(() => {\n    const name = (\n      typeof opts.index === 'number'\n        ? [parentFieldName, opts.index, opts.name]\n        : [parentFieldName, opts.name]\n    )\n      .filter((d) => d !== undefined)\n      .join('.')\n\n    const api = new FieldApi({ ...opts, form: formApi, name: name as any })\n\n    api.Field = Field as any\n\n    return api\n  })\n\n  /**\n   * fieldApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    fieldApi.update({ ...opts, form: formApi } as never)\n  })\n\n  useStore(\n    fieldApi.store as any,\n    opts.mode === 'array'\n      ? (state: any) => {\n          return [state.meta, Object.keys(state.value || []).length]\n        }\n      : undefined,\n  )\n\n  // Instantiates field meta and removes it when unrendered\n  useIsomorphicLayoutEffect(() => fieldApi.mount(), [fieldApi])\n\n  return fieldApi\n}\n\n// export type FieldValue<TFormData, TField> = TFormData extends any[]\n//   ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`\n//     ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>\n//     : TField extends `[${infer TIndex extends number | 'i'}]`\n//     ? TFormData[TIndex extends 'i' ? number : TIndex]\n//     : never\n//   : TField extends `${infer TPrefix}[${infer TIndex extends\n//       | number\n//       | 'i'}].${infer TRest}`\n//   ? DeepValue<\n//       DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],\n//       TRest\n//     >\n//   : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`\n//   ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]\n//   : DeepValue<TFormData, TField>\n\nexport type FieldValue<TFormData, TField> = TFormData extends any[]\n  ? unknown extends TField\n    ? TFormData[number]\n    : DeepValue<TFormData[number], TField>\n  : DeepValue<TFormData, TField>\n\n// type Test1 = FieldValue<{ foo: { bar: string }[] }, 'foo'>\n// //   ^?\n// type Test2 = FieldValue<{ foo: { bar: string }[] }, 'foo[i]'>\n// //   ^?\n// type Test3 = FieldValue<{ foo: { bar: string }[] }, 'foo[2].bar'>\n// //   ^?\n\nexport type FieldComponent<TParentData, TFormData> = <TField>({\n  children,\n  ...fieldOptions\n}: {\n  children: (\n    fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>,\n  ) => any\n} & Omit<\n  UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,\n  'name' | 'index'\n> &\n  (TParentData extends any[]\n    ? {\n        name?: TField extends undefined ? TField : DeepKeys<TParentData>\n        index: number\n      }\n    : {\n        name: TField extends undefined ? TField : DeepKeys<TParentData>\n        index?: never\n      })) => any\n\nexport function Field<TData, TFormData>({\n  children,\n  ...fieldOptions\n}: {\n  children: (fieldApi: FieldApi<TData, TFormData>) => any\n} & UseFieldOptions<TData, TFormData>) {\n  const fieldApi = useField(fieldOptions as any)\n\n  return (\n    <formContext.Provider\n      value={{ formApi: fieldApi.form, parentFieldName: fieldApi.name }}\n      children={functionalUpdate(children, fieldApi as any)}\n    />\n  )\n}\n"],"names":["useField","opts","formApi","parentFieldName","useFormContext","fieldApi","useState","name","index","filter","d","undefined","join","api","FieldApi","form","Field","useIsomorphicLayoutEffect","update","useStore","store","mode","state","meta","Object","keys","value","length","mount","children","fieldOptions","React","createElement","formContext","Provider","functionalUpdate"],"mappings":";;;;;;AA2BO,SAASA,QAAQA,CACtBC,IAAuC,EACX;AAC5B;EACA,MAAM;IAAEC,OAAO;AAAEC,IAAAA,eAAAA;GAAiB,GAAGC,cAAc,EAAE,CAAA;AAErD,EAAA,MAAM,CAACC,QAAQ,CAAC,GAAGC,QAAQ,CAA6B,MAAM;AAC5D,IAAA,MAAMC,IAAI,GAAG,CACX,OAAON,IAAI,CAACO,KAAK,KAAK,QAAQ,GAC1B,CAACL,eAAe,EAAEF,IAAI,CAACO,KAAK,EAAEP,IAAI,CAACM,IAAI,CAAC,GACxC,CAACJ,eAAe,EAAEF,IAAI,CAACM,IAAI,CAAC,EAE/BE,MAAM,CAAEC,CAAC,IAAKA,CAAC,KAAKC,SAAS,CAAC,CAC9BC,IAAI,CAAC,GAAG,CAAC,CAAA;AAEZ,IAAA,MAAMC,GAAG,GAAG,IAAIC,QAAQ,CAAC;AAAE,MAAA,GAAGb,IAAI;AAAEc,MAAAA,IAAI,EAAEb,OAAO;AAAEK,MAAAA,IAAI,EAAEA,IAAAA;AAAY,KAAC,CAAC,CAAA;IAEvEM,GAAG,CAACG,KAAK,GAAGA,KAAY,CAAA;AAExB,IAAA,OAAOH,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;;AAEF;AACF;AACA;AACA;AACEI,EAAAA,yBAAyB,CAAC,MAAM;IAC9BZ,QAAQ,CAACa,MAAM,CAAC;AAAE,MAAA,GAAGjB,IAAI;AAAEc,MAAAA,IAAI,EAAEb,OAAAA;AAAQ,KAAU,CAAC,CAAA;AACtD,GAAC,CAAC,CAAA;AAEFiB,EAAAA,QAAQ,CACNd,QAAQ,CAACe,KAAK,EACdnB,IAAI,CAACoB,IAAI,KAAK,OAAO,GAChBC,KAAU,IAAK;AACd,IAAA,OAAO,CAACA,KAAK,CAACC,IAAI,EAAEC,MAAM,CAACC,IAAI,CAACH,KAAK,CAACI,KAAK,IAAI,EAAE,CAAC,CAACC,MAAM,CAAC,CAAA;GAC3D,GACDhB,SACN,CAAC,CAAA;;AAED;EACAM,yBAAyB,CAAC,MAAMZ,QAAQ,CAACuB,KAAK,EAAE,EAAE,CAACvB,QAAQ,CAAC,CAAC,CAAA;AAE7D,EAAA,OAAOA,QAAQ,CAAA;AACjB,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAQA;AACA;AACA;AACA;AACA;AACA;AAuBO,SAASW,KAAKA,CAAmB;EACtCa,QAAQ;EACR,GAAGC,YAAAA;AAG+B,CAAC,EAAE;AACrC,EAAA,MAAMzB,QAAQ,GAAGL,QAAQ,CAAC8B,YAAmB,CAAC,CAAA;AAE9C,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAACC,WAAW,CAACC,QAAQ,EAAA;AACnBR,IAAAA,KAAK,EAAE;MAAExB,OAAO,EAAEG,QAAQ,CAACU,IAAI;MAAEZ,eAAe,EAAEE,QAAQ,CAACE,IAAAA;KAAO;AAClEsB,IAAAA,QAAQ,EAAEM,gBAAgB,CAACN,QAAQ,EAAExB,QAAe,CAAA;AAAE,GACvD,CAAC,CAAA;AAEN;;;;"}

package/build/lib/useForm.cjs

@@ -6,6 +6,7 @@ var reactStore = require('@tanstack/react-store');
 var React = require('react');
 var useField = require('./useField.cjs');
 var formContext = require('./formContext.cjs');
+var useIsomorphicLayoutEffect = require('./utils/useIsomorphicLayoutEffect.cjs');
 
 function useForm(opts) {
   const [formApi] = React.useState(() => {
@@ -36,9 +37,14 @@ function useForm(opts) {
     return api;
   });
   formApi.useStore(state => state.isSubmitting);
-  React.useEffect(() => {
+
+  /**
+   * formApi.update should not have any side effects. Think of it like a `useRef`
+   * that we need to keep updated every render with the most up-to-date information.
+   */
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
     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\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: { children: any }) => any\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 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.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","Field","useField","useStore","selector","store","Subscribe","functionalUpdate","children","state","isSubmitting","useEffect","update"],"mappings":";;;;;;;;;AA0BO,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,KAAK,GAAGA,cAAY,CAAA;IACxBR,GAAG,CAACS,QAAQ,GAAGA,iBAAe,CAAA;IAC9BT,GAAG,CAACU,QAAQ,GAAG;AACb;AACAC,IAAAA,QAAQ,KACL;AACH;AACA,MAAA,OAAOD,mBAAQ,CAACV,GAAG,CAACY,KAAK,EAASD,QAAe,CAAC,CAAA;KACnD,CAAA;IACDX,GAAG,CAACa,SAAS,GAAG;AACd;AACAV,IAAAA,KAAK,KACF;AACH,MAAA,OAAOW,yBAAgB,CACrBX,KAAK,CAACY,QAAQ;AACd;MACAL,mBAAQ,CAACV,GAAG,CAACY,KAAK,EAAST,KAAK,CAACQ,QAAe,CAClD,CAAC,CAAA;KACF,CAAA;AAED,IAAA,OAAOX,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;EAEFH,OAAO,CAACa,QAAQ,CAAEM,KAAK,IAAKA,KAAK,CAACC,YAAY,CAAC,CAAA;EAE/CnB,KAAK,CAACoB,SAAS,CAAC,MAAM;AACpBrB,IAAAA,OAAO,CAACsB,MAAM,CAACvB,IAAI,CAAC,CAAA;AACtB,GAAC,EAAE,CAACC,OAAO,EAAED,IAAI,CAAC,CAAC,CAAA;AAEnB,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, { type ReactNode, useState } from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\nimport { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: { children: any }) => any\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: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n    }) => any\n  }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const [formApi] = 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.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  /**\n   * formApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    formApi.update(opts)\n  })\n\n  return formApi as any\n}\n"],"names":["useForm","opts","formApi","useState","api","FormApi","Provider","props","React","createElement","formContext","_extends","value","Field","useField","useStore","selector","store","Subscribe","functionalUpdate","children","state","isSubmitting","useIsomorphicLayoutEffect","update"],"mappings":";;;;;;;;;;AAyBO,SAASA,OAAOA,CAAQC,IAAyB,EAAkB;AACxE,EAAA,MAAM,CAACC,OAAO,CAAC,GAAGC,cAAQ,CAAC,MAAM;AAC/B;AACA,IAAA,MAAMC,GAAG,GAAG,IAAIC,gBAAO,CAAQJ,IAAI,CAAC,CAAA;;AAEpC;AACAG,IAAAA,GAAG,CAACE,QAAQ,GAAIC,KAAK,iBACnBC,KAAA,CAAAC,aAAA,CAACC,uBAAW,CAACJ,QAAQ,EAAAK,iCAAA,KAAKJ,KAAK,EAAA;AAAEK,MAAAA,KAAK,EAAE;AAAEV,QAAAA,OAAO,EAAEE,GAAAA;AAAI,OAAA;AAAE,KAAA,CAAE,CAC5D,CAAA;IACDA,GAAG,CAACS,KAAK,GAAGA,cAAY,CAAA;IACxBT,GAAG,CAACU,QAAQ,GAAGA,iBAAe,CAAA;IAC9BV,GAAG,CAACW,QAAQ,GAAG;AACb;AACAC,IAAAA,QAAQ,KACL;AACH;AACA,MAAA,OAAOD,mBAAQ,CAACX,GAAG,CAACa,KAAK,EAASD,QAAe,CAAC,CAAA;KACnD,CAAA;IACDZ,GAAG,CAACc,SAAS,GAAG;AACd;AACAX,IAAAA,KAAK,KACF;AACH,MAAA,OAAOY,yBAAgB,CACrBZ,KAAK,CAACa,QAAQ;AACd;MACAL,mBAAQ,CAACX,GAAG,CAACa,KAAK,EAASV,KAAK,CAACS,QAAe,CAClD,CAAC,CAAA;KACF,CAAA;AAED,IAAA,OAAOZ,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;EAEFF,OAAO,CAACa,QAAQ,CAAEM,KAAK,IAAKA,KAAK,CAACC,YAAY,CAAC,CAAA;;AAE/C;AACF;AACA;AACA;AACEC,EAAAA,mDAAyB,CAAC,MAAM;AAC9BrB,IAAAA,OAAO,CAACsB,MAAM,CAACvB,IAAI,CAAC,CAAA;AACtB,GAAC,CAAC,CAAA;AAEF,EAAA,OAAOC,OAAO,CAAA;AAChB;;;;"}

package/build/lib/useForm.d.ts

@@ -1,7 +1,7 @@
 import type { FormState, FormOptions } from '@tanstack/form-core';
 import { FormApi } from '@tanstack/form-core';
 import type { NoInfer } from '@tanstack/react-store';
-import React from 'react';
+import { type ReactNode } from 'react';
 import { type UseField, type FieldComponent } from './useField';
 declare module '@tanstack/form-core' {
     interface FormApi<TFormData> {
@@ -13,7 +13,7 @@ declare module '@tanstack/form-core' {
         useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
         Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
             selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
-            children: ((state: NoInfer<TSelected>) => React.ReactNode) | React.ReactNode;
+            children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode;
         }) => any;
     }
 }

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,OAAO,QAAQ,qBAAqB,CAAC;IAEnC,UAAU,OAAO,CAAC,SAAS;QACzB,QAAQ,EAAE,CAAC,KAAK,EAAE;YAAE,QAAQ,EAAE,GAAG,CAAA;SAAE,KAAK,GAAG,CAAA;QAC3C,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,wBAAgB,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CAuCxE"}
+{"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,OAAc,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AACvD,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAmB,MAAM,YAAY,CAAA;AAIhF,OAAO,QAAQ,qBAAqB,CAAC;IAEnC,UAAU,OAAO,CAAC,SAAS;QACzB,QAAQ,EAAE,CAAC,KAAK,EAAE;YAAE,QAAQ,EAAE,GAAG,CAAA;SAAE,KAAK,GAAG,CAAA;QAC3C,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,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,KAAK,SAAS,CAAC,GAAG,SAAS,CAAA;SACjE,KAAK,GAAG,CAAA;KACV;CACF;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CA2CxE"}

package/build/lib/useForm.js

@@ -1,12 +1,13 @@
 import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
 import { FormApi, functionalUpdate } from '@tanstack/form-core';
 import { useStore } from '@tanstack/react-store';
-import React__default from 'react';
+import React__default, { useState } from 'react';
 import { Field, useField } from './useField.js';
 import { formContext } from './formContext.js';
+import { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect.js';
 
 function useForm(opts) {
-  const [formApi] = React__default.useState(() => {
+  const [formApi] = useState(() => {
     // @ts-ignore
     const api = new FormApi(opts);
 
@@ -34,9 +35,14 @@ function useForm(opts) {
     return api;
   });
   formApi.useStore(state => state.isSubmitting);
-  React__default.useEffect(() => {
+
+  /**
+   * formApi.update should not have any side effects. Think of it like a `useRef`
+   * that we need to keep updated every render with the most up-to-date information.
+   */
+  useIsomorphicLayoutEffect(() => {
     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\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: { children: any }) => any\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 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.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","Field","useField","useStore","selector","store","Subscribe","functionalUpdate","children","state","isSubmitting","useEffect","update"],"mappings":";;;;;;;AA0BO,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,KAAK,GAAGA,KAAY,CAAA;IACxBR,GAAG,CAACS,QAAQ,GAAGA,QAAe,CAAA;IAC9BT,GAAG,CAACU,QAAQ,GAAG;AACb;AACAC,IAAAA,QAAQ,KACL;AACH;AACA,MAAA,OAAOD,QAAQ,CAACV,GAAG,CAACY,KAAK,EAASD,QAAe,CAAC,CAAA;KACnD,CAAA;IACDX,GAAG,CAACa,SAAS,GAAG;AACd;AACAV,IAAAA,KAAK,KACF;AACH,MAAA,OAAOW,gBAAgB,CACrBX,KAAK,CAACY,QAAQ;AACd;MACAL,QAAQ,CAACV,GAAG,CAACY,KAAK,EAAST,KAAK,CAACQ,QAAe,CAClD,CAAC,CAAA;KACF,CAAA;AAED,IAAA,OAAOX,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;EAEFH,OAAO,CAACa,QAAQ,CAAEM,KAAK,IAAKA,KAAK,CAACC,YAAY,CAAC,CAAA;EAE/CnB,cAAK,CAACoB,SAAS,CAAC,MAAM;AACpBrB,IAAAA,OAAO,CAACsB,MAAM,CAACvB,IAAI,CAAC,CAAA;AACtB,GAAC,EAAE,CAACC,OAAO,EAAED,IAAI,CAAC,CAAC,CAAA;AAEnB,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, { type ReactNode, useState } from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\nimport { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: { children: any }) => any\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: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n    }) => any\n  }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const [formApi] = 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.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  /**\n   * formApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    formApi.update(opts)\n  })\n\n  return formApi as any\n}\n"],"names":["useForm","opts","formApi","useState","api","FormApi","Provider","props","React","createElement","formContext","_extends","value","Field","useField","useStore","selector","store","Subscribe","functionalUpdate","children","state","isSubmitting","useIsomorphicLayoutEffect","update"],"mappings":";;;;;;;;AAyBO,SAASA,OAAOA,CAAQC,IAAyB,EAAkB;AACxE,EAAA,MAAM,CAACC,OAAO,CAAC,GAAGC,QAAQ,CAAC,MAAM;AAC/B;AACA,IAAA,MAAMC,GAAG,GAAG,IAAIC,OAAO,CAAQJ,IAAI,CAAC,CAAA;;AAEpC;AACAG,IAAAA,GAAG,CAACE,QAAQ,GAAIC,KAAK,iBACnBC,cAAA,CAAAC,aAAA,CAACC,WAAW,CAACJ,QAAQ,EAAAK,QAAA,KAAKJ,KAAK,EAAA;AAAEK,MAAAA,KAAK,EAAE;AAAEV,QAAAA,OAAO,EAAEE,GAAAA;AAAI,OAAA;AAAE,KAAA,CAAE,CAC5D,CAAA;IACDA,GAAG,CAACS,KAAK,GAAGA,KAAY,CAAA;IACxBT,GAAG,CAACU,QAAQ,GAAGA,QAAe,CAAA;IAC9BV,GAAG,CAACW,QAAQ,GAAG;AACb;AACAC,IAAAA,QAAQ,KACL;AACH;AACA,MAAA,OAAOD,QAAQ,CAACX,GAAG,CAACa,KAAK,EAASD,QAAe,CAAC,CAAA;KACnD,CAAA;IACDZ,GAAG,CAACc,SAAS,GAAG;AACd;AACAX,IAAAA,KAAK,KACF;AACH,MAAA,OAAOY,gBAAgB,CACrBZ,KAAK,CAACa,QAAQ;AACd;MACAL,QAAQ,CAACX,GAAG,CAACa,KAAK,EAASV,KAAK,CAACS,QAAe,CAClD,CAAC,CAAA;KACF,CAAA;AAED,IAAA,OAAOZ,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;EAEFF,OAAO,CAACa,QAAQ,CAAEM,KAAK,IAAKA,KAAK,CAACC,YAAY,CAAC,CAAA;;AAE/C;AACF;AACA;AACA;AACEC,EAAAA,yBAAyB,CAAC,MAAM;AAC9BrB,IAAAA,OAAO,CAACsB,MAAM,CAACvB,IAAI,CAAC,CAAA;AACtB,GAAC,CAAC,CAAA;AAEF,EAAA,OAAOC,OAAO,CAAA;AAChB;;;;"}

package/build/lib/useForm.legacy.cjs

@@ -6,6 +6,7 @@ var reactStore = require('@tanstack/react-store');
 var React = require('react');
 var useField = require('./useField.legacy.cjs');
 var formContext = require('./formContext.legacy.cjs');
+var useIsomorphicLayoutEffect = require('./utils/useIsomorphicLayoutEffect.legacy.cjs');
 
 function useForm(opts) {
   const [formApi] = React.useState(() => {
@@ -36,9 +37,14 @@ function useForm(opts) {
     return api;
   });
   formApi.useStore(state => state.isSubmitting);
-  React.useEffect(() => {
+
+  /**
+   * formApi.update should not have any side effects. Think of it like a `useRef`
+   * that we need to keep updated every render with the most up-to-date information.
+   */
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
     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\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: { children: any }) => any\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 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.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","Field","useField","useStore","selector","store","Subscribe","functionalUpdate","children","state","isSubmitting","useEffect","update"],"mappings":";;;;;;;;;AA0BO,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,KAAK,GAAGA,cAAY,CAAA;IACxBR,GAAG,CAACS,QAAQ,GAAGA,iBAAe,CAAA;IAC9BT,GAAG,CAACU,QAAQ,GAAG;AACb;AACAC,IAAAA,QAAQ,KACL;AACH;AACA,MAAA,OAAOD,mBAAQ,CAACV,GAAG,CAACY,KAAK,EAASD,QAAe,CAAC,CAAA;KACnD,CAAA;IACDX,GAAG,CAACa,SAAS,GAAG;AACd;AACAV,IAAAA,KAAK,KACF;AACH,MAAA,OAAOW,yBAAgB,CACrBX,KAAK,CAACY,QAAQ;AACd;MACAL,mBAAQ,CAACV,GAAG,CAACY,KAAK,EAAST,KAAK,CAACQ,QAAe,CAClD,CAAC,CAAA;KACF,CAAA;AAED,IAAA,OAAOX,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;EAEFH,OAAO,CAACa,QAAQ,CAAEM,KAAK,IAAKA,KAAK,CAACC,YAAY,CAAC,CAAA;EAE/CnB,KAAK,CAACoB,SAAS,CAAC,MAAM;AACpBrB,IAAAA,OAAO,CAACsB,MAAM,CAACvB,IAAI,CAAC,CAAA;AACtB,GAAC,EAAE,CAACC,OAAO,EAAED,IAAI,CAAC,CAAC,CAAA;AAEnB,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, { type ReactNode, useState } from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\nimport { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: { children: any }) => any\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: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n    }) => any\n  }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const [formApi] = 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.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  /**\n   * formApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    formApi.update(opts)\n  })\n\n  return formApi as any\n}\n"],"names":["useForm","opts","formApi","useState","api","FormApi","Provider","props","React","createElement","formContext","_extends","value","Field","useField","useStore","selector","store","Subscribe","functionalUpdate","children","state","isSubmitting","useIsomorphicLayoutEffect","update"],"mappings":";;;;;;;;;;AAyBO,SAASA,OAAOA,CAAQC,IAAyB,EAAkB;AACxE,EAAA,MAAM,CAACC,OAAO,CAAC,GAAGC,cAAQ,CAAC,MAAM;AAC/B;AACA,IAAA,MAAMC,GAAG,GAAG,IAAIC,gBAAO,CAAQJ,IAAI,CAAC,CAAA;;AAEpC;AACAG,IAAAA,GAAG,CAACE,QAAQ,GAAIC,KAAK,iBACnBC,KAAA,CAAAC,aAAA,CAACC,uBAAW,CAACJ,QAAQ,EAAAK,iCAAA,KAAKJ,KAAK,EAAA;AAAEK,MAAAA,KAAK,EAAE;AAAEV,QAAAA,OAAO,EAAEE,GAAAA;AAAI,OAAA;AAAE,KAAA,CAAE,CAC5D,CAAA;IACDA,GAAG,CAACS,KAAK,GAAGA,cAAY,CAAA;IACxBT,GAAG,CAACU,QAAQ,GAAGA,iBAAe,CAAA;IAC9BV,GAAG,CAACW,QAAQ,GAAG;AACb;AACAC,IAAAA,QAAQ,KACL;AACH;AACA,MAAA,OAAOD,mBAAQ,CAACX,GAAG,CAACa,KAAK,EAASD,QAAe,CAAC,CAAA;KACnD,CAAA;IACDZ,GAAG,CAACc,SAAS,GAAG;AACd;AACAX,IAAAA,KAAK,KACF;AACH,MAAA,OAAOY,yBAAgB,CACrBZ,KAAK,CAACa,QAAQ;AACd;MACAL,mBAAQ,CAACX,GAAG,CAACa,KAAK,EAASV,KAAK,CAACS,QAAe,CAClD,CAAC,CAAA;KACF,CAAA;AAED,IAAA,OAAOZ,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;EAEFF,OAAO,CAACa,QAAQ,CAAEM,KAAK,IAAKA,KAAK,CAACC,YAAY,CAAC,CAAA;;AAE/C;AACF;AACA;AACA;AACEC,EAAAA,mDAAyB,CAAC,MAAM;AAC9BrB,IAAAA,OAAO,CAACsB,MAAM,CAACvB,IAAI,CAAC,CAAA;AACtB,GAAC,CAAC,CAAA;AAEF,EAAA,OAAOC,OAAO,CAAA;AAChB;;;;"}

package/build/lib/useForm.legacy.js

@@ -1,12 +1,13 @@
 import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.legacy.js';
 import { FormApi, functionalUpdate } from '@tanstack/form-core';
 import { useStore } from '@tanstack/react-store';
-import React__default from 'react';
+import React__default, { useState } from 'react';
 import { Field, useField } from './useField.legacy.js';
 import { formContext } from './formContext.legacy.js';
+import { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect.legacy.js';
 
 function useForm(opts) {
-  const [formApi] = React__default.useState(() => {
+  const [formApi] = useState(() => {
     // @ts-ignore
     const api = new FormApi(opts);
 
@@ -34,9 +35,14 @@ function useForm(opts) {
     return api;
   });
   formApi.useStore(state => state.isSubmitting);
-  React__default.useEffect(() => {
+
+  /**
+   * formApi.update should not have any side effects. Think of it like a `useRef`
+   * that we need to keep updated every render with the most up-to-date information.
+   */
+  useIsomorphicLayoutEffect(() => {
     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\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: { children: any }) => any\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 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.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","Field","useField","useStore","selector","store","Subscribe","functionalUpdate","children","state","isSubmitting","useEffect","update"],"mappings":";;;;;;;AA0BO,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,KAAK,GAAGA,KAAY,CAAA;IACxBR,GAAG,CAACS,QAAQ,GAAGA,QAAe,CAAA;IAC9BT,GAAG,CAACU,QAAQ,GAAG;AACb;AACAC,IAAAA,QAAQ,KACL;AACH;AACA,MAAA,OAAOD,QAAQ,CAACV,GAAG,CAACY,KAAK,EAASD,QAAe,CAAC,CAAA;KACnD,CAAA;IACDX,GAAG,CAACa,SAAS,GAAG;AACd;AACAV,IAAAA,KAAK,KACF;AACH,MAAA,OAAOW,gBAAgB,CACrBX,KAAK,CAACY,QAAQ;AACd;MACAL,QAAQ,CAACV,GAAG,CAACY,KAAK,EAAST,KAAK,CAACQ,QAAe,CAClD,CAAC,CAAA;KACF,CAAA;AAED,IAAA,OAAOX,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;EAEFH,OAAO,CAACa,QAAQ,CAAEM,KAAK,IAAKA,KAAK,CAACC,YAAY,CAAC,CAAA;EAE/CnB,cAAK,CAACoB,SAAS,CAAC,MAAM;AACpBrB,IAAAA,OAAO,CAACsB,MAAM,CAACvB,IAAI,CAAC,CAAA;AACtB,GAAC,EAAE,CAACC,OAAO,EAAED,IAAI,CAAC,CAAC,CAAA;AAEnB,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, { type ReactNode, useState } from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\nimport { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: { children: any }) => any\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: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n    }) => any\n  }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const [formApi] = 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.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  /**\n   * formApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    formApi.update(opts)\n  })\n\n  return formApi as any\n}\n"],"names":["useForm","opts","formApi","useState","api","FormApi","Provider","props","React","createElement","formContext","_extends","value","Field","useField","useStore","selector","store","Subscribe","functionalUpdate","children","state","isSubmitting","useIsomorphicLayoutEffect","update"],"mappings":";;;;;;;;AAyBO,SAASA,OAAOA,CAAQC,IAAyB,EAAkB;AACxE,EAAA,MAAM,CAACC,OAAO,CAAC,GAAGC,QAAQ,CAAC,MAAM;AAC/B;AACA,IAAA,MAAMC,GAAG,GAAG,IAAIC,OAAO,CAAQJ,IAAI,CAAC,CAAA;;AAEpC;AACAG,IAAAA,GAAG,CAACE,QAAQ,GAAIC,KAAK,iBACnBC,cAAA,CAAAC,aAAA,CAACC,WAAW,CAACJ,QAAQ,EAAAK,QAAA,KAAKJ,KAAK,EAAA;AAAEK,MAAAA,KAAK,EAAE;AAAEV,QAAAA,OAAO,EAAEE,GAAAA;AAAI,OAAA;AAAE,KAAA,CAAE,CAC5D,CAAA;IACDA,GAAG,CAACS,KAAK,GAAGA,KAAY,CAAA;IACxBT,GAAG,CAACU,QAAQ,GAAGA,QAAe,CAAA;IAC9BV,GAAG,CAACW,QAAQ,GAAG;AACb;AACAC,IAAAA,QAAQ,KACL;AACH;AACA,MAAA,OAAOD,QAAQ,CAACX,GAAG,CAACa,KAAK,EAASD,QAAe,CAAC,CAAA;KACnD,CAAA;IACDZ,GAAG,CAACc,SAAS,GAAG;AACd;AACAX,IAAAA,KAAK,KACF;AACH,MAAA,OAAOY,gBAAgB,CACrBZ,KAAK,CAACa,QAAQ;AACd;MACAL,QAAQ,CAACX,GAAG,CAACa,KAAK,EAASV,KAAK,CAACS,QAAe,CAClD,CAAC,CAAA;KACF,CAAA;AAED,IAAA,OAAOZ,GAAG,CAAA;AACZ,GAAC,CAAC,CAAA;EAEFF,OAAO,CAACa,QAAQ,CAAEM,KAAK,IAAKA,KAAK,CAACC,YAAY,CAAC,CAAA;;AAE/C;AACF;AACA;AACA;AACEC,EAAAA,yBAAyB,CAAC,MAAM;AAC9BrB,IAAAA,OAAO,CAACsB,MAAM,CAACvB,IAAI,CAAC,CAAA;AACtB,GAAC,CAAC,CAAA;AAEF,EAAA,OAAOC,OAAO,CAAA;AAChB;;;;"}

package/build/lib/utils/isBrowser.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+/* c8 ignore start */
+const isBrowser = typeof window !== 'undefined';
+/* c8 ignore end */
+
+exports.isBrowser = isBrowser;
+//# sourceMappingURL=isBrowser.cjs.map

package/build/lib/utils/isBrowser.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"isBrowser.cjs","sources":["../../../src/utils/isBrowser.ts"],"sourcesContent":["/* c8 ignore start */\nexport const isBrowser = typeof window !== 'undefined'\n/* c8 ignore end */\n"],"names":["isBrowser","window"],"mappings":";;AAAA;MACaA,SAAS,GAAG,OAAOC,MAAM,KAAK,YAAW;AACtD;;;;"}

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

@@ -0,0 +1,2 @@
+export declare const isBrowser: boolean;
+//# sourceMappingURL=isBrowser.d.ts.map

package/build/lib/utils/isBrowser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isBrowser.d.ts","sourceRoot":"","sources":["../../../src/utils/isBrowser.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,SAAS,SAAgC,CAAA"}

package/build/lib/utils/isBrowser.js

@@ -0,0 +1,6 @@
+/* c8 ignore start */
+const isBrowser = typeof window !== 'undefined';
+/* c8 ignore end */
+
+export { isBrowser };
+//# sourceMappingURL=isBrowser.js.map

package/build/lib/utils/isBrowser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isBrowser.js","sources":["../../../src/utils/isBrowser.ts"],"sourcesContent":["/* c8 ignore start */\nexport const isBrowser = typeof window !== 'undefined'\n/* c8 ignore end */\n"],"names":["isBrowser","window"],"mappings":"AAAA;MACaA,SAAS,GAAG,OAAOC,MAAM,KAAK,YAAW;AACtD;;;;"}

package/build/lib/utils/isBrowser.legacy.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+/* c8 ignore start */
+const isBrowser = typeof window !== 'undefined';
+/* c8 ignore end */
+
+exports.isBrowser = isBrowser;
+//# sourceMappingURL=isBrowser.legacy.cjs.map

package/build/lib/utils/isBrowser.legacy.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"isBrowser.legacy.cjs","sources":["../../../src/utils/isBrowser.ts"],"sourcesContent":["/* c8 ignore start */\nexport const isBrowser = typeof window !== 'undefined'\n/* c8 ignore end */\n"],"names":["isBrowser","window"],"mappings":";;AAAA;MACaA,SAAS,GAAG,OAAOC,MAAM,KAAK,YAAW;AACtD;;;;"}

package/build/lib/utils/isBrowser.legacy.js

@@ -0,0 +1,6 @@
+/* c8 ignore start */
+const isBrowser = typeof window !== 'undefined';
+/* c8 ignore end */
+
+export { isBrowser };
+//# sourceMappingURL=isBrowser.legacy.js.map

package/build/lib/utils/isBrowser.legacy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isBrowser.legacy.js","sources":["../../../src/utils/isBrowser.ts"],"sourcesContent":["/* c8 ignore start */\nexport const isBrowser = typeof window !== 'undefined'\n/* c8 ignore end */\n"],"names":["isBrowser","window"],"mappings":"AAAA;MACaA,SAAS,GAAG,OAAOC,MAAM,KAAK,YAAW;AACtD;;;;"}

package/build/lib/utils/useIsomorphicLayoutEffect.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+var isBrowser = require('./isBrowser.cjs');
+
+/* c8 ignore start */
+const useIsomorphicLayoutEffect = isBrowser.isBrowser ? React.useLayoutEffect : React.useEffect;
+/* c8 ignore end */
+
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
+//# sourceMappingURL=useIsomorphicLayoutEffect.cjs.map

package/build/lib/utils/useIsomorphicLayoutEffect.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsomorphicLayoutEffect.cjs","sources":["../../../src/utils/useIsomorphicLayoutEffect.ts"],"sourcesContent":["/* c8 ignore start */\nimport { useEffect, useLayoutEffect } from 'react'\nimport { isBrowser } from './isBrowser'\n\nexport const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect\n/* c8 ignore end */\n"],"names":["useIsomorphicLayoutEffect","isBrowser","useLayoutEffect","useEffect"],"mappings":";;;;;AAAA;MAIaA,yBAAyB,GAAGC,mBAAS,GAAGC,qBAAe,GAAGC,gBAAS;AAChF;;;;"}

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

@@ -0,0 +1,3 @@
+import { useLayoutEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+//# sourceMappingURL=useIsomorphicLayoutEffect.d.ts.map

package/build/lib/utils/useIsomorphicLayoutEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsomorphicLayoutEffect.d.ts","sourceRoot":"","sources":["../../../src/utils/useIsomorphicLayoutEffect.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAE,MAAM,OAAO,CAAA;AAGlD,eAAO,MAAM,yBAAyB,wBAA0C,CAAA"}

package/build/lib/utils/useIsomorphicLayoutEffect.js

@@ -0,0 +1,9 @@
+import { useLayoutEffect, useEffect } from 'react';
+import { isBrowser } from './isBrowser.js';
+
+/* c8 ignore start */
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+/* c8 ignore end */
+
+export { useIsomorphicLayoutEffect };
+//# sourceMappingURL=useIsomorphicLayoutEffect.js.map

package/build/lib/utils/useIsomorphicLayoutEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsomorphicLayoutEffect.js","sources":["../../../src/utils/useIsomorphicLayoutEffect.ts"],"sourcesContent":["/* c8 ignore start */\nimport { useEffect, useLayoutEffect } from 'react'\nimport { isBrowser } from './isBrowser'\n\nexport const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect\n/* c8 ignore end */\n"],"names":["useIsomorphicLayoutEffect","isBrowser","useLayoutEffect","useEffect"],"mappings":";;;AAAA;MAIaA,yBAAyB,GAAGC,SAAS,GAAGC,eAAe,GAAGC,UAAS;AAChF;;;;"}

package/build/lib/utils/useIsomorphicLayoutEffect.legacy.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+var isBrowser = require('./isBrowser.legacy.cjs');
+
+/* c8 ignore start */
+const useIsomorphicLayoutEffect = isBrowser.isBrowser ? React.useLayoutEffect : React.useEffect;
+/* c8 ignore end */
+
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
+//# sourceMappingURL=useIsomorphicLayoutEffect.legacy.cjs.map

package/build/lib/utils/useIsomorphicLayoutEffect.legacy.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsomorphicLayoutEffect.legacy.cjs","sources":["../../../src/utils/useIsomorphicLayoutEffect.ts"],"sourcesContent":["/* c8 ignore start */\nimport { useEffect, useLayoutEffect } from 'react'\nimport { isBrowser } from './isBrowser'\n\nexport const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect\n/* c8 ignore end */\n"],"names":["useIsomorphicLayoutEffect","isBrowser","useLayoutEffect","useEffect"],"mappings":";;;;;AAAA;MAIaA,yBAAyB,GAAGC,mBAAS,GAAGC,qBAAe,GAAGC,gBAAS;AAChF;;;;"}

package/build/lib/utils/useIsomorphicLayoutEffect.legacy.js

@@ -0,0 +1,9 @@
+import { useLayoutEffect, useEffect } from 'react';
+import { isBrowser } from './isBrowser.legacy.js';
+
+/* c8 ignore start */
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+/* c8 ignore end */
+
+export { useIsomorphicLayoutEffect };
+//# sourceMappingURL=useIsomorphicLayoutEffect.legacy.js.map

package/build/lib/utils/useIsomorphicLayoutEffect.legacy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsomorphicLayoutEffect.legacy.js","sources":["../../../src/utils/useIsomorphicLayoutEffect.ts"],"sourcesContent":["/* c8 ignore start */\nimport { useEffect, useLayoutEffect } from 'react'\nimport { isBrowser } from './isBrowser'\n\nexport const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect\n/* c8 ignore end */\n"],"names":["useIsomorphicLayoutEffect","isBrowser","useLayoutEffect","useEffect"],"mappings":";;;AAAA;MAIaA,yBAAyB,GAAGC,SAAS,GAAGC,eAAe,GAAGC,UAAS;AAChF;;;;"}

package/package.json

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

package/src/tests/useForm.test.tsx

@@ -1,9 +1,9 @@
 /// <reference lib="dom" />
-import { render } from '@testing-library/react'
+import { render, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
 import * as React from 'react'
-import { createFormFactory } from '..'
+import { createFormFactory, useForm } from '..'
 
 const user = userEvent.setup()
 
@@ -78,4 +78,50 @@ describe('useForm', () => {
     expect(await findByText('FirstName')).toBeInTheDocument()
     expect(queryByText('LastName')).not.toBeInTheDocument()
   })
+
+  it('should handle submitting properly', async () => {
+    function Comp() {
+      const [submittedData, setSubmittedData] = React.useState<{
+        firstName: string
+      } | null>(null)
+
+      const form = useForm({
+        defaultValues: {
+          firstName: 'FirstName',
+        },
+        onSubmit: (data) => {
+          setSubmittedData(data)
+        },
+      })
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            children={(field) => {
+              return (
+                <input
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                  placeholder={'First name'}
+                />
+              )
+            }}
+          />
+          <button onClick={form.handleSubmit}>Submit</button>
+          {submittedData && <p>Submitted data: {submittedData.firstName}</p>}
+        </form.Provider>
+      )
+    }
+
+    const { findByPlaceholderText, getByText } = render(<Comp />)
+    const input = await findByPlaceholderText('First name')
+    await user.clear(input)
+    await user.type(input, 'OtherName')
+    await user.click(getByText('Submit'))
+    await waitFor(() =>
+      expect(getByText('Submitted data: OtherName')).toBeInTheDocument(),
+    )
+  })
 })

package/src/types.ts

@@ -0,0 +1,8 @@
+import type { FieldOptions } from '@tanstack/form-core'
+
+export type UseFieldOptions<TData, TFormData> = FieldOptions<
+  TData,
+  TFormData
+> & {
+  mode?: 'value' | 'array'
+}

package/src/useField.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react'
-//
+import React, { useState } from 'react'
 import { useStore } from '@tanstack/react-store'
 import type {
   DeepKeys,
@@ -9,6 +8,8 @@ import type {
 } from '@tanstack/form-core'
 import { FieldApi, functionalUpdate } from '@tanstack/form-core'
 import { useFormContext, formContext } from './formContext'
+import { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect'
+import type { UseFieldOptions } from './types'
 
 declare module '@tanstack/form-core' {
   // eslint-disable-next-line no-shadow
@@ -17,13 +18,6 @@ declare module '@tanstack/form-core' {
   }
 }
 
-export type UseFieldOptions<TData, TFormData> = FieldOptions<
-  TData,
-  TFormData
-> & {
-  mode?: 'value' | 'array'
-}
-
 export type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(
   opts?: { name: Narrow<TField> } & UseFieldOptions<
     DeepValue<TFormData, TField>,
@@ -37,7 +31,7 @@ export function useField<TData, TFormData>(
   // Get the form API either manually or from context
   const { formApi, parentFieldName } = useFormContext()
 
-  const [fieldApi] = React.useState<FieldApi<TData, TFormData>>(() => {
+  const [fieldApi] = useState<FieldApi<TData, TFormData>>(() => {
     const name = (
       typeof opts.index === 'number'
         ? [parentFieldName, opts.index, opts.name]
@@ -53,8 +47,13 @@ export function useField<TData, TFormData>(
     return api
   })
 
-  // Keep options up to date as they are rendered
-  fieldApi.update({ ...opts, form: formApi } as never)
+  /**
+   * fieldApi.update should not have any side effects. Think of it like a `useRef`
+   * that we need to keep updated every render with the most up-to-date information.
+   */
+  useIsomorphicLayoutEffect(() => {
+    fieldApi.update({ ...opts, form: formApi } as never)
+  })
 
   useStore(
     fieldApi.store as any,
@@ -66,7 +65,7 @@ export function useField<TData, TFormData>(
   )
 
   // Instantiates field meta and removes it when unrendered
-  React.useEffect(() => fieldApi.mount(), [fieldApi])
+  useIsomorphicLayoutEffect(() => fieldApi.mount(), [fieldApi])
 
   return fieldApi
 }

package/src/useForm.tsx

@@ -2,9 +2,10 @@ import type { FormState, FormOptions } from '@tanstack/form-core'
 import { FormApi, functionalUpdate } from '@tanstack/form-core'
 import type { NoInfer } from '@tanstack/react-store'
 import { useStore } from '@tanstack/react-store'
-import React from 'react'
+import React, { type ReactNode, useState } from 'react'
 import { type UseField, type FieldComponent, Field, useField } from './useField'
 import { formContext } from './formContext'
+import { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect'
 
 declare module '@tanstack/form-core' {
   // eslint-disable-next-line no-shadow
@@ -17,15 +18,13 @@ declare module '@tanstack/form-core' {
     ) => TSelected
     Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
       selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
-      children:
-        | ((state: NoInfer<TSelected>) => React.ReactNode)
-        | React.ReactNode
+      children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode
     }) => any
   }
 }
 
 export function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {
-  const [formApi] = React.useState(() => {
+  const [formApi] = useState(() => {
     // @ts-ignore
     const api = new FormApi<TData>(opts)
 
@@ -58,9 +57,13 @@ export function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {
 
   formApi.useStore((state) => state.isSubmitting)
 
-  React.useEffect(() => {
+  /**
+   * formApi.update should not have any side effects. Think of it like a `useRef`
+   * that we need to keep updated every render with the most up-to-date information.
+   */
+  useIsomorphicLayoutEffect(() => {
     formApi.update(opts)
-  }, [formApi, opts])
+  })
 
   return formApi as any
 }

package/src/utils/isBrowser.ts

@@ -0,0 +1,3 @@
+/* c8 ignore start */
+export const isBrowser = typeof window !== 'undefined'
+/* c8 ignore end */

package/src/utils/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,6 @@
+/* c8 ignore start */
+import { useEffect, useLayoutEffect } from 'react'
+import { isBrowser } from './isBrowser'
+
+export const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect
+/* c8 ignore end */