fix: fix issues with SFC format, break JSX format usage

TanStack · Jul 6, 2024 · c6f0f74 · c6f0f74
1 parent 90efcee
commit c6f0f74
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 55 deletions.
diff --git a/packages/vue-form/src/useField.tsx b/packages/vue-form/src/useField.tsx
@@ -5,62 +5,65 @@ import type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core'
 import type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue'
 import type { UseFieldOptions } from './types'
 
-type FieldComponentProps<
+const DefineFieldFn = <
   TParentData,
-  TName extends DeepKeys<TParentData>,
-  TFieldValidator extends
-    | Validator<DeepValue<TParentData, TName>, unknown>
-    | undefined = undefined,
   TFormValidator extends
     | Validator<TParentData, unknown>
     | undefined = undefined,
-  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
-> = UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>
+>() =>
+  defineComponent(
+    <
+      TName extends DeepKeys<TParentData>,
+      TFieldValidator extends
+        | Validator<DeepValue<TParentData, TName>, unknown>
+        | undefined = undefined,
+      TData extends DeepValue<TParentData, TName> = DeepValue<
+        TParentData,
+        TName
+      >,
+    >(
+      _props: Omit<
+        FieldComponentProps<
+          TParentData,
+          TName,
+          TFieldValidator,
+          TFormValidator,
+          TData
+        >,
+        'form'
+      >,
+      _ctx: SetupContext<
+        EmitsOptions,
+        SlotsType<{
+          default: {
+            field: FieldApi<
+              TParentData,
+              TName,
+              TFieldValidator,
+              TFormValidator,
+              TData
+            >
+            state: FieldApi<
+              TParentData,
+              TName,
+              TFieldValidator,
+              TFormValidator,
+              TData
+            >['state']
+          }
+        }>
+      >,
+    ) =>
+      () =>
+        null,
+  )
 
 export type FieldComponent<
   TParentData,
   TFormValidator extends
     | Validator<TParentData, unknown>
     | undefined = undefined,
-> = <
-  TName extends DeepKeys<TParentData>,
-  TFieldValidator extends
-    | Validator<DeepValue<TParentData, TName>, unknown>
-    | undefined = undefined,
-  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
->(
-  _props: Omit<
-    FieldComponentProps<
-      TParentData,
-      TName,
-      TFieldValidator,
-      TFormValidator,
-      TData
-    >,
-    'form'
-  >,
-  _ctx: SetupContext<
-    EmitsOptions,
-    SlotsType<{
-      default: {
-        field: FieldApi<
-          TParentData,
-          TName,
-          TFieldValidator,
-          TFormValidator,
-          TData
-        >
-        state: FieldApi<
-          TParentData,
-          TName,
-          TFieldValidator,
-          TFormValidator,
-          TData
-        >['state']
-      }
-    }>
-  >,
-) => any
+> = ReturnType<typeof DefineFieldFn<TParentData, TFormValidator>>
 
 interface VueFieldApi<
   TParentData,
@@ -159,6 +162,18 @@ export function useField<
   return { api: fieldApi, state: fieldState } as const
 }
 
+export type FieldComponentProps<
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+> = UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>
+
 export const Field = defineComponent(
   <
     TParentData,

diff --git a/packages/vue-form/src/useForm.tsx b/packages/vue-form/src/useForm.tsx
@@ -7,6 +7,21 @@ import type { NoInfer } from '@tanstack/vue-store'
 import type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue'
 import type { FieldComponent, UseField } from './useField'
 
+const SubscribeFn = <TFormData,>() =>
+  defineComponent(
+    <TSelected = NoInfer<FormState<TFormData>>,>(
+      _props: {
+        selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
+      },
+      _ctx: SetupContext<
+        EmitsOptions,
+        SlotsType<{ default: NoInfer<FormState<TFormData>> }>
+      >,
+    ) =>
+      () =>
+        null,
+  )
+
 interface VueFormApi<
   TFormData,
   TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
@@ -16,15 +31,7 @@ interface VueFormApi<
   useStore: <TSelected = NoInfer<FormState<TFormData>>>(
     selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
   ) => Readonly<Ref<TSelected>>
-  Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(
-    props: {
-      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
-    },
-    context: SetupContext<
-      EmitsOptions,
-      SlotsType<{ default: NoInfer<FormState<TFormData>> }>
-    >,
-  ) => any
+  Subscribe: ReturnType<typeof SubscribeFn<TFormData>>
 }
 
 export function useForm<