fix: TS types

Author: Andrei Fedosjeenko

src/hook/index.tsx

@@ -37,11 +37,11 @@ import { createFormData } from "../utilities";
 
 export type SubmitFunctionOptions = Parameters<SubmitFunction>[1];
 
-export interface UseRemixFormOptions<T extends FieldValues>
-  extends UseFormProps<T> {
+export interface UseRemixFormOptions<TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>
+  extends UseFormProps<TFieldValues, TContext, TTransformedValues> {
   submitHandlers?: {
-    onValid?: SubmitHandler<T>;
-    onInvalid?: SubmitErrorHandler<T>;
+    onValid?: SubmitHandler<TTransformedValues>;
+    onInvalid?: SubmitErrorHandler<TFieldValues>;
   };
   submitConfig?: SubmitFunctionOptions;
   submitData?: FieldValues;
@@ -52,29 +52,29 @@ export interface UseRemixFormOptions<T extends FieldValues>
   stringifyAllValues?: boolean;
 }
 
-export const useRemixForm = <T extends FieldValues>({
+export const useRemixForm = <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({
   submitHandlers,
   submitConfig,
   submitData,
   fetcher,
   stringifyAllValues = true,
   ...formProps
-}: UseRemixFormOptions<T>) => {
+}: UseRemixFormOptions<TFieldValues, TContext, TTransformedValues>) => {
   const [isSubmittedSuccessfully, setIsSubmittedSuccessfully] = useState(false);
   const basename = useHref("/");
   const actionSubmit = useSubmit();
   const actionData = useActionData();
   const submit = fetcher?.submit ?? actionSubmit;
   // biome-ignore lint/suspicious/noExplicitAny: <explanation>
   const data: any = fetcher?.data ?? actionData;
-  const methods = useForm<T>({ ...formProps, errors: data?.errors });
+  const methods = useForm({ ...formProps, errors: data?.errors });
   const navigation = useNavigation();
   // Either it's submitted to an action or submitted to a fetcher (or neither)
   const isSubmittingForm = useMemo(
     () =>
       Boolean(
         (navigation.state !== "idle" && navigation.formData !== undefined) ||
-          (fetcher?.state !== "idle" && fetcher?.formData !== undefined),
+        (fetcher?.state !== "idle" && fetcher?.formData !== undefined),
       ),
     [navigation.state, navigation.formData, fetcher?.state, fetcher?.formData],
   );
@@ -92,7 +92,7 @@ export const useRemixForm = <T extends FieldValues>({
   const onSubmit = useMemo(
     () =>
       (
-        data: T,
+        data: TTransformedValues,
         // biome-ignore lint/suspicious/noExplicitAny: <explanation>
         e: any,
         formEncType?: FormEncType,
@@ -121,11 +121,11 @@ export const useRemixForm = <T extends FieldValues>({
   );
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  const onInvalid = useMemo(() => () => {}, []);
+  const onInvalid = useMemo(() => () => { }, []);
 
   // React-hook-form uses lazy property getters to avoid re-rendering when properties
   // that aren't being used change. Using getters here preservers that lazy behavior.
-  const formState: FormState<T> = useMemo(
+  const formState: FormState<TFieldValues> = useMemo(
     () => ({
       get isDirty() {
         return methods.formState.isDirty;
@@ -175,7 +175,7 @@ export const useRemixForm = <T extends FieldValues>({
   const reset = useMemo(
     () =>
       (
-        values?: T | DefaultValues<T> | undefined,
+        values?: TFieldValues | DefaultValues<TFieldValues> | undefined,
         options?: KeepStateOptions,
       ) => {
         setIsSubmittedSuccessfully(false);
@@ -187,8 +187,8 @@ export const useRemixForm = <T extends FieldValues>({
   const register = useMemo(
     () =>
       (
-        name: Path<T>,
-        options?: RegisterOptions<T> & {
+        name: Path<TFieldValues>,
+        options?: RegisterOptions<TFieldValues> & {
           disableProgressiveEnhancement?: boolean;
         },
       ) => {
@@ -242,14 +242,14 @@ export const useRemixForm = <T extends FieldValues>({
   return hookReturn;
 };
 
-export type UseRemixFormReturn<T extends FieldValues> = UseFormReturn<T> & {
+export type UseRemixFormReturn<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> = UseFormReturn<TFieldValues, TContext, TTransformedValues> & {
   handleSubmit: ReturnType<typeof useRemixForm>["handleSubmit"];
   reset: ReturnType<typeof useRemixForm>["reset"];
   register: ReturnType<typeof useRemixForm>["register"];
 };
 
-interface RemixFormProviderProps<T extends FieldValues>
-  extends Omit<UseFormReturn<T>, "handleSubmit" | "reset"> {
+interface RemixFormProviderProps<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>
+  extends Omit<UseFormReturn<TFieldValues, TContext, TTransformedValues>, "handleSubmit" | "reset"> {
   children: ReactNode;
   // biome-ignore lint/suspicious/noExplicitAny: <explanation>
   handleSubmit: any;
@@ -258,20 +258,20 @@ interface RemixFormProviderProps<T extends FieldValues>
   // biome-ignore lint/suspicious/noExplicitAny: <explanation>
   reset: any;
 }
-export const RemixFormProvider = <T extends FieldValues>({
+export const RemixFormProvider = <TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({
   children,
   ...props
-}: RemixFormProviderProps<T>) => {
+}: RemixFormProviderProps<TFieldValues, TContext, TTransformedValues>) => {
   return <FormProvider {...props}>{children}</FormProvider>;
 };
 
-export const useRemixFormContext = <T extends FieldValues>() => {
-  const methods = useFormContext<T>();
+export const useRemixFormContext = <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>() => {
+  const methods = useFormContext<TFieldValues, TContext, TTransformedValues>();
   return {
     ...methods,
     // biome-ignore lint/suspicious/noExplicitAny: <explanation>
     handleSubmit: methods.handleSubmit as any as ReturnType<
-      UseFormHandleSubmit<T>
+      UseFormHandleSubmit<TFieldValues, TTransformedValues>
     >,
   };
 };

src/middleware/index.ts

@@ -36,9 +36,9 @@ export function unstable_extractFormDataMiddleware({
 export const getFormData = (context: unstable_RouterContextProvider) =>
   context.get(formDataContext);
 
-export const getValidatedFormData = async <T extends FieldValues>(
+export const getValidatedFormData = async <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(
   context: unstable_RouterContextProvider,
-  resolver: Resolver<T>,
+  resolver: Resolver<TFieldValues, TContext, TTransformedValues>,
 ) => {
   const formData = context.get(formDataContext);
   const data = await validateFormData(formData, resolver);

src/utilities/index.ts

@@ -90,23 +90,23 @@ export const getFormDataFromSearchParams = <T extends FieldValues>(
 export const isGet = (request: Pick<Request, "method">) =>
   request.method === "GET" || request.method === "get";
 
-type ReturnData<T extends FieldValues> =
-  | { data: T; errors: undefined; receivedValues: Partial<T> }
-  | { data: undefined; errors: FieldErrors<T>; receivedValues: Partial<T> };
+type ReturnData<TFieldValues extends FieldValues, TTransformedValues = TFieldValues> =
+  | { data: TTransformedValues; errors: undefined; receivedValues: Partial<TFieldValues> }
+  | { data: undefined; errors: FieldErrors<TFieldValues>; receivedValues: Partial<TFieldValues> };
 /**
  * Parses the data from an HTTP request and validates it against a schema. Works in both loaders and actions, in loaders it extracts the data from the search params.
  * In actions it extracts it from request formData.
  *
  * @returns A Promise that resolves to an object containing the validated data or any errors that occurred during validation.
  */
-export const getValidatedFormData = async <T extends FieldValues>(
+export const getValidatedFormData = async <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(
   request: Request | FormData,
-  resolver: Resolver<T>,
+  resolver: Resolver<TFieldValues, TContext, TTransformedValues>,
   preserveStringified = false,
-): Promise<ReturnData<T>> => {
-  const { receivedValues } = await getFormData<T>(request, preserveStringified);
+): Promise<ReturnData<TFieldValues, TTransformedValues>> => {
+  const { receivedValues } = await getFormData<TFieldValues>(request, preserveStringified);
 
-  const data = await validateFormData<T>(receivedValues, resolver);
+  const data = await validateFormData(receivedValues, resolver);
 
   return { ...data, receivedValues };
 };
@@ -134,24 +134,24 @@ export const getFormData = async <T extends FieldValues>(
  * @param resolver Schema to validate and cast the data with
  * @returns Returns the validated data if successful, otherwise returns the error object
  */
-export const validateFormData = async <T extends FieldValues>(
+export const validateFormData = async <TFieldValues extends FieldValues, TContext extends any, TTransformedValues = TFieldValues>(
   // biome-ignore lint/suspicious/noExplicitAny: <explanation>
   data: any,
-  resolver: Resolver<T>,
+  resolver: Resolver<TFieldValues, TContext, TTransformedValues>,
 ) => {
   const dataToValidate =
     data instanceof FormData ? Object.fromEntries(data) : data;
   const { errors, values } = await resolver(
     dataToValidate,
-    {},
+    {} as TContext,
     { shouldUseNativeValidation: false, fields: {} },
   );
 
   if (Object.keys(errors).length > 0) {
-    return { errors: errors as FieldErrors<T>, data: undefined };
+    return { errors: errors as FieldErrors<TFieldValues>, data: undefined };
   }
 
-  return { errors: undefined, data: values as T };
+  return { errors: undefined, data: values as TTransformedValues };
 };
 /**
   Creates a new instance of FormData with the specified data and key.