feat(react): allow withForms render function to take extending properties

Author: Sebastian Hoffmann

packages/form-core/src/FormApi.ts

@@ -193,43 +193,40 @@ export interface FormValidators<
  */
 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>,
+  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
   TSubmitMeta = never,
 > {
-  fn: <
-    TFFormData extends TFormData,
-    TFOnMount extends undefined | FormValidateOrFn<TFFormData>,
-    TFOnChange extends undefined | FormValidateOrFn<TFFormData>,
-    TFOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFFormData>,
-    TFOnBlur extends undefined | FormValidateOrFn<TFFormData>,
-    TFOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFFormData>,
-    TFOnSubmit extends undefined | FormValidateOrFn<TFFormData>,
-    TFOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFFormData>,
-    TFOnServer extends undefined | FormValidateOrFn<TFFormData>,
-    TFSubmitMeta extends TSubmitMeta
-  >(
+  fn: (
     formBase: FormApi<
-      TFFormData,
-      TFOnMount,
-      TFOnChange,
-      TFOnChangeAsync,
-      TFOnBlur,
-      TFOnBlurAsync,
-      TFOnSubmit,
-      TFOnSubmitAsync,
-      TFOnServer,
-      TFSubmitMeta
+      TFormData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnServer,
+      TSubmitMeta
     >,
   ) => FormApi<
-    TFFormData,
-    TFOnMount,
-    TFOnChange,
-    TFOnChangeAsync,
-    TFOnBlur,
-    TFOnBlurAsync,
-    TFOnSubmit,
-    TFOnSubmitAsync,
-    TFOnServer,
-    TFSubmitMeta
+    TFormData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnServer,
+    TSubmitMeta
   >
   deps: unknown[]
 }
@@ -299,63 +296,52 @@ export interface FormOptions<
   /**
    * A function to be called when the form is submitted, what should happen once the user submits a valid form returns `any` or a promise `Promise<any>`
    */
-  onSubmit?: <
-    TFFormData extends TFormData,
-    TFOnMount extends undefined | FormValidateOrFn<TFFormData>,
-    TFOnChange extends undefined | FormValidateOrFn<TFFormData>,
-    TFOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFFormData>,
-    TFOnBlur extends undefined | FormValidateOrFn<TFFormData>,
-    TFOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFFormData>,
-    TFOnSubmit extends undefined | FormValidateOrFn<TFFormData>,
-    TFOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFFormData>,
-    TFOnServer extends undefined | FormValidateOrFn<TFFormData>,
-    TFSubmitMeta extends TSubmitMeta
-  >(props: {
-    value: TFFormData
+  onSubmit?: (props: {
+    value: TFormData
     formApi: FormApi<
-      TFFormData,
-      TFOnMount,
-      TFOnChange,
-      TFOnChangeAsync,
-      TFOnBlur,
-      TFOnBlurAsync,
-      TFOnSubmit,
-      TFOnSubmitAsync,
-      TFOnServer,
-      TFSubmitMeta
+      TFormData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnServer,
+      TSubmitMeta
     >
     meta: TSubmitMeta
   }) => any | Promise<any>
   /**
    * Specify an action for scenarios where the user tries to submit an invalid form.
    */
-  onSubmitInvalid?: <
-    TFFormData extends TFormData,
-    TFOnMount extends undefined | FormValidateOrFn<TFFormData>,
-    TFOnChange extends undefined | FormValidateOrFn<TFFormData>,
-    TFOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFFormData>,
-    TFOnBlur extends undefined | FormValidateOrFn<TFFormData>,
-    TFOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFFormData>,
-    TFOnSubmit extends undefined | FormValidateOrFn<TFFormData>,
-    TFOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFFormData>,
-    TFOnServer extends undefined | FormValidateOrFn<TFFormData>,
-    TFSubmitMeta extends TSubmitMeta
-  >(props: {
-    value: TFFormData
+  onSubmitInvalid?: (props: {
+    value: TFormData
     formApi: FormApi<
-      TFFormData,
-      TFOnMount,
-      TFOnChange,
-      TFOnChangeAsync,
-      TFOnBlur,
-      TFOnBlurAsync,
-      TFOnSubmit,
-      TFOnSubmitAsync,
-      TFOnServer,
-      TFSubmitMeta
+      TFormData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnServer,
+      TSubmitMeta
     >
   }) => void
-  transform?: FormTransform<NoInfer<TFormData>>
+  transform?: FormTransform<
+    NoInfer<TFormData>,
+    NoInfer<TOnMount>,
+    NoInfer<TOnChange>,
+    NoInfer<TOnChangeAsync>,
+    NoInfer<TOnBlur>,
+    NoInfer<TOnBlurAsync>,
+    NoInfer<TOnSubmit>,
+    NoInfer<TOnSubmitAsync>,
+    NoInfer<TOnServer>,
+    NoInfer<TSubmitMeta>
+  >
 }
 
 /**

packages/react-form/src/createFormHook.tsx

@@ -198,20 +198,31 @@ export interface WithFormProps<
   > {
   // Optional, but adds props to the `render` function outside of `form`
   props?: TRenderProps
-  render: (
+  render: <
+    TFFormData extends TFormData,
+    TFOnMount extends undefined | FormValidateOrFn<TFFormData>,
+    TFOnChange extends undefined | FormValidateOrFn<TFFormData>,
+    TFOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFFormData>,
+    TFOnBlur extends undefined | FormValidateOrFn<TFFormData>,
+    TFOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFFormData>,
+    TFOnSubmit extends undefined | FormValidateOrFn<TFFormData>,
+    TFOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFFormData>,
+    TFOnServer extends undefined | FormAsyncValidateOrFn<TFFormData>,
+    TFSubmitMeta,
+  >(
     props: PropsWithChildren<
       NoInfer<TRenderProps> & {
         form: AppFieldExtendedReactFormApi<
-          TFormData,
-          TOnMount,
-          TOnChange,
-          TOnChangeAsync,
-          TOnBlur,
-          TOnBlurAsync,
-          TOnSubmit,
-          TOnSubmitAsync,
-          TOnServer,
-          TSubmitMeta,
+          TFFormData,
+          TFOnMount,
+          TFOnChange,
+          TFOnChangeAsync,
+          TFOnBlur,
+          TFOnBlurAsync,
+          TFOnSubmit,
+          TFOnSubmitAsync,
+          TFOnServer,
+          TFSubmitMeta,
           TFieldComponents,
           TFormComponents
         >

packages/react-form/tests/createFormHook.test-d.tsx

@@ -235,9 +235,6 @@ describe('createFormHook', () => {
     const incorrectFormOpts = formOptions({
       defaultValues: {
         firstName: 'FirstName',
-        lastName: 'LastName',
-        firstNameWrong: 'FirstName',
-        lastNameWrong: 'LastName',
       },
     })
 
@@ -247,5 +244,19 @@ describe('createFormHook', () => {
       // @ts-expect-error Incorrect form opts
       <WithFormComponent form={incorrectAppForm} prop1="test" prop2={10} />
     )
+
+    const extendingFormOpts = formOptions({
+      defaultValues: {
+        firstName: 'FirstName',
+        lastName: 'LastName',
+        country: 'Country',
+      },
+    })
+
+    const extendingAppForm = useAppForm(extendingFormOpts)
+
+    const ExtendingFormOptsComponent = (
+      <WithFormComponent form={extendingAppForm} prop1="test" prop2={10} />
+    )
   })
 })