@tanstack/react-form 1.28.0 → 1.28.1

package/dist/cjs/index.cjs

@@ -6,6 +6,7 @@ const createFormHook = require("./createFormHook.cjs");
 const useField = require("./useField.cjs");
 const useFieldGroup = require("./useFieldGroup.cjs");
 const useForm = require("./useForm.cjs");
+const useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect.cjs");
 Object.defineProperty(exports, "useStore", {
   enumerable: true,
   get: () => reactStore.useStore
@@ -16,6 +17,7 @@ exports.Field = useField.Field;
 exports.useField = useField.useField;
 exports.useFieldGroup = useFieldGroup.useFieldGroup;
 exports.useForm = useForm.useForm;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
 Object.keys(formCore).forEach((k) => {
   if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,

package/dist/cjs/index.cjs.map

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

package/dist/cjs/index.d.cts

@@ -5,3 +5,4 @@ export * from './types.cjs';
 export * from './useField.cjs';
 export * from './useFieldGroup.cjs';
 export * from './useForm.cjs';
+export * from './useIsomorphicLayoutEffect.cjs';

package/dist/cjs/useForm.cjs

@@ -60,6 +60,15 @@ function useForm(opts) {
   useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
     formApi.update(opts);
   });
+  const hasRan = React.useRef(false);
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    if (!hasRan.current) return;
+    if (!opts?.transform) return;
+    formCore.mergeAndUpdate(formApi, opts.transform);
+  }, [formApi, opts?.transform]);
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    hasRan.current = true;
+  });
   return extendedFormApi;
 }
 exports.useForm = useForm;

