chore: move useLens to own file and rename

Author: LeCarbonator

packages/react-form/src/createFormHook.tsx

@@ -1,44 +1,22 @@
 /* eslint-disable @eslint-react/no-context-provider */
-import { createContext, useContext, useMemo, useState } from 'react'
-import { FormLensApi, functionalUpdate } from '@tanstack/form-core'
-import { useStore } from '@tanstack/react-store'
+import { createContext, useContext, useMemo } from 'react'
+import { FormLensApi } from '@tanstack/form-core'
 import { useForm } from './useForm'
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
+import { useFieldGroup } from './useFieldGroup'
 import type {
   AnyFieldApi,
   AnyFormApi,
-  AnyFormLensApi,
-  AnyFormLensState,
   BaseFormOptions,
   DeepKeysOfType,
   FieldApi,
   FormAsyncValidateOrFn,
-  FormLensState,
   FormOptions,
   FormValidateOrFn,
 } from '@tanstack/form-core'
-import type {
-  ComponentType,
-  Context,
-  JSX,
-  PropsWithChildren,
-  ReactNode,
-} from 'react'
-import type { FieldComponent, LensFieldComponent } from './useField'
+import type { ComponentType, Context, JSX, PropsWithChildren } from 'react'
+import type { FieldComponent } from './useField'
 import type { ReactFormExtendedApi } from './useForm'
-
-function LocalSubscribe({
-  lens,
-  selector,
-  children,
-}: PropsWithChildren<{
-  lens: AnyFormLensApi
-  selector: (state: AnyFormLensState) => AnyFormLensState
-}>) {
-  const data = useStore(lens.store, selector)
-
-  return functionalUpdate(children, data)
-}
+import type { AppFieldExtendedReactFormLensApi } from './useFieldGroup'
 
 /**
  * TypeScript inferencing is weird.
@@ -155,7 +133,10 @@ interface CreateFormHookProps<
   formContext: Context<AnyFormApi>
 }
 
-type AppFieldExtendedReactFormApi<
+/**
+ * @private
+ */
+export type AppFieldExtendedReactFormApi<
   TFormData,
   TOnMount extends undefined | FormValidateOrFn<TFormData>,
   TOnChange extends undefined | FormValidateOrFn<TFormData>,
@@ -197,100 +178,6 @@ type AppFieldExtendedReactFormApi<
     AppForm: ComponentType<PropsWithChildren>
   }
 
-type AppFieldExtendedReactFormLensApi<
-  TFormData,
-  TName extends DeepKeysOfType<TFormData, TLensData>,
-  TLensData,
-  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>,
-  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
-  TSubmitMeta,
-  TFieldComponents extends Record<string, ComponentType<any>>,
-  TFormComponents extends Record<string, ComponentType<any>>,
-> = FormLensApi<
-  TFormData,
-  TLensData,
-  TName,
-  TOnMount,
-  TOnChange,
-  TOnChangeAsync,
-  TOnBlur,
-  TOnBlurAsync,
-  TOnSubmit,
-  TOnSubmitAsync,
-  TOnServer,
-  TSubmitMeta
-> &
-  NoInfer<TFormComponents> & {
-    form: AppFieldExtendedReactFormApi<
-      TFormData,
-      TOnMount,
-      TOnChange,
-      TOnChangeAsync,
-      TOnBlur,
-      TOnBlurAsync,
-      TOnSubmit,
-      TOnSubmitAsync,
-      TOnServer,
-      TSubmitMeta,
-      TFieldComponents,
-      TFormComponents
-    >
-    AppField: LensFieldComponent<
-      TLensData,
-      TSubmitMeta,
-      NoInfer<TFieldComponents>
-    >
-    AppForm: ComponentType<PropsWithChildren>
-    /**
-     * A React component to render form fields. With this, you can render and manage individual form fields.
-     */
-    Field: LensFieldComponent<TLensData, TSubmitMeta>
-
-    /**
-     * 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.
-     */
-    Subscribe: <
-      TSelected = NoInfer<
-        FormLensState<
-          TFormData,
-          TLensData,
-          TOnMount,
-          TOnChange,
-          TOnChangeAsync,
-          TOnBlur,
-          TOnBlurAsync,
-          TOnSubmit,
-          TOnSubmitAsync,
-          TOnServer
-        >
-      >,
-    >(props: {
-      selector?: (
-        state: NoInfer<
-          FormLensState<
-            TFormData,
-            TLensData,
-            TOnMount,
-            TOnChange,
-            TOnChangeAsync,
-            TOnBlur,
-            TOnBlurAsync,
-            TOnSubmit,
-            TOnSubmitAsync,
-            TOnServer
-          >
-        >,
-      ) => TSelected
-      children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode
-    }) => ReactNode
-  }
-
 export interface WithFormProps<
   TFormData,
   TOnMount extends undefined | FormValidateOrFn<TFormData>,
