feat: move to useMerge away from useTransform

Author: crutchcorn

examples/react/next-server-actions/src/app/client-component.tsx

@@ -1,28 +1,28 @@
-'use client';
+'use client'
 
-import { useActionState, useLayoutEffect } from 'react'
-import { mergeForm, useForm } from '@tanstack/react-form-nextjs';
-import { initialFormState, useTransform } from '@tanstack/react-form-nextjs';
-import someAction from './action';
-import { formOpts } from './shared-code';
-import { z } from 'zod';
+import { useActionState } from 'react'
+import {
+  initialFormState,
+  mergeForm,
+  useForm,
+  useMerge,
+} from '@tanstack/react-form-nextjs'
+import { z } from 'zod'
+import someAction from './action'
+import { formOpts } from './shared-code'
 
 export const ClientComp = () => {
-  const [state, action] = useActionState(someAction, initialFormState);
-
-    // debugger
+  const [state, action] = useActionState(someAction, initialFormState)
 
   const form = useForm({
     ...formOpts,
-    transform: useTransform(
-      (baseForm) => mergeForm(baseForm, state ?? {}),
-      [state]
-    ),
-  });
+  })
 
-  useLayoutEffect(() => {
-    form.mergeAndUpdate()
-  }, [state])
+  useMerge({
+    form,
+    fn: (baseForm) => mergeForm(baseForm, state ?? {}),
+    deps: [state],
+  })
 
   return (
     <form action={action as never} onSubmit={() => form.handleSubmit()}>
@@ -45,7 +45,7 @@ export const ClientComp = () => {
                 <p key={error?.message ?? ''}>{error?.message}</p>
               ))}
             </div>
-          );
+          )
         }}
       </form.Field>
       <form.Subscribe
@@ -58,5 +58,5 @@ export const ClientComp = () => {
         )}
       </form.Subscribe>
     </form>
-  );
-};
+  )
+}

packages/form-core/src/FormApi.ts

@@ -217,54 +217,6 @@ export interface FormValidators<
   onDynamicAsyncDebounceMs?: number
 }
 
-/**
- * @private
- */
-export interface FormTransform<
-  TFormData,
-  TOnMount extends undefined | FormValidateOrFn<TFormData>,
-  TOnChange extends undefined | FormValidateOrFn<TFormData>,
-  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
-  TOnBlur extends undefined | FormValidateOrFn<TFormData>,
-  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
-  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
-  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
-  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,
-  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
-  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
-  TSubmitMeta = never,
-> {
-  fn: (
-    formBase: FormApi<
-      TFormData,
-      TOnMount,
-      TOnChange,
-      TOnChangeAsync,
-      TOnBlur,
-      TOnBlurAsync,
-      TOnSubmit,
-      TOnSubmitAsync,
-      TOnDynamic,
-      TOnDynamicAsync,
-      TOnServer,
-      TSubmitMeta
-    >,
-  ) => FormApi<
-    TFormData,
-    TOnMount,
-    TOnChange,
-    TOnChangeAsync,
-    TOnBlur,
-    TOnBlurAsync,
-    TOnSubmit,
-    TOnSubmitAsync,
-    TOnDynamic,
-    TOnDynamicAsync,
-    TOnServer,
-    TSubmitMeta
-  >
-}
-
 export interface FormListeners<
   TFormData,
   TOnMount extends undefined | FormValidateOrFn<TFormData>,
@@ -496,20 +448,6 @@ export interface FormOptions<
     >
     meta: TSubmitMeta
   }) => void
-  transform?: FormTransform<
-    NoInfer<TFormData>,
-    NoInfer<TOnMount>,
-    NoInfer<TOnChange>,
-    NoInfer<TOnChangeAsync>,
-    NoInfer<TOnBlur>,
-    NoInfer<TOnBlurAsync>,
-    NoInfer<TOnSubmit>,
-    NoInfer<TOnSubmitAsync>,
-    NoInfer<TOnDynamic>,
-    NoInfer<TOnDynamicAsync>,
-    NoInfer<TOnServer>,
-    NoInfer<TSubmitMeta>
-  >
 }
 
 export type AnyFormOptions = FormOptions<
@@ -657,7 +595,7 @@ export type BaseFormState<
   _force_re_eval?: boolean
 }
 
