Make context accessible in onSubmit

.changeset/light-radios-boil.md

@@ -0,0 +1,5 @@
+---
+"signal-form": patch
+---
+
+Add context in onSubmit callback

lib/create-form-context.ts

@@ -1,4 +1,4 @@
-import type { FormEventHandler } from "react";
+import type { SyntheticEvent } from "react";
 import type { ReadonlySignal, Signal } from "@preact/signals-react";
 import { signal } from "@preact/signals-react";
 import type { AnyObjectSchema, InferType } from "yup";
@@ -7,14 +7,19 @@ import type { ValidationResult, ValidationError } from "~/utils/validate";
 import { validateSync } from "~/utils/validate";
 import type { DeepPartial } from "./utils/deep-partial";
 
+export type OnSubmitHandler = (
+  event: SyntheticEvent<HTMLFormElement>,
+  context: FormContext<any>
+) => void;
+
 type CreateFormContextOptions<S extends AnyObjectSchema> = {
   submittedErrors?: ValidationError[];
   submittedData?: any;
   defaultData?: DeepPartial<InferType<S>>;
   data?: Signal<InferType<S>>;
   schema: ReadonlySignal<S | undefined>;
   id: string;
-  onSubmit?: FormEventHandler<HTMLFormElement>;
+  onSubmit?: OnSubmitHandler;
   formRef: React.RefObject<HTMLFormElement>;
 };
 
@@ -56,7 +61,7 @@ export function createFormContext<S extends AnyObjectSchema>({
     }
   }
 
-  return {
+  let context: FormContext<S> = {
     data,
     result,
     errors,
@@ -66,7 +71,7 @@ export function createFormContext<S extends AnyObjectSchema>({
     formRef,
     validate,
     onSubmit(event) {
-      onSubmit?.(event);
+      onSubmit?.(event, context);
       if (!event.isPropagationStopped()) {
         didSubmit.value = true;
         let validationResult = validate();
@@ -92,4 +97,6 @@ export function createFormContext<S extends AnyObjectSchema>({
       result.value = undefined;
     },
   };
+
+  return context;
 }

lib/form.tsx

@@ -4,6 +4,7 @@ import { useSignal, type Signal } from "@preact/signals-react";
 import type { AnyObjectSchema, InferType } from "yup";
 import { FieldsContext, FormContext } from "~/context";
 import { type ValidationError } from "~/utils/validate";
+import type { OnSubmitHandler } from "./create-form-context";
 import { createFormContext } from "./create-form-context";
 import type { DeepPartial } from "./utils/deep-partial";
 import { useForwardedRef } from "~/utils/use-forwarded-ref";
@@ -15,7 +16,8 @@ export type FormProps<S extends AnyObjectSchema> = {
   data?: Signal<InferType<S>>;
   submittedData?: DeepPartial<InferType<S>>;
   submittedErrors?: ValidationError[];
-} & FormHTMLAttributes<HTMLFormElement>;
+  onSubmit?: OnSubmitHandler;
+} & Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit">;
 
 export const Form = forwardRef(
   <S extends AnyObjectSchema>(

lib/remix.tsx

@@ -11,6 +11,7 @@ import { useSignal, type Signal } from "@preact/signals-react";
 import type { AnyObjectSchema, InferType } from "yup";
 import { FieldsContext, FormContext, useFormContext } from "~/context";
 import type { ErrorActionData, ValidationErrorResult } from "~/utils/validate";
+import type { OnSubmitHandler } from "./create-form-context";
 import { createFormContext } from "./create-form-context";
 import type { DeepPartial } from "./utils/deep-partial";
 import { json } from "@remix-run/node";
@@ -23,7 +24,8 @@ export type FormProps<S extends AnyObjectSchema> = {
   schema?: S;
   defaultData?: DeepPartial<InferType<S>>;
   data?: Signal<InferType<S>>;
-} & RemixFormProps;
+  onSubmit?: OnSubmitHandler;
+} & Omit<RemixFormProps, "onSubmit">;
 
 export const Form = forwardRef(
   <S extends AnyObjectSchema>(