@@ -385,132 +272,6 @@ export function createFormHook<
   formContext,
   formComponents,
 }: CreateFormHookProps<TComponents, TFormComponents>) {
-  function useFormLens<
-    TFormData,
-    TName extends DeepKeysOfType<TFormData, TLensData>,
-    TLensData,
-    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>,
-    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
-    TSubmitMeta = never,
-  >(opts: {
-    form: AppFieldExtendedReactFormApi<
-      TFormData,
-      TOnMount,
-      TOnChange,
-      TOnChangeAsync,
-      TOnBlur,
-      TOnBlurAsync,
-      TOnSubmit,
-      TOnSubmitAsync,
-      TOnServer,
-      TSubmitMeta,
-      TComponents,
-      TFormComponents
-    >
-    name: TName
-    defaultValues?: TLensData
-    onSubmitMeta?: TSubmitMeta
-  }): AppFieldExtendedReactFormLensApi<
-    TFormData,
-    TName,
-    TLensData,
-    TOnMount,
-    TOnChange,
-    TOnChangeAsync,
-    TOnBlur,
-    TOnBlurAsync,
-    TOnSubmit,
-    TOnSubmitAsync,
-    TOnServer,
-    TSubmitMeta,
-    TComponents,
-    TFormComponents
-  > {
-    const [formLensApi] = useState(() => {
-      const api = new FormLensApi(opts)
-
-      const extendedApi: AppFieldExtendedReactFormLensApi<
-        TFormData,
-        TName,
-        TLensData,
-        TOnMount,
-        TOnChange,
-        TOnChangeAsync,
-        TOnBlur,
-        TOnBlurAsync,
-        TOnSubmit,
-        TOnSubmitAsync,
-        TOnServer,
-        TSubmitMeta,
-        TComponents,
-        TFormComponents
-      > = api as never
-
-      extendedApi.AppForm = function AppForm(appFormProps) {
-        return <opts.form.AppForm {...appFormProps} />
-      }
-
-      extendedApi.AppField = function AppField({ name, ...appFieldProps }) {
-        return (
-          // @ts-expect-error
-          <opts.form.AppField
-            name={formLensApi.getFormFieldName(name)}
-            {...appFieldProps}
-          />
-        ) as never
-      }
-
-      extendedApi.Field = function Field({ name, ...fieldProps }) {
-        return (
-          // @ts-expect-error
-          <opts.form.Field
-            name={formLensApi.getFormFieldName(name)}
-            {...fieldProps}
-          />
-        ) as never
-      }
-
-      extendedApi.Subscribe = function Subscribe(props: any) {
-        return (
-          <LocalSubscribe
-            lens={formLensApi}
-            selector={props.selector}
-            children={props.children}
-          />
-        )
-      }
-
-      return Object.assign(extendedApi, {
-        ...formComponents,
-      }) as AppFieldExtendedReactFormLensApi<
-        TFormData,
-        TName,
-        TLensData,
-        TOnMount,
-        TOnChange,
-        TOnChangeAsync,
-        TOnBlur,
-        TOnBlurAsync,
-        TOnSubmit,
-        TOnSubmitAsync,
-        TOnServer,
-        TSubmitMeta,
-        TComponents,
-        TFormComponents
-      >
-    })
-
-    useIsomorphicLayoutEffect(formLensApi.mount, [formLensApi])
-
-    return formLensApi
-  }
-
   function useAppForm<
     TFormData,
     TOnMount extends undefined | FormValidateOrFn<TFormData>,
@@ -644,7 +405,7 @@ export function createFormHook<
     return (innerProps) => render({ ...props, ...innerProps })
   }
 
-  function withFormLens<
+  function withFieldGroup<
     TLensData,
     TSubmitMeta,
     TRenderProps extends Record<string, unknown> = {},
@@ -734,16 +495,18 @@ export function createFormHook<
             >,
             name: lens.getFormFieldName(innerProps.name),
             defaultValues,
+            formComponents,
           }
         } else {
           return {
             form: innerProps.form,
             name: innerProps.name,
             defaultValues,
+            formComponents,
           }
         }
       }, [innerProps.form, innerProps.name])
-      const lensApi = useFormLens(lensProps)
+      const lensApi = useFieldGroup(lensProps)
 
       return render({ ...props, ...innerProps, lens: lensApi as any })
     }
@@ -752,6 +515,6 @@ export function createFormHook<
   return {
     useAppForm,
     withForm,
-    withFormLens,
+    withFieldGroup,
   }
 }