-type AnyBaseFormState = BaseFormState<
+export type AnyBaseFormState = BaseFormState<
   any,
   any,
   any,
@@ -977,11 +915,6 @@ export class FormApi<
     return this.store.state
   }
 
-  /**
-   * @private
-   */
-  prevTransformArray: unknown[] = []
-
   /**
    * @private
    */
@@ -2591,62 +2524,6 @@ export class FormApi<
     })
   }
 
-  mergeAndUpdate = () => {
-    // Run the `transform` function on `this.state`, diff it, and update the relevant parts with what needs updating
-    if (!this.options.transform?.fn) return
-
-    const newObj = Object.assign({}, this, {
-      // structuredClone is required to avoid `state` being mutated outside of this block
-      // Commonly available since 2022 in all major browsers BUT NOT REACT NATIVE NOOOOOOO
-      state: structuredClone(this.state),
-    })
-
-    this.options.transform.fn(newObj)
-
-    if (newObj.fieldInfo !== this.fieldInfo) {
-      this.fieldInfo = newObj.fieldInfo
-    }
-
-    if (newObj.options !== this.options) {
-      this.options = newObj.options
-    }
-
-    const baseFormKeys = Object.keys({
-      values: null,
-      validationMetaMap: null,
-      fieldMetaBase: null,
-      isSubmitting: null,
-      isSubmitted: null,
-      isValidating: null,
-      submissionAttempts: null,
-      isSubmitSuccessful: null,
-      _force_re_eval: null,
-      // Do not remove this, it ensures that we have all the keys in `BaseFormState`
-    } satisfies Record<
-      // Exclude errorMap since we need to handle that uniquely
-      Exclude<keyof AnyBaseFormState, 'errorMap'>,
-      null
-    >) as Array<keyof AnyBaseFormState>
-
-    const diffedObject = baseFormKeys.reduce((prev, key) => {
-      if (this.state[key] !== newObj.state[key]) {
-        prev[key] = newObj.state[key]
-      }
-      return prev
-    }, {} as Partial<AnyBaseFormState>)
-
-    batch(() => {
-      if (Object.keys(diffedObject).length) {
-        this.baseStore.setState((prev) => ({ ...prev, ...diffedObject }))
-      }
-
-      if (newObj.state.errorMap !== this.state.errorMap) {
-        // Check if we need to update `fieldMetaBase` with `errorMaps` set by
-        this.setErrorMap(newObj.state.errorMap)
-      }
-    })
-  }
-
   /**
    * Returns form and field level errors
    */

packages/form-core/src/index.ts

@@ -9,3 +9,4 @@ export * from './standardSchemaValidator'
 export * from './FieldGroupApi'
 export * from './ValidationLogic'
 export * from './EventClient'
+export * from './transform'

packages/form-core/src/mergeForm.ts

@@ -1,4 +1,8 @@
-import type { FormApi } from './FormApi'
+import type {
+  FormApi,
+  FormAsyncValidateOrFn,
+  FormValidateOrFn,
+} from './FormApi'
 
 function isValidKey(key: string | number | symbol): boolean {
   const dangerousProps = ['__proto__', 'constructor', 'prototype']
@@ -70,35 +74,48 @@ export function mutateMergeDeep(
   return target
 }
 
-export function mergeForm<TFormData>(
+export function mergeForm<
+  TFormData,
+  TOnMount extends undefined | FormValidateOrFn<TFormData>,
+  TOnChange extends undefined | FormValidateOrFn<TFormData>,
+  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnBlur extends undefined | FormValidateOrFn<TFormData>,
+  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
+  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,
+  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TSubmitMeta = never,
+>(
   baseForm: FormApi<
-    NoInfer<TFormData>,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any
+    TFormData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnDynamic,
+    TOnDynamicAsync,
+    TOnServer,
+    TSubmitMeta
   >,
   state: Partial<
     FormApi<
       TFormData,
-      any,
-      any,
-      any,
-      any,
-      any,
-      any,
-      any,
-      any,
-      any,
-      any,
-      any
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnDynamic,
+      TOnDynamicAsync,
+      TOnServer,
+      TSubmitMeta
     >['state']
   >,
 ) {