@tanstack/solid-form 1.12.4 → 1.14.0

package/src/createField.tsx

@@ -2,7 +2,6 @@ import { FieldApi } from '@tanstack/form-core'
 import {
   createComponent,
   createComputed,
-  createMemo,
   createSignal,
   onCleanup,
   onMount,
@@ -17,7 +16,7 @@ import type {
   Narrow,
 } from '@tanstack/form-core'
 
-import type { JSXElement } from 'solid-js'
+import type { Accessor, Component, JSX, JSXElement } from 'solid-js'
 import type { CreateFieldOptions, CreateFieldOptionsBound } from './types'
 
 interface SolidFieldApi<
@@ -359,7 +358,8 @@ interface FieldComponentBoundProps<
   TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
   TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
   TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
-  TParentSubmitMeta,
+  TPatentSubmitMeta,
+  ExtendedApi = {},
 > extends CreateFieldOptionsBound<
     TParentData,
     TName,
@@ -373,43 +373,56 @@ interface FieldComponentBoundProps<
     TOnSubmitAsync
   > {
   children: (
-    fieldApi: () => FieldApi<
-      TParentData,
-      TName,
-      TData,
-      TOnMount,
-      TOnChange,
-      TOnChangeAsync,
-      TOnBlur,
-      TOnBlurAsync,
-      TOnSubmit,
-      TOnSubmitAsync,
-      TFormOnMount,
-      TFormOnChange,
-      TFormOnChangeAsync,
-      TFormOnBlur,
-      TFormOnBlurAsync,
-      TFormOnSubmit,
-      TFormOnSubmitAsync,
-      TFormOnServer,
-      TParentSubmitMeta
-    >,
-  ) => JSXElement
+    fieldApi: Accessor<
+      FieldApi<
+        TParentData,
+        TName,
+        TData,
+        TOnMount,
+        TOnChange,
+        TOnChangeAsync,
+        TOnBlur,
+        TOnBlurAsync,
+        TOnSubmit,
+        TOnSubmitAsync,
+        TFormOnMount,
+        TFormOnChange,
+        TFormOnChangeAsync,
+        TFormOnBlur,
+        TFormOnBlurAsync,
+        TFormOnSubmit,
+        TFormOnSubmitAsync,
+        TFormOnServer,
+        TPatentSubmitMeta
+      >
+    > &
+      ExtendedApi,
+  ) => JSX.Element
 }
 
+/**
+ * A type alias representing a field component for a specific form data type.
+ */
 export type FieldComponent<
-  TParentData,
-  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
-  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
-  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
-  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
-  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
-  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
-  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
-  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
-  TParentSubmitMeta,
+  in out TParentData,
+  in out TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
+  in out TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
+  in out TFormOnChangeAsync extends
+    | undefined
+    | FormAsyncValidateOrFn<TParentData>,
+  in out TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
+  in out TFormOnBlurAsync extends
+    | undefined
+    | FormAsyncValidateOrFn<TParentData>,
+  in out TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
+  in out TFormOnSubmitAsync extends
+    | undefined
+    | FormAsyncValidateOrFn<TParentData>,
+  in out TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
+  in out TPatentSubmitMeta,
+  in out ExtendedApi = {},
 > = <
-  TName extends DeepKeys<TParentData>,
+  const TName extends DeepKeys<TParentData>,
   TData extends DeepValue<TParentData, TName>,
   TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
   TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
@@ -446,8 +459,9 @@ export type FieldComponent<
   TFormOnSubmit,
   TFormOnSubmitAsync,
   TFormOnServer,
-  TParentSubmitMeta
->) => JSXElement
+  TPatentSubmitMeta,
+  ExtendedApi
+>) => JSX.Element
 
 interface FieldComponentProps<
   TParentData,

package/src/createForm.tsx

@@ -112,6 +112,44 @@ export interface SolidFormApi<
   }) => JSXElement
 }
 
+/**
+ * An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`
+ */
+export type SolidFormExtendedApi<
+  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>,
+  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TSubmitMeta,
+> = FormApi<
+  TFormData,
+  TOnMount,
+  TOnChange,
+  TOnChangeAsync,
+  TOnBlur,
+  TOnBlurAsync,
+  TOnSubmit,
+  TOnSubmitAsync,
+  TOnServer,
+  TSubmitMeta
+> &
+  SolidFormApi<
+    TFormData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnServer,
+    TSubmitMeta
+  >
 export function createForm<
   TParentData,
   TFormOnMount extends undefined | FormValidateOrFn<TParentData>,

