changed solution to type assertion

vercel-labs · Nov 21, 2022 · 3a2df20 · 3a2df20
1 parent 9c6eb37
commit 3a2df20
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 18 deletions.
diff --git a/packages/@next-fetch/react-query/src/form.ts b/packages/@next-fetch/react-query/src/form.ts
@@ -32,20 +32,18 @@ export function useForm<Data, Error, Input, Context>(
  * This enables progressive enhancement, as the form can be submitted
  * without having to re-render the app using JavaScript code.
  */
-
-// 4. https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref/58473012#58473012
-declare module "react" {
-  function forwardRef<T, P = {}>(
-    render: (props: P, ref: React.ForwardedRef<T>) => React.ReactElement | null
-  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
-}
-
 type FormProps<Data, Error, Input, Context> = React.HTMLProps<HTMLFormElement> &
   React.PropsWithChildren<{
     mutation: HookWithFormSubmission<Data, Error, Input, Context>;
     mutationConfig?: UseMutationOptions<Data, Error, Input, Context>;
   }>;
 
+type FormT = <Data, Error, Input, Context>(
+  props: FormProps<Data, Error, Input, Context> & {
+    ref?: React.ForwardedRef<HTMLFormElement>;
+  }
+) => ReturnType<typeof FormImpl>;
+
 export function FormImpl<Data, Error, Input, Context>(
   {
     mutation,
@@ -59,4 +57,5 @@ export function FormImpl<Data, Error, Input, Context>(
   return createElement("form", { ...formProps, ...props, ref }, props.children);
 }
 
-export const Form = forwardRef(FormImpl)
+// 1. https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref/58473012#58473012
+export const Form = forwardRef(FormImpl) as unknown as FormT;
diff --git a/packages/@next-fetch/swr/src/form.ts b/packages/@next-fetch/swr/src/form.ts
@@ -32,20 +32,16 @@ export function useForm<Data, Error>(
  * This enables progressive enhancement, as the form can be submitted
  * without having to re-render the app using JavaScript code.
  */
-
-// 4. https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref/58473012#58473012
-declare module "react" {
-  function forwardRef<T, P = {}>(
-    render: (props: P, ref: React.ForwardedRef<T>) => React.ReactElement | null
-  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
-}
-
 type FormProps<Data, Error> = React.HTMLProps<HTMLFormElement> &
   React.PropsWithChildren<{
     mutation: HookWithFormSubmission<Data, Error>;
     mutationConfig?: SWRMutationConfiguration<Data, Error>;
   }>;
 
+type FormT = <Data, Error>(
+  props: FormProps<Data, Error> & { ref?: React.ForwardedRef<HTMLFormElement> }
+) => ReturnType<typeof FormImpl>;
+
 function FormImpl<Data, Error>(
   { mutation, mutationConfig, ...props }: FormProps<Data, Error>,
   ref?: React.ForwardedRef<HTMLFormElement>
@@ -55,4 +51,5 @@ function FormImpl<Data, Error>(
   return createElement("form", { ...formProps, ...props, ref }, props.children);
 }
 
-export const Form = forwardRef(FormImpl)
+// 1. https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref/58473012#58473012
+export const Form = forwardRef(FormImpl) as unknown as FormT;