package/dist/cjs/useForm.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["'use client'\n\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport { useMemo, useState } from 'react'\nimport { Field } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport { useFormId } from './useFormId'\nimport type {\n  AnyFormApi,\n  AnyFormState,\n  FormAsyncValidateOrFn,\n  FormOptions,\n  FormState,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { FunctionComponent, PropsWithChildren, ReactNode } from 'react'\nimport type { FieldComponent } from './useField'\nimport type { NoInfer } from '@tanstack/react-store'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\nexport interface ReactFormApi<\n  in out TFormData,\n  in out TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TSubmitMeta,\n> {\n  /**\n   * A React component to render form fields. With this, you can render and manage individual form fields.\n   */\n  Field: FieldComponent<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta\n  >\n  /**\n   * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n   */\n  Subscribe: <\n    TSelected = NoInfer<\n      FormState<\n        TFormData,\n        TOnMount,\n        TOnChange,\n        TOnChangeAsync,\n        TOnBlur,\n        TOnBlurAsync,\n        TOnSubmit,\n        TOnSubmitAsync,\n        TOnDynamic,\n        TOnDynamicAsync,\n        TOnServer\n      >\n    >,\n  >(props: {\n    selector?: (\n      state: NoInfer<\n        FormState<\n          TFormData,\n          TOnMount,\n          TOnChange,\n          TOnChangeAsync,\n          TOnBlur,\n          TOnBlurAsync,\n          TOnSubmit,\n          TOnSubmitAsync,\n          TOnDynamic,\n          TOnDynamicAsync,\n          TOnServer\n        >\n      >,\n    ) => TSelected\n    children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n  }) => ReturnType<FunctionComponent>\n}\n\n/**\n * An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`\n */\nexport type ReactFormExtendedApi<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n> = FormApi<\n  TFormData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta\n> &\n  ReactFormApi<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta\n  >\n\nfunction LocalSubscribe({\n  form,\n  selector,\n  children,\n}: PropsWithChildren<{\n  form: AnyFormApi\n  selector: (state: AnyFormState) => AnyFormState\n}>): ReturnType<FunctionComponent> {\n  const data = useStore(form.store, selector)\n\n  return <>{functionalUpdate(children, data)}</>\n}\n\n/**\n * A custom React Hook that returns an extended instance of the `FormApi` class.\n *\n * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields\n */\nexport function useForm<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n>(\n  opts?: FormOptions<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta\n  >,\n) {\n  const fallbackFormId = useFormId()\n  const [prevFormId, setPrevFormId] = useState<string>(opts?.formId as never)\n\n  const [formApi, setFormApi] = useState(() => {\n    return new FormApi<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta\n    >({ ...opts, formId: opts?.formId ?? fallbackFormId })\n  })\n\n  if (prevFormId !== opts?.formId) {\n    const formId = opts?.formId ?? fallbackFormId\n    setFormApi(new FormApi({ ...opts, formId }))\n    setPrevFormId(formId)\n  }\n\n  const extendedFormApi = useMemo(() => {\n    const extendedApi: ReactFormExtendedApi<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta\n    > = {\n      ...formApi,\n      handleSubmit: ((...props: never[]) => {\n        return formApi._handleSubmit(...props)\n      }) as typeof formApi.handleSubmit,\n      // We must add all `get`ters from `core`'s `FormApi` here, as otherwise the spread operator won't catch those\n      get formId(): string {\n        return formApi._formId\n      },\n      get state() {\n        return formApi.store.state\n      },\n    } as never\n\n    extendedApi.Field = function APIField(props) {\n      return <Field {...props} form={formApi} />\n    }\n\n    extendedApi.Subscribe = function Subscribe(props: any) {\n      return (\n        <LocalSubscribe\n          form={formApi}\n          selector={props.selector}\n          children={props.children}\n        />\n      )\n    }\n\n    return extendedApi\n  }, [formApi])\n\n  useIsomorphicLayoutEffect(formApi.mount, [])\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 extendedFormApi\n}\n"],"names":["jsx","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;;;AA4IA;AAAwB;AACtB;AACA;AAEF;AAIE;AAEA;AACF;AAOO;AA6BL;AACA;AAEA;AACE;AAaqD;AAGvD;AACE;AACA;AACA;AAAoB;AAGtB;AACE;AAaI;AACC;AAED;AAAqC;AACvC;AAAA;AAGE;AAAe;AACjB;AAEE;AAAqB;AACvB;AAGF;AACE;AAAwC;AAG1C;AACE;AACEA;AAAC;AAAA;AACO;AACU;AACA;AAAA;AAAA;AAKtB;AAAO;AAGTC;AAMAA;AACE;AAAmB;AAGrB;AACF;;"}
+{"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["'use client'\n\nimport { FormApi, functionalUpdate, mergeAndUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport { useMemo, useRef, useState } from 'react'\nimport { Field } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport { useFormId } from './useFormId'\nimport type {\n  AnyFormApi,\n  AnyFormState,\n  FormAsyncValidateOrFn,\n  FormOptions,\n  FormState,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { FunctionComponent, PropsWithChildren, ReactNode } from 'react'\nimport type { FieldComponent } from './useField'\nimport type { NoInfer } from '@tanstack/react-store'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\nexport interface ReactFormApi<\n  in out TFormData,\n  in out TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TSubmitMeta,\n> {\n  /**\n   * A React component to render form fields. With this, you can render and manage individual form fields.\n   */\n  Field: FieldComponent<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta\n  >\n  /**\n   * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n   */\n  Subscribe: <\n    TSelected = NoInfer<\n      FormState<\n        TFormData,\n        TOnMount,\n        TOnChange,\n        TOnChangeAsync,\n        TOnBlur,\n        TOnBlurAsync,\n        TOnSubmit,\n        TOnSubmitAsync,\n        TOnDynamic,\n        TOnDynamicAsync,\n        TOnServer\n      >\n    >,\n  >(props: {\n    selector?: (\n      state: NoInfer<\n        FormState<\n          TFormData,\n          TOnMount,\n          TOnChange,\n          TOnChangeAsync,\n          TOnBlur,\n          TOnBlurAsync,\n          TOnSubmit,\n          TOnSubmitAsync,\n          TOnDynamic,\n          TOnDynamicAsync,\n          TOnServer\n        >\n      >,\n    ) => TSelected\n    children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n  }) => ReturnType<FunctionComponent>\n}\n\n/**\n * An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`\n */\nexport type ReactFormExtendedApi<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n> = FormApi<\n  TFormData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta\n> &\n  ReactFormApi<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta\n  >\n\nfunction LocalSubscribe({\n  form,\n  selector,\n  children,\n}: PropsWithChildren<{\n  form: AnyFormApi\n  selector: (state: AnyFormState) => AnyFormState\n}>): ReturnType<FunctionComponent> {\n  const data = useStore(form.store, selector)\n\n  return <>{functionalUpdate(children, data)}</>\n}\n\n/**\n * A custom React Hook that returns an extended instance of the `FormApi` class.\n *\n * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields\n */\nexport function useForm<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n>(\n  opts?: FormOptions<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta\n  >,\n) {\n  const fallbackFormId = useFormId()\n  const [prevFormId, setPrevFormId] = useState<string>(opts?.formId as never)\n\n  const [formApi, setFormApi] = useState(() => {\n    return new FormApi<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta\n    >({ ...opts, formId: opts?.formId ?? fallbackFormId })\n  })\n\n  if (prevFormId !== opts?.formId) {\n    const formId = opts?.formId ?? fallbackFormId\n    setFormApi(new FormApi({ ...opts, formId }))\n    setPrevFormId(formId)\n  }\n\n  const extendedFormApi = useMemo(() => {\n    const extendedApi: ReactFormExtendedApi<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta\n    > = {\n      ...formApi,\n      handleSubmit: ((...props: never[]) => {\n        return formApi._handleSubmit(...props)\n      }) as typeof formApi.handleSubmit,\n      // We must add all `get`ters from `core`'s `FormApi` here, as otherwise the spread operator won't catch those\n      get formId(): string {\n        return formApi._formId\n      },\n      get state() {\n        return formApi.store.state\n      },\n    } as never\n\n    extendedApi.Field = function APIField(props) {\n      return <Field {...props} form={formApi} />\n    }\n\n    extendedApi.Subscribe = function Subscribe(props: any) {\n      return (\n        <LocalSubscribe\n          form={formApi}\n          selector={props.selector}\n          children={props.children}\n        />\n      )\n    }\n\n    return extendedApi\n  }, [formApi])\n\n  useIsomorphicLayoutEffect(formApi.mount, [])\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  const hasRan = useRef(false)\n\n  useIsomorphicLayoutEffect(() => {\n    if (!hasRan.current) return\n    if (!opts?.transform) return\n    mergeAndUpdate(formApi, opts.transform as never)\n  }, [formApi, opts?.transform])\n\n  useIsomorphicLayoutEffect(() => {\n    hasRan.current = true\n  })\n\n  return extendedFormApi\n}\n"],"names":["jsx","useIsomorphicLayoutEffect","mergeAndUpdate"],"mappings":";;;;;;;;;;AA4IA;AAAwB;AACtB;AACA;AAEF;AAIE;AAEA;AACF;AAOO;AA6BL;AACA;AAEA;AACE;AAaqD;AAGvD;AACE;AACA;AACA;AAAoB;AAGtB;AACE;AAaI;AACC;AAED;AAAqC;AACvC;AAAA;AAGE;AAAe;AACjB;AAEE;AAAqB;AACvB;AAGF;AACE;AAAwC;AAG1C;AACE;AACEA;AAAC;AAAA;AACO;AACU;AACA;AAAA;AAAA;AAKtB;AAAO;AAGTC;AAMAA;AACE;AAAmB;AAGrB;AAEAA;AACE;AACA;AACAC;AAA+C;AAGjDD;AACE;AAAiB;AAGnB;AACF;;"}

package/dist/cjs/useFormId.cjs

@@ -19,6 +19,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const useFormId = React__namespace.version.split(".")[0] === "17" ? useUUID.useUUID : React__namespace.useId;
+const _React = React__namespace;
+const useFormId = React__namespace.version.split(".")[0] === "17" ? useUUID.useUUID : _React.useId;
 exports.useFormId = useFormId;
 //# sourceMappingURL=useFormId.cjs.map

package/dist/cjs/useFormId.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useFormId.cjs","sources":["../../src/useFormId.ts"],"sourcesContent":["import * as React from 'react'\nimport { useUUID } from './useUUID'\n\n/** React 17 does not have the useId hook, so we use a random uuid as a fallback. */\nexport const useFormId =\n  React.version.split('.')[0] === '17' ? useUUID : React.useId\n"],"names":["React","useUUID"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,YACXA,iBAAM,QAAQ,MAAM,GAAG,EAAE,CAAC,MAAM,OAAOC,QAAAA,UAAUD,iBAAM;;"}
+{"version":3,"file":"useFormId.cjs","sources":["../../src/useFormId.ts"],"sourcesContent":["import * as React from 'react'\nimport { useUUID } from './useUUID'\n\n/**\n * React 17 does not have the useId hook, so we use a random uuid as a fallback.\n * This is needed to avoid bundlers trying to import non-existing export.\n * Read more: https://github.com/webpack/webpack/issues/14814\n */\nconst _React = React\nexport const useFormId =\n  React.version.split('.')[0] === '17' ? useUUID : _React.useId\n"],"names":["React","useUUID"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,SAASA;AACR,MAAM,YACXA,iBAAM,QAAQ,MAAM,GAAG,EAAE,CAAC,MAAM,OAAOC,QAAAA,UAAU,OAAO;;"}

package/dist/cjs/useFormId.d.cts

@@ -1,3 +1,2 @@
 import { useUUID } from './useUUID.cjs';
-/** React 17 does not have the useId hook, so we use a random uuid as a fallback. */
 export declare const useFormId: typeof useUUID;

package/dist/esm/index.d.ts

@@ -5,3 +5,4 @@ export * from './types.js';
 export * from './useField.js';
 export * from './useFieldGroup.js';
 export * from './useForm.js';
+export * from './useIsomorphicLayoutEffect.js';

package/dist/esm/index.js

@@ -4,6 +4,7 @@ import { createFormHook, createFormHookContexts } from "./createFormHook.js";
 import { Field, useField } from "./useField.js";
 import { useFieldGroup } from "./useFieldGroup.js";
 import { useForm } from "./useForm.js";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
 export {
   Field,
   createFormHook,
@@ -11,6 +12,7 @@ export {
   useField,
   useFieldGroup,
   useForm,
+  useIsomorphicLayoutEffect,
   useStore
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

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

package/dist/esm/useForm.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx, Fragment } from "react/jsx-runtime";
-import { FormApi, functionalUpdate } from "@tanstack/form-core";
+import { FormApi, mergeAndUpdate, functionalUpdate } from "@tanstack/form-core";
 import { useStore } from "@tanstack/react-store";
-import { useState, useMemo } from "react";
+import { useState, useMemo, useRef } from "react";
 import { Field } from "./useField.js";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
 import { useFormId } from "./useFormId.js";
@@ -58,6 +58,15 @@ function useForm(opts) {
   useIsomorphicLayoutEffect(() => {
     formApi.update(opts);
   });
+  const hasRan = useRef(false);
+  useIsomorphicLayoutEffect(() => {
+    if (!hasRan.current) return;
+    if (!opts?.transform) return;
+    mergeAndUpdate(formApi, opts.transform);
+  }, [formApi, opts?.transform]);
+  useIsomorphicLayoutEffect(() => {
+    hasRan.current = true;
+  });
   return extendedFormApi;
 }
 export {

package/dist/esm/useForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["'use client'\n\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport { useMemo, useState } from 'react'\nimport { Field } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport { useFormId } from './useFormId'\nimport type {\n  AnyFormApi,\n  AnyFormState,\n  FormAsyncValidateOrFn,\n  FormOptions,\n  FormState,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { FunctionComponent, PropsWithChildren, ReactNode } from 'react'\nimport type { FieldComponent } from './useField'\nimport type { NoInfer } from '@tanstack/react-store'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\nexport interface ReactFormApi<\n  in out TFormData,\n  in out TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TSubmitMeta,\n> {\n  /**\n   * A React component to render form fields. With this, you can render and manage individual form fields.\n   */\n  Field: FieldComponent<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta\n  >\n  /**\n   * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n   */\n  Subscribe: <\n    TSelected = NoInfer<\n      FormState<\n        TFormData,\n        TOnMount,\n        TOnChange,\n        TOnChangeAsync,\n        TOnBlur,\n        TOnBlurAsync,\n        TOnSubmit,\n        TOnSubmitAsync,\n        TOnDynamic,\n        TOnDynamicAsync,\n        TOnServer\n      >\n    >,\n  >(props: {\n    selector?: (\n      state: NoInfer<\n        FormState<\n          TFormData,\n          TOnMount,\n          TOnChange,\n          TOnChangeAsync,\n          TOnBlur,\n          TOnBlurAsync,\n          TOnSubmit,\n          TOnSubmitAsync,\n          TOnDynamic,\n          TOnDynamicAsync,\n          TOnServer\n        >\n      >,\n    ) => TSelected\n    children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n  }) => ReturnType<FunctionComponent>\n}\n\n/**\n * An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`\n */\nexport type ReactFormExtendedApi<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n> = FormApi<\n  TFormData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta\n> &\n  ReactFormApi<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta\n  >\n\nfunction LocalSubscribe({\n  form,\n  selector,\n  children,\n}: PropsWithChildren<{\n  form: AnyFormApi\n  selector: (state: AnyFormState) => AnyFormState\n}>): ReturnType<FunctionComponent> {\n  const data = useStore(form.store, selector)\n\n  return <>{functionalUpdate(children, data)}</>\n}\n\n/**\n * A custom React Hook that returns an extended instance of the `FormApi` class.\n *\n * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields\n */\nexport function useForm<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n>(\n  opts?: FormOptions<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta\n  >,\n) {\n  const fallbackFormId = useFormId()\n  const [prevFormId, setPrevFormId] = useState<string>(opts?.formId as never)\n\n  const [formApi, setFormApi] = useState(() => {\n    return new FormApi<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta\n    >({ ...opts, formId: opts?.formId ?? fallbackFormId })\n  })\n\n  if (prevFormId !== opts?.formId) {\n    const formId = opts?.formId ?? fallbackFormId\n    setFormApi(new FormApi({ ...opts, formId }))\n    setPrevFormId(formId)\n  }\n\n  const extendedFormApi = useMemo(() => {\n    const extendedApi: ReactFormExtendedApi<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta\n    > = {\n      ...formApi,\n      handleSubmit: ((...props: never[]) => {\n        return formApi._handleSubmit(...props)\n      }) as typeof formApi.handleSubmit,\n      // We must add all `get`ters from `core`'s `FormApi` here, as otherwise the spread operator won't catch those\n      get formId(): string {\n        return formApi._formId\n      },\n      get state() {\n        return formApi.store.state\n      },\n    } as never\n\n    extendedApi.Field = function APIField(props) {\n      return <Field {...props} form={formApi} />\n    }\n\n    extendedApi.Subscribe = function Subscribe(props: any) {\n      return (\n        <LocalSubscribe\n          form={formApi}\n          selector={props.selector}\n          children={props.children}\n        />\n      )\n    }\n\n    return extendedApi\n  }, [formApi])\n\n  useIsomorphicLayoutEffect(formApi.mount, [])\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 extendedFormApi\n}\n"],"names":[],"mappings":";;;;;;;;AA4IA;AAAwB;AACtB;AACA;AAEF;AAIE;AAEA;AACF;AAOO;AA6BL;AACA;AAEA;AACE;AAaqD;AAGvD;AACE;AACA;AACA;AAAoB;AAGtB;AACE;AAaI;AACC;AAED;AAAqC;AACvC;AAAA;AAGE;AAAe;AACjB;AAEE;AAAqB;AACvB;AAGF;AACE;AAAwC;AAG1C;AACE;AACE;AAAC;AAAA;AACO;AACU;AACA;AAAA;AAAA;AAKtB;AAAO;AAGT;AAMA;AACE;AAAmB;AAGrB;AACF;;;;"}
+{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["'use client'\n\nimport { FormApi, functionalUpdate, mergeAndUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport { useMemo, useRef, useState } from 'react'\nimport { Field } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport { useFormId } from './useFormId'\nimport type {\n  AnyFormApi,\n  AnyFormState,\n  FormAsyncValidateOrFn,\n  FormOptions,\n  FormState,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { FunctionComponent, PropsWithChildren, ReactNode } from 'react'\nimport type { FieldComponent } from './useField'\nimport type { NoInfer } from '@tanstack/react-store'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\nexport interface ReactFormApi<\n  in out TFormData,\n  in out TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TSubmitMeta,\n> {\n  /**\n   * A React component to render form fields. With this, you can render and manage individual form fields.\n   */\n  Field: FieldComponent<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta\n  >\n  /**\n   * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n   */\n  Subscribe: <\n    TSelected = NoInfer<\n      FormState<\n        TFormData,\n        TOnMount,\n        TOnChange,\n        TOnChangeAsync,\n        TOnBlur,\n        TOnBlurAsync,\n        TOnSubmit,\n        TOnSubmitAsync,\n        TOnDynamic,\n        TOnDynamicAsync,\n        TOnServer\n      >\n    >,\n  >(props: {\n    selector?: (\n      state: NoInfer<\n        FormState<\n          TFormData,\n          TOnMount,\n          TOnChange,\n          TOnChangeAsync,\n          TOnBlur,\n          TOnBlurAsync,\n          TOnSubmit,\n          TOnSubmitAsync,\n          TOnDynamic,\n          TOnDynamicAsync,\n          TOnServer\n        >\n      >,\n    ) => TSelected\n    children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n  }) => ReturnType<FunctionComponent>\n}\n\n/**\n * An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`\n */\nexport type ReactFormExtendedApi<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n> = FormApi<\n  TFormData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta\n> &\n  ReactFormApi<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta\n  >\n\nfunction LocalSubscribe({\n  form,\n  selector,\n  children,\n}: PropsWithChildren<{\n  form: AnyFormApi\n  selector: (state: AnyFormState) => AnyFormState\n}>): ReturnType<FunctionComponent> {\n  const data = useStore(form.store, selector)\n\n  return <>{functionalUpdate(children, data)}</>\n}\n\n/**\n * A custom React Hook that returns an extended instance of the `FormApi` class.\n *\n * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields\n */\nexport function useForm<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n>(\n  opts?: FormOptions<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta\n  >,\n) {\n  const fallbackFormId = useFormId()\n  const [prevFormId, setPrevFormId] = useState<string>(opts?.formId as never)\n\n  const [formApi, setFormApi] = useState(() => {\n    return new FormApi<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta\n    >({ ...opts, formId: opts?.formId ?? fallbackFormId })\n  })\n\n  if (prevFormId !== opts?.formId) {\n    const formId = opts?.formId ?? fallbackFormId\n    setFormApi(new FormApi({ ...opts, formId }))\n    setPrevFormId(formId)\n  }\n\n  const extendedFormApi = useMemo(() => {\n    const extendedApi: ReactFormExtendedApi<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta\n    > = {\n      ...formApi,\n      handleSubmit: ((...props: never[]) => {\n        return formApi._handleSubmit(...props)\n      }) as typeof formApi.handleSubmit,\n      // We must add all `get`ters from `core`'s `FormApi` here, as otherwise the spread operator won't catch those\n      get formId(): string {\n        return formApi._formId\n      },\n      get state() {\n        return formApi.store.state\n      },\n    } as never\n\n    extendedApi.Field = function APIField(props) {\n      return <Field {...props} form={formApi} />\n    }\n\n    extendedApi.Subscribe = function Subscribe(props: any) {\n      return (\n        <LocalSubscribe\n          form={formApi}\n          selector={props.selector}\n          children={props.children}\n        />\n      )\n    }\n\n    return extendedApi\n  }, [formApi])\n\n  useIsomorphicLayoutEffect(formApi.mount, [])\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  const hasRan = useRef(false)\n\n  useIsomorphicLayoutEffect(() => {\n    if (!hasRan.current) return\n    if (!opts?.transform) return\n    mergeAndUpdate(formApi, opts.transform as never)\n  }, [formApi, opts?.transform])\n\n  useIsomorphicLayoutEffect(() => {\n    hasRan.current = true\n  })\n\n  return extendedFormApi\n}\n"],"names":[],"mappings":";;;;;;;;AA4IA;AAAwB;AACtB;AACA;AAEF;AAIE;AAEA;AACF;AAOO;AA6BL;AACA;AAEA;AACE;AAaqD;AAGvD;AACE;AACA;AACA;AAAoB;AAGtB;AACE;AAaI;AACC;AAED;AAAqC;AACvC;AAAA;AAGE;AAAe;AACjB;AAEE;AAAqB;AACvB;AAGF;AACE;AAAwC;AAG1C;AACE;AACE;AAAC;AAAA;AACO;AACU;AACA;AAAA;AAAA;AAKtB;AAAO;AAGT;AAMA;AACE;AAAmB;AAGrB;AAEA;AACE;AACA;AACA;AAA+C;AAGjD;AACE;AAAiB;AAGnB;AACF;;;;"}

package/dist/esm/useFormId.d.ts

@@ -1,3 +1,2 @@
 import { useUUID } from './useUUID.js';
-/** React 17 does not have the useId hook, so we use a random uuid as a fallback. */
 export declare const useFormId: typeof useUUID;

package/dist/esm/useFormId.js

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useUUID } from "./useUUID.js";
-const useFormId = React.version.split(".")[0] === "17" ? useUUID : React.useId;
+const _React = React;
+const useFormId = React.version.split(".")[0] === "17" ? useUUID : _React.useId;
 export {
   useFormId
 };

package/dist/esm/useFormId.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormId.js","sources":["../../src/useFormId.ts"],"sourcesContent":["import * as React from 'react'\nimport { useUUID } from './useUUID'\n\n/** React 17 does not have the useId hook, so we use a random uuid as a fallback. */\nexport const useFormId =\n  React.version.split('.')[0] === '17' ? useUUID : React.useId\n"],"names":[],"mappings":";;AAIO,MAAM,YACX,MAAM,QAAQ,MAAM,GAAG,EAAE,CAAC,MAAM,OAAO,UAAU,MAAM;"}
+{"version":3,"file":"useFormId.js","sources":["../../src/useFormId.ts"],"sourcesContent":["import * as React from 'react'\nimport { useUUID } from './useUUID'\n\n/**\n * React 17 does not have the useId hook, so we use a random uuid as a fallback.\n * This is needed to avoid bundlers trying to import non-existing export.\n * Read more: https://github.com/webpack/webpack/issues/14814\n */\nconst _React = React\nexport const useFormId =\n  React.version.split('.')[0] === '17' ? useUUID : _React.useId\n"],"names":[],"mappings":";;AAQA,MAAM,SAAS;AACR,MAAM,YACX,MAAM,QAAQ,MAAM,GAAG,EAAE,CAAC,MAAM,OAAO,UAAU,OAAO;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-form",
-  "version": "1.28.0",
+  "version": "1.28.1",
   "description": "Powerful, type-safe forms for React.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@tanstack/react-store": "^0.8.0",
-    "@tanstack/form-core": "1.28.0"
+    "@tanstack/form-core": "1.28.1"
   },
   "devDependencies": {
     "@types/react": "^19.0.7",

package/src/index.ts

@@ -7,3 +7,4 @@ export * from './types'
 export * from './useField'
 export * from './useFieldGroup'
 export * from './useForm'
+export * from './useIsomorphicLayoutEffect'

package/src/useForm.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { FormApi, functionalUpdate } from '@tanstack/form-core'
+import { FormApi, functionalUpdate, mergeAndUpdate } from '@tanstack/form-core'
 import { useStore } from '@tanstack/react-store'
-import { useMemo, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { Field } from './useField'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 import { useFormId } from './useFormId'
@@ -266,5 +266,17 @@ export function useForm<
     formApi.update(opts)
   })
 
+  const hasRan = useRef(false)
+
+  useIsomorphicLayoutEffect(() => {
+    if (!hasRan.current) return
+    if (!opts?.transform) return
+    mergeAndUpdate(formApi, opts.transform as never)
+  }, [formApi, opts?.transform])
+
+  useIsomorphicLayoutEffect(() => {
+    hasRan.current = true
+  })
+
   return extendedFormApi
 }

package/src/useFormId.ts

@@ -1,6 +1,11 @@
 import * as React from 'react'
 import { useUUID } from './useUUID'
 
-/** React 17 does not have the useId hook, so we use a random uuid as a fallback. */
+/**
+ * React 17 does not have the useId hook, so we use a random uuid as a fallback.
+ * This is needed to avoid bundlers trying to import non-existing export.
+ * Read more: https://github.com/webpack/webpack/issues/14814
+ */
+const _React = React
 export const useFormId =
-  React.version.split('.')[0] === '17' ? useUUID : React.useId
+  React.version.split('.')[0] === '17' ? useUUID : _React.useId