package/src/createFormHook.tsx

@@ -0,0 +1,386 @@
+import { createContext, splitProps, useContext } from 'solid-js'
+import { createForm } from './createForm'
+import type {
+  AnyFieldApi,
+  AnyFormApi,
+  FieldApi,
+  FormAsyncValidateOrFn,
+  FormOptions,
+  FormValidateOrFn,
+} from '@tanstack/form-core'
+import type {
+  Accessor,
+  Component,
+  Context,
+  JSXElement,
+  ParentProps,
+} from 'solid-js'
+import type { FieldComponent } from './createField'
+import type { SolidFormExtendedApi } from './createForm'
+
+/**
+ * TypeScript inferencing is weird.
+ *
+ * If you have:
+ *
+ * @example
+ *
+ * interface Args<T> {
+ *     arg?: T
+ * }
+ *
+ * function test<T>(arg?: Partial<Args<T>>): T {
+ *     return 0 as any;
+ * }
+ *
+ * const a = test({});
+ *
+ * Then `T` will default to `unknown`.
+ *
+ * However, if we change `test` to be:
+ *
+ * @example
+ *
+ * function test<T extends undefined>(arg?: Partial<Args<T>>): T;
+ *
+ * Then `T` becomes `undefined`.
+ *
+ * Here, we are checking if the passed type `T` extends `DefaultT` and **only**
+ * `DefaultT`, as if that's the case we assume that inferencing has not occured.
+ */
+type UnwrapOrAny<T> = [unknown] extends [T] ? any : T
+type UnwrapDefaultOrAny<DefaultT, T> = [DefaultT] extends [T]
+  ? [T] extends [DefaultT]
+    ? any
+    : T
+  : T
+
+export function createFormHookContexts() {
+  // We should never hit the `null` case here
+  const fieldContext = createContext<Accessor<AnyFieldApi>>(
+    null as unknown as Accessor<AnyFieldApi>,
+  )
+
+  function useFieldContext<TData>() {
+    const field = useContext(fieldContext)
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (!field) {
+      throw new Error(
+        '`fieldContext` only works when within a `fieldComponent` passed to `createFormHook`',
+      )
+    }
+
+    return field as Accessor<
+      FieldApi<
+        any,
+        string,
+        TData,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any
+      >
+    >
+  }
+
+  // We should never hit the `null` case here
+  const formContext = createContext<AnyFormApi>(null as unknown as AnyFormApi)
+
+  function useFormContext() {
+    const form = useContext(formContext)
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (!form) {
+      throw new Error(
+        '`formContext` only works when within a `formComponent` passed to `createFormHook`',
+      )
+    }
+
+    return form as SolidFormExtendedApi<
+      // If you need access to the form data, you need to use `withForm` instead
+      Record<string, never>,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any
+    >
+  }
+
+  return { fieldContext, useFieldContext, useFormContext, formContext }
+}
+
+interface CreateFormHookProps<
+  TFieldComponents extends Record<string, Component<any>>,
+  TFormComponents extends Record<string, Component<any>>,
+> {
+  fieldComponents: TFieldComponents
+  fieldContext: Context<Accessor<AnyFieldApi>>
+  formComponents: TFormComponents
+  formContext: Context<AnyFormApi>
+}
+
+type AppFieldExtendedSolidFormApi<
+  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>,
+  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TSubmitMeta,
+  TFieldComponents extends Record<string, Component<any>>,
+  TFormComponents extends Record<string, Component<any>>,
+> = SolidFormExtendedApi<
+  TFormData,
+  TOnMount,
+  TOnChange,
+  TOnChangeAsync,
+  TOnBlur,
+  TOnBlurAsync,
+  TOnSubmit,
+  TOnSubmitAsync,
+  TOnServer,
+  TSubmitMeta
+> &
+  NoInfer<TFormComponents> & {
+    AppField: FieldComponent<
+      TFormData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnServer,
+      TSubmitMeta,
+      NoInfer<TFieldComponents>
+    >
+    AppForm: Component<ParentProps>
+  }
+
+export interface WithFormProps<
+  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>,
+  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TSubmitMeta,
+  TFieldComponents extends Record<string, Component<any>>,
+  TFormComponents extends Record<string, Component<any>>,
+  TRenderProps extends Record<string, unknown> = Record<string, never>,
+> extends FormOptions<
+    TFormData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnServer,
+    TSubmitMeta
+  > {
+  // Optional, but adds props to the `render` function outside of `form`
+  props?: TRenderProps
+  render: (
+    props: ParentProps<
+      NoInfer<TRenderProps> & {
+        form: AppFieldExtendedSolidFormApi<
+          TFormData,
+          TOnMount,
+          TOnChange,
+          TOnChangeAsync,
+          TOnBlur,
+          TOnBlurAsync,
+          TOnSubmit,
+          TOnSubmitAsync,
+          TOnServer,
+          TSubmitMeta,
+          TFieldComponents,
+          TFormComponents
+        >
+      }
+    >,
+  ) => JSXElement
+}
+
+export function createFormHook<
+  const TComponents extends Record<string, Component<any>>,
+  const TFormComponents extends Record<string, Component<any>>,
+>(opts: CreateFormHookProps<TComponents, TFormComponents>) {
+  function useAppForm<
+    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>,
+    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TSubmitMeta,
+  >(
+    props: Accessor<
+      FormOptions<
+        TFormData,
+        TOnMount,
+        TOnChange,
+        TOnChangeAsync,
+        TOnBlur,
+        TOnBlurAsync,
+        TOnSubmit,
+        TOnSubmitAsync,
+        TOnServer,
+        TSubmitMeta
+      >
+    >,
+  ): AppFieldExtendedSolidFormApi<
+    TFormData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnServer,
+    TSubmitMeta,
+    TComponents,
+    TFormComponents
+  > {
+    const form = createForm(props)
+
+    const AppForm = ((formProps) => {
+      return (
+        <opts.formContext.Provider value={form}>
+          {formProps.children}
+        </opts.formContext.Provider>
+      )
+    }) as Component<ParentProps>
+
+    const AppField = ((_props) => {
+      const [childProps, fieldProps] = splitProps(_props, ['children'])
+      return (
+        <form.Field {...fieldProps}>
+          {(field) => (
+            <opts.fieldContext.Provider value={field}>
+              {childProps.children(Object.assign(field, opts.fieldComponents))}
+            </opts.fieldContext.Provider>
+          )}
+        </form.Field>
+      )
+    }) as FieldComponent<
+      TFormData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnServer,
+      TSubmitMeta,
+      TComponents
+    >
+
+    const extendedForm: AppFieldExtendedSolidFormApi<
+      TFormData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnServer,
+      TSubmitMeta,
+      TComponents,
+      TFormComponents
+    > = form as never
+    extendedForm.AppField = AppField
+    extendedForm.AppForm = AppForm
+    for (const [key, value] of Object.entries(opts.formComponents)) {
+      // Since it's a generic I need to cast it to an object
+      ;(extendedForm as Record<string, any>)[key] = value
+    }
+
+    return extendedForm
+  }
+
+  function withForm<
+    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>,
+    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TSubmitMeta,
+    TRenderProps extends Record<string, unknown> = {},
+  >({
+    render,
+    props,
+  }: WithFormProps<
+    TFormData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnServer,
+    TSubmitMeta,
+    TComponents,
+    TFormComponents,
+    TRenderProps
+  >): WithFormProps<
+    UnwrapOrAny<TFormData>,
+    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnMount>,
+    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnChange>,
+    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnChangeAsync>,
+    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnBlur>,
+    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnBlurAsync>,
+    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnSubmit>,
+    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync>,
+    UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnServer>,
+    UnwrapOrAny<TSubmitMeta>,
+    UnwrapOrAny<TComponents>,
+    UnwrapOrAny<TFormComponents>,
+    UnwrapOrAny<TRenderProps>
+  >['render'] {
+    return (innerProps) => render({ ...props, ...innerProps })
+  }
+
+  return {
+    useAppForm,
+    withForm,
+  }
+}

package/src/index.tsx

@@ -6,3 +6,6 @@ export { createForm, type SolidFormApi } from './createForm'
 
 export type { CreateField, FieldComponent } from './createField'
 export { createField, Field } from './createField'
+
+export type { WithFormProps } from './createFormHook'
+export { createFormHook, createFormHookContexts } from './createFormHook'