LukeParke/form
1
0
Fork 0
mirror of https://github.com/LukeHagar/form.git synced 2025-12-06 12:27:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: refactor to flat generics with consistent names & patterns

Browse Source
This commit is contained in:
Tanner Linsley
2023-09-13 14:46:16 -06:00
parent 46b49ca669
commit 1fb28c53eb
15 changed files with 252 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
docs/framework/react/reference/Field.md
View File

@@ -3,18 +3,23 @@ id: field
title: Field
---
### `FieldComponent<TFormData>`
### `FieldComponent<TParentData>`
A type alias representing a field component for a specific form data type.
```tsx
export type FieldComponent = <TField extends DeepKeys<TFormData>>({
export type FieldComponent = <TField extends DeepKeys<TParentData>>({
children,
...fieldOptions
}: {
children: (fieldApi: FieldApi<DeepValue<TFormData, TField>, TFormData>) => any
children: (
fieldApi: FieldApi<DeepValue<TParentData, TField>, TParentData>,
) => any
name: TField
} & Omit<FieldOptions<DeepValue<TFormData, TField>, TFormData>, 'name'>) => any
} & Omit<
FieldOptions<DeepValue<TParentData, TField>, TParentData>,
'name'
>) => any
```
A function component that takes field options and a render function as children and returns a React component.
@@ -22,23 +27,23 @@ A function component that takes field options and a render function as children
### `Field`
```tsx
export function Field<TData, TFormData>({
export function Field<TData, TParentData>({
children,
...fieldOptions
}: { children: (fieldApi: FieldApi<TData, TFormData>) => any } & FieldOptions<
}: { children: (fieldApi: FieldApi<TData, TParentData>) => any } & FieldOptions<
TData,
TFormData
TParentData
>): any
```
A functional React component that renders a form field.
- ```tsx
children: (fieldApi: FieldApi<TData, TFormData>) => any
children: (fieldApi: FieldApi<TData, TParentData>) => any
```
- A render function that takes a field API instance and returns a React element.
- ```tsx
fieldOptions: FieldOptions<TData, TFormData>
fieldOptions: FieldOptions<TData, TParentData>
```
- The field options.
@@ -47,14 +52,14 @@ The `Field` component uses the `useField` hook internally to manage the field in
### `createFieldComponent`
```tsx
export function createFieldComponent<TFormData>(
formApi: FormApi<TFormData>,
): FieldComponent<TFormData>
export function createFieldComponent<TParentData>(
formApi: FormApi<TParentData>,
): FieldComponent<TParentData>
```
A factory function that creates a connected field component for a specific form API instance.
- ```tsx
formApi: FormApi<TFormData>
formApi: FormApi<TParentData>
```
- The form API instance to connect the field component to.

4
docs/framework/react/reference/fieldApi.md
View File

@@ -3,11 +3,11 @@ id: fieldApi
title: Field API
---
### `FieldApi<TData, TFormData>`
### `FieldApi<TData, TParentData>`
When using `@tanstack/react-form`, the [core field API](../../reference/fieldApi) is extended with additional methods for React-specific functionality:
- ```tsx
Field: FieldComponent<TData, TFormData>
Field: FieldComponent<TData, TParentData>
```
- A pre-bound and type-safe sub-field component using this field as a root.

26
docs/framework/react/reference/useField.md
View File

@@ -3,17 +3,17 @@ id: useField
title: useField
---
### `UseField<TFormData>`
### `UseField<TParentData>`
A type representing a hook for using a field in a form with the given form data type.
```tsx
export type UseField = <TField extends DeepKeys<TFormData>>(
export type UseField = <TField extends DeepKeys<TParentData>>(
opts?: { name: TField } & FieldOptions<
DeepValue<TFormData, TField>,
TFormData
DeepValue<TParentData, TField>,
TParentData
>,
) => FieldApi<DeepValue<TFormData, TField>, TFormData>
) => FieldApi<DeepValue<TParentData, TField>, TParentData>
```
- A function that takes an optional object with a `name` property and field options, and returns a `FieldApi` instance for the specified field.
@@ -21,31 +21,31 @@ export type UseField = <TField extends DeepKeys<TFormData>>(
### `useField`
```tsx
export function useField<TData, TFormData>(
opts: FieldOptions<TData, TFormData>,
): FieldApi<TData, TFormData>
export function useField<TData, TParentData>(
opts: FieldOptions<TData, TParentData>,
): FieldApi<TData, TParentData>
```
A hook for managing a field in a form.
- ```tsx
opts: FieldOptions<TData, TFormData>
opts: FieldOptions<TData, TParentData>
```
- An object with field options.
#### Returns
- ```tsx
FieldApi<TData, TFormData>
FieldApi<TData, TParentData>
```
- The `FieldApi` instance for the specified field.
### `createUseField`
```tsx
export function createUseField<TFormData>(
formApi: FormApi<TFormData>,
): UseField<TFormData>
export function createUseField<TParentData>(
formApi: FormApi<TParentData>,
): UseField<TParentData>
```
A function that creates a `UseField` hook bound to the given `formApi`.

38
docs/reference/fieldApi.md
View File

@@ -11,14 +11,14 @@ Normally, you will not need to create a new `FieldApi` instance directly. Instea
const fieldApi: FieldApi<TData> = new FieldApi(formOptions: Field Options<TData>)
```
### `FieldOptions<TData, TFormData>`
### `FieldOptions<TData, TParentData>`
An object type representing the options for a field in a form.
- ```tsx
name
```
- The field name. If `TFormData` is `unknown`, the type will be `string`. Otherwise, it will be `DeepKeys<TFormData>`.
- The field name. If `TParentData` is `unknown`, the type will be `string`. Otherwise, it will be `DeepKeys<TParentData>`.
- ```tsx
defaultValue?: TData
```
@@ -30,19 +30,19 @@ An object type representing the options for a field in a form.
- An optional object with default metadata for the field.
- ```tsx
onMount?: (formApi: FieldApi<TData, TFormData>) => void
onMount?: (formApi: FieldApi<TData, TParentData>) => void
```
- An optional function that takes a param of `formApi` which is a generic type of `TData` and `TFormData`
- An optional function that takes a param of `formApi` which is a generic type of `TData` and `TParentData`
- ```tsx
onChange?: ValidateFn<TData, TFormData>
onChange?: ValidateFn<TData, TParentData>
```
- An optional property that takes a `ValidateFn` which is a generic of `TData` and `TFormData`
- An optional property that takes a `ValidateFn` which is a generic of `TData` and `TParentData`
- ```tsx
onChangeAsync?: ValidateAsyncFn<TData, TFormData>
onChangeAsync?: ValidateAsyncFn<TData, TParentData>
```
- An optional property similar to `onChange` but async validation
@@ -55,16 +55,16 @@ An object type representing the options for a field in a form.
- If set to a number larger than 0, will debounce the async validation event by this length of time in milliseconds
- ```tsx
onBlur?: ValidateFn<TData, TFormData>
onBlur?: ValidateFn<TData, TParentData>
```
- An optional function, when that run when subscribing to blur event of input
- ```tsx
onBlurAsync?: ValidateAsyncFn<TData, TFormData>
onBlurAsync?: ValidateAsyncFn<TData, TParentData>
```
- An optional function that takes a `ValidateFn` which is a generic of `TData` and `TFormData` happens async
- An optional function that takes a `ValidateFn` which is a generic of `TData` and `TParentData` happens async
```tsx
onBlurAsyncDebounceMs?: number
@@ -110,13 +110,13 @@ An object type representing the metadata of a field in a form.
```
- A flag indicating whether the field is currently being validated.
### `FieldApiOptions<TData, TFormData>`
### `FieldApiOptions<TData, TParentData>`
An object type representing the required options for the `FieldApi` class.
- Inherits from `FieldOptions<TData, TFormData>` with the `form` property set as required.
- Inherits from `FieldOptions<TData, TParentData>` with the `form` property set as required.
### `FieldApi<TData, TFormData>`
### `FieldApi<TData, TParentData>`
A class representing the API for managing a form field.
@@ -127,11 +127,11 @@ A class representing the API for managing a form field.
```
- A unique identifier for the field instance.
- ```tsx
form: FormApi<TFormData>
form: FormApi<TParentData>
```
- A reference to the form API instance.
- ```tsx
name: DeepKeys<TFormData>
name: DeepKeys<TParentData>
```
- The field name.
- ```tsx
@@ -143,14 +143,14 @@ A class representing the API for managing a form field.
```
- The current field state.
- ```tsx
options: RequiredByKey<FieldOptions<TData, TFormData>, 'validateOn'>
options: RequiredByKey<FieldOptions<TData, TParentData>, 'validateOn'>
```
- The field options with the `validateOn` property set as required.
#### Methods
- ```tsx
constructor(opts: FieldApiOptions<TData, TFormData>)
constructor(opts: FieldApiOptions<TData, TParentData>)
```
- Initializes a new `FieldApi` instance.
- ```tsx
@@ -162,7 +162,7 @@ A class representing the API for managing a form field.
```
- Updates the field store with the latest form state.
- ```tsx
update(opts: FieldApiOptions<TData, TFormData>): void
update(opts: FieldApiOptions<TData, TParentData>): void
```
- Updates the field instance with new options.
- ```tsx
@@ -202,7 +202,7 @@ A class representing the API for managing a form field.
```
- Swaps the values at the specified indices.
- ```tsx
getSubField<TName extends DeepKeys<TData>>(name: TName): FieldApi<DeepValue<TData, TName>, TFormData>
getSubField<TName extends DeepKeys<TData>>(name: TName): FieldApi<DeepValue<TData, TName>, TParentData>
```
- Gets a subfield instance.
- ```tsx

145
packages/form-core/src/FieldApi.ts
View File

@@ -4,59 +4,67 @@ import { Store } from '@tanstack/store'
export type ValidationCause = 'change' | 'blur' | 'submit' | 'mount'
type ValidateFn<TData, TFormData> = (
type ValidateFn<TData, TParentData, TName extends DeepKeys<TParentData>> = (
value: TData,
fieldApi: FieldApi<TData, TFormData>,
fieldApi: FieldApi<TData, TParentData, TName>,
) => ValidationError
type ValidateAsyncFn<TData, TFormData> = (
type ValidateAsyncFn<
TData,
TParentData,
TName extends DeepKeys<TParentData>,
> = (
value: TData,
fieldApi: FieldApi<TData, TFormData>,
fieldApi: FieldApi<TData, TParentData, TName>,
) => ValidationError | Promise<ValidationError>
export interface FieldOptions<
_TData,
TFormData,
TData,
TParentData,
/**
* This allows us to restrict the name to only be a valid field name while
* also assigning it to a generic
*/
TName = unknown extends TFormData ? string : DeepKeys<TFormData>,
TName extends DeepKeys<TParentData>,
/**
* If TData is unknown, we can use the TName generic to determine the type
*/
TData = unknown extends _TData ? DeepValue<TFormData, TName> : _TData,
TResolvedData = unknown extends TData ? DeepValue<TParentData, TName> : TData,
> {
name: TName
index?: TData extends any[] ? number : never
defaultValue?: TData
name: DeepKeys<TParentData>
index?: TResolvedData extends any[] ? number : never
defaultValue?: TResolvedData
asyncDebounceMs?: number
asyncAlways?: boolean
onMount?: (formApi: FieldApi<TData, TFormData>) => void
onChange?: ValidateFn<TData, TFormData>
onChangeAsync?: ValidateAsyncFn<TData, TFormData>
onMount?: (formApi: FieldApi<TResolvedData, TParentData, TName>) => void
onChange?: ValidateFn<TResolvedData, TParentData, TName>
onChangeAsync?: ValidateAsyncFn<TResolvedData, TParentData, TName>
onChangeAsyncDebounceMs?: number
onBlur?: ValidateFn<TData, TFormData>
onBlurAsync?: ValidateAsyncFn<TData, TFormData>
onBlur?: ValidateFn<TResolvedData, TParentData, TName>
onBlurAsync?: ValidateAsyncFn<TResolvedData, TParentData, TName>
onBlurAsyncDebounceMs?: number
onSubmitAsync?: ValidateAsyncFn<TData, TFormData>
onSubmitAsync?: ValidateAsyncFn<TResolvedData, TParentData, TName>
defaultMeta?: Partial<FieldMeta>
}
export interface FieldApiOptions<
_TData,
TFormData,
TData,
TParentData,
/**
* This allows us to restrict the name to only be a valid field name while
* also assigning it to a generic
*/
TName = unknown extends TFormData ? string : DeepKeys<TFormData>,
TName extends DeepKeys<TParentData>,
/**
* If TData is unknown, we can use the TName generic to determine the type
*/
TData = unknown extends _TData ? DeepValue<TFormData, TName> : _TData,
> extends FieldOptions<_TData, TFormData, TName, TData> {
form: FormApi<TFormData>
TResolvedData extends ResolveData<TData, TParentData, TName> = ResolveData<
TData,
TParentData,
TName
>,
> extends FieldOptions<TData, TParentData, TName, TResolvedData> {
form: FormApi<TParentData>
}
export type FieldMeta = {
@@ -74,43 +82,35 @@ export type FieldState<TData> = {
meta: FieldMeta
}
type GetTData<
TData,
TFormData,
Opts extends FieldApiOptions<TData, TFormData>,
> = Opts extends FieldApiOptions<
infer _TData,
infer _TFormData,
infer _TName,
infer RealTData
>
? RealTData
: never
export type ResolveData<TData, TParentData, TName> = unknown extends TData
? DeepValue<TParentData, TName>
: TData
export type ResolveName<TParentData> = unknown extends TParentData
? string
: DeepKeys<TParentData>
export class FieldApi<
_TData,
TFormData,
Opts extends FieldApiOptions<_TData, TFormData> = FieldApiOptions<
_TData,
TFormData
>,
TData extends GetTData<_TData, TFormData, Opts> = GetTData<
_TData,
TFormData,
Opts
TData,
TParentData,
TName extends DeepKeys<TParentData>,
TResolvedData extends ResolveData<TData, TParentData, TName> = ResolveData<
TData,
TParentData,
TName
>,
> {
uid: number
form: Opts['form']
name!: DeepKeys<TFormData>
options: Opts = {} as any
store!: Store<FieldState<TData>>
state!: FieldState<TData>
prevState!: FieldState<TData>
form: FieldApiOptions<TData, TParentData, TName, TResolvedData>['form']
name!: DeepKeys<TParentData>
options: FieldApiOptions<TData, TParentData, TName> = {} as any
store!: Store<FieldState<TResolvedData>>
state!: FieldState<TResolvedData>
prevState!: FieldState<TResolvedData>
constructor(
opts: Opts & {
form: FormApi<TFormData>
opts: FieldApiOptions<TData, TParentData, TName, TResolvedData> & {
form: FormApi<TParentData>
},
) {
this.form = opts.form
@@ -123,7 +123,7 @@ export class FieldApi<
this.name = opts.name as any
this.store = new Store<FieldState<TData>>(
this.store = new Store<FieldState<TResolvedData>>(
{
value: this.getValue(),
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -190,12 +190,12 @@ export class FieldApi<
}
}
update = (opts: FieldApiOptions<TData, TFormData>) => {
update = (opts: FieldApiOptions<TResolvedData, TParentData, TName>) => {
// Default Value
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (this.state.value === undefined) {
const formDefault =
opts.form.options.defaultValues?.[opts.name as keyof TFormData]
opts.form.options.defaultValues?.[opts.name as keyof TParentData]
if (opts.defaultValue !== undefined) {
this.setValue(opts.defaultValue as never)
@@ -212,12 +212,12 @@ export class FieldApi<
this.options = opts as never
}
getValue = (): TData => {
return this.form.getFieldValue(this.name)
getValue = (): TResolvedData => {
return this.form.getFieldValue(this.name) as any
}
setValue = (
updater: Updater<TData>,
updater: Updater<TResolvedData>,
options?: { touch?: boolean; notify?: boolean },
) => {
this.form.setFieldValue(this.name, updater as never, options)
@@ -241,12 +241,13 @@ export class FieldApi<
getInfo = () => this.form.getFieldInfo(this.name)
pushValue = (value: TData extends any[] ? TData[number] : never) =>
this.form.pushFieldValue(this.name, value as any)
pushValue = (
value: TResolvedData extends any[] ? TResolvedData[number] : never,
) => this.form.pushFieldValue(this.name, value as any)
insertValue = (
index: number,
value: TData extends any[] ? TData[number] : never,
value: TResolvedData extends any[] ? TResolvedData[number] : never,
) => this.form.insertFieldValue(this.name, index, value as any)
removeValue = (index: number) => this.form.removeFieldValue(this.name, index)
@@ -254,11 +255,21 @@ export class FieldApi<
swapValues = (aIndex: number, bIndex: number) =>
this.form.swapFieldValues(this.name, aIndex, bIndex)
getSubField = <TName extends DeepKeys<TData>>(name: TName) =>
new FieldApi<DeepValue<TData, TName>, TFormData>({
getSubField = <
TSubData,
TSubName extends DeepKeys<TResolvedData>,
TSubResolvedData extends ResolveData<
DeepValue<TResolvedData, TSubName>,
TResolvedData,
TSubName
>,
>(
name: TSubName,
): FieldApi<TSubData, TResolvedData, TSubName, TSubResolvedData> =>
new FieldApi({
name: `${this.name}.${name}` as never,
form: this.form,
})
}) as any
validateSync = (value = this.state.value, cause: ValidationCause) => {
const { onChange, onBlur } = this.options
@@ -387,7 +398,7 @@ export class FieldApi<
validate = (
cause: ValidationCause,
value?: TData,
value?: TResolvedData,
): ValidationError[] | Promise<ValidationError[]> => {
// If the field is pristine and validatePristine is false, do not validate
if (!this.state.meta.isTouched) return []
@@ -405,7 +416,7 @@ export class FieldApi<
return this.validateAsync(value, cause)
}
handleChange = (updater: Updater<TData>) => {
handleChange = (updater: Updater<TResolvedData>) => {
this.setValue(updater, { touch: true })
}

12
packages/form-core/src/FormApi.ts
View File

@@ -31,7 +31,7 @@ export type FormOptions<TData> = {
}
export type FieldInfo<TFormData> = {
instances: Record<string, FieldApi<any, TFormData>>
instances: Record<string, FieldApi<any, TFormData, any>>
} & ValidationMeta
export type ValidationMeta = {
@@ -106,7 +106,7 @@ export class FormApi<TFormData> {
constructor(opts?: FormOptions<TFormData>) {
this.store = new Store<FormState<TFormData>>(
getDefaultFormState({
...opts?.defaultState,
...(opts?.defaultState as any),
values: opts?.defaultValues ?? opts?.defaultState?.values,
isFormValid: true,
}),
@@ -174,7 +174,7 @@ export class FormApi<TFormData> {
getDefaultFormState(
Object.assign(
{},
this.state,
this.state as any,
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
shouldUpdateState ? options.defaultState : {},
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -194,7 +194,7 @@ export class FormApi<TFormData> {
reset = () =>
this.store.setState(() =>
getDefaultFormState({
...this.options.defaultState,
...(this.options.defaultState as any),
values: this.options.defaultValues ?? this.options.defaultState?.values,
}),
)
@@ -288,7 +288,9 @@ export class FormApi<TFormData> {
return this.state.fieldMeta[field]
}
getFieldInfo = <TField extends DeepKeys<TFormData>>(field: TField) => {
getFieldInfo = <TField extends DeepKeys<TFormData>>(
field: TField,
): FieldInfo<TFormData> => {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
return (this.fieldInfo[field] ||= {
instances: {},

6
packages/form-core/src/utils.ts
View File

@@ -133,16 +133,16 @@ type AllowedIndexes<
? AllowedIndexes<Tail, Keys | Tail['length']>
: Keys
export type DeepKeys<T, TDepth extends any[] = []> = TDepth['length'] extends 10
export type DeepKeys<T, TDepth extends any[] = []> = TDepth['length'] extends 5
? never
: unknown extends T
? keyof T
? string
: object extends T
? string
: T extends readonly any[] & IsTuple<T>
? AllowedIndexes<T> | DeepKeysPrefix<T, AllowedIndexes<T>, TDepth>
: T extends any[]
? DeepKeys<T[number]>
? DeepKeys<T[number], [...TDepth, any]>
: T extends Date
? never
: T extends object

2
packages/react-form/src/createFormFactory.ts
View File

@@ -6,7 +6,7 @@ import { useForm } from './useForm'
export type FormFactory<TFormData> = {
useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>
useField: UseField<TFormData>
Field: FieldComponent<TFormData, TFormData>
Field: FieldComponent<TFormData>
}
export function createFormFactory<TFormData>(

6
packages/react-form/src/types.ts
View File

@@ -2,8 +2,8 @@ import type { FieldOptions, DeepKeys } from '@tanstack/form-core'
export type UseFieldOptions<
TData,
TFormData,
TName = unknown extends TFormData ? string : DeepKeys<TFormData>,
> = FieldOptions<TData, TFormData, TName> & {
TParentData,
TName extends DeepKeys<TParentData>,
> = FieldOptions<TData, TParentData, TName> & {
mode?: 'value' | 'array'
}

82
packages/react-form/src/useField.tsx
View File

@@ -3,44 +3,51 @@ import { useStore } from '@tanstack/react-store'
import type {
DeepKeys,
DeepValue,
FieldApiOptions,
Narrow,
ResolveData,
} from '@tanstack/form-core'
import { FieldApi, type FormApi, functionalUpdate } from '@tanstack/form-core'
import { FieldApi, functionalUpdate } from '@tanstack/form-core'
import { useFormContext, formContext } from './formContext'
import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect'
import type { UseFieldOptions } from './types'
declare module '@tanstack/form-core' {
// eslint-disable-next-line no-shadow
interface FieldApi<_TData, TFormData, Opts, TData> {
Field: FieldComponent<TData, TFormData>
interface FieldApi<
TData,
TParentData,
TName extends DeepKeys<TParentData>,
TResolvedData extends ResolveData<TData, TParentData, TName> = ResolveData<
TData,
TParentData,
TName
>,
> {
Field: FieldComponent<TData>
}
}
export type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(
opts?: { name: Narrow<TField> } & UseFieldOptions<
DeepValue<TFormData, TField>,
TFormData
export type UseField<TParentData> = <TName extends DeepKeys<TParentData>>(
opts?: { name: Narrow<TName> } & UseFieldOptions<
DeepValue<TParentData, TName>,
TParentData,
TName
>,
) => FieldApi<DeepValue<TFormData, TField>, TFormData>
) => FieldApi<DeepValue<TParentData, TName>, TParentData, TName>
export function useField<
TData,
TFormData,
TName extends unknown extends TFormData
? string
: DeepKeys<TFormData> = unknown extends TFormData
? string
: DeepKeys<TFormData>,
TParentData,
TName extends DeepKeys<TParentData>,
>(
opts: UseFieldOptions<TData, TFormData, TName>,
opts: UseFieldOptions<TData, TParentData, TName>,
): FieldApi<
TData,
TFormData,
Omit<typeof opts, 'onMount'> & {
form: FormApi<TFormData>
}
TParentData,
TName
// Omit<typeof opts, 'onMount'> & {
// form: FormApi<TParentData>
// }
> {
// Get the form API either manually or from context
const { formApi, parentFieldName } = useFormContext()
@@ -88,17 +95,13 @@ export function useField<
}
type FieldComponentProps<
TData,
TParentData,
TFormData,
TField,
TName extends unknown extends TFormData ? string : DeepKeys<TFormData>,
TName extends DeepKeys<TParentData>,
TResolvedData extends ResolveData<TData, TParentData, TName>,
> = {
children: (
fieldApi: FieldApi<
TField,
TFormData,
FieldApiOptions<TField, TFormData, TName>
>,
fieldApi: FieldApi<TData, TParentData, TName, TResolvedData>,
) => any
} & (TParentData extends any[]
? {
@@ -109,24 +112,27 @@ type FieldComponentProps<
name: TName
index?: never
}) &
Omit<UseFieldOptions<TField, TFormData, TName>, 'name' | 'index'>
Omit<UseFieldOptions<TData, TParentData, TName>, 'name' | 'index'>
export type FieldComponent<TParentData, TFormData> = <
// Type of the field
TField,
// Name of the field
TName extends unknown extends TFormData ? string : DeepKeys<TFormData>,
export type FieldComponent<TParentData> = <
TData,
TName extends DeepKeys<TParentData>,
TResolvedData extends ResolveData<TData, TParentData, TName> = ResolveData<
TData,
TParentData,
TName
>,
>({
children,
...fieldOptions
}: FieldComponentProps<TParentData, TFormData, TField, TName>) => any
}: FieldComponentProps<TData, TParentData, TName, TResolvedData>) => any
export function Field<TData, TFormData>({
export function Field<TData, TParentData, TName extends DeepKeys<TParentData>>({
children,
...fieldOptions
}: {
children: (fieldApi: FieldApi<TData, TFormData>) => any
} & UseFieldOptions<TData, TFormData>) {
children: (fieldApi: FieldApi<TData, TParentData, TName>) => any
} & UseFieldOptions<TData, TParentData, TName>) {
const fieldApi = useField(fieldOptions as any)
return (

2
packages/react-form/src/useForm.tsx
View File

@@ -11,7 +11,7 @@ declare module '@tanstack/form-core' {
// eslint-disable-next-line no-shadow
interface FormApi<TFormData> {
Provider: (props: { children: any }) => any
Field: FieldComponent<TFormData, TFormData>
Field: FieldComponent<TFormData>
useField: UseField<TFormData>
useStore: <TSelected = NoInfer<FormState<TFormData>>>(
selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,

2
packages/vue-form/src/createFormFactory.ts
View File

@@ -6,7 +6,7 @@ import { useForm } from './useForm'
export type FormFactory<TFormData> = {
useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>
useField: UseField<TFormData>
Field: FieldComponent<TFormData, TFormData>
Field: FieldComponent<TFormData>
}
export function createFormFactory<TFormData>(

6
packages/vue-form/src/types.ts
View File

@@ -2,8 +2,8 @@ import type { FieldOptions, DeepKeys } from '@tanstack/form-core'
export type UseFieldOptions<
TData,
TFormData,
TName = unknown extends TFormData ? string : DeepKeys<TFormData>,
> = FieldOptions<TData, TFormData, TName> & {
TParentData,
TName extends DeepKeys<TParentData>,
> = FieldOptions<TData, TParentData, TName> & {
mode?: 'value' | 'array'
}

113
packages/vue-form/src/useField.tsx
View File

@@ -1,9 +1,10 @@
import {
FieldApi,
type FieldApiOptions,
type FormApi,
import { FieldApi } from '@tanstack/form-core'
import type {
DeepKeys,
DeepValue,
Narrow,
ResolveData,
} from '@tanstack/form-core'
import type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core'
import { useStore } from '@tanstack/vue-store'
import { defineComponent, onMounted, onUnmounted, watch } from 'vue-demi'
import type { SlotsType, SetupContext, Ref } from 'vue-demi'
@@ -12,44 +13,52 @@ import type { UseFieldOptions } from './types'
declare module '@tanstack/form-core' {
// eslint-disable-next-line no-shadow
interface FieldApi<_TData, TFormData, Opts, TData> {
Field: FieldComponent<TFormData, TData>
interface FieldApi<
TData,
TParentData,
TName extends DeepKeys<TParentData>,
TResolvedData extends ResolveData<TData, TParentData, TName> = ResolveData<
TData,
TParentData,
TName
>,
> {
Field: FieldComponent<TResolvedData>
}
}
export type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(
opts?: { name: Narrow<TField> } & UseFieldOptions<
DeepValue<TFormData, TField>,
TFormData
export type UseField<TParentData> = <TName extends DeepKeys<TParentData>>(
opts?: { name: Narrow<TName> } & UseFieldOptions<
DeepValue<TParentData, TName>,
TParentData,
TName
>,
) => FieldApi<DeepValue<TFormData, TField>, TFormData>
) => FieldApi<DeepValue<TParentData, TName>, TParentData, TName>
export function useField<
TData,
TFormData,
TName extends unknown extends TFormData
? string
: DeepKeys<TFormData> = unknown extends TFormData
? string
: DeepKeys<TFormData>,
TParentData,
TName extends DeepKeys<TParentData>,
>(
opts: UseFieldOptions<TData, TFormData, TName>,
opts: UseFieldOptions<TData, TParentData, TName>,
): {
api: FieldApi<
TData,
TFormData,
Omit<typeof opts, 'onMount'> & {
form: FormApi<TFormData>
}
TParentData,
TName
// Omit<typeof opts, 'onMount'> & {
// form: FormApi<TParentData>
// }
>
state: Readonly<
Ref<
FieldApi<
TData,
TFormData,
Omit<typeof opts, 'onMount'> & {
form: FormApi<TFormData>
}
TParentData,
TName
// Omit<typeof opts, 'onMount'> & {
// form: FormApi<TParentData>
// }
>['state']
>
>
@@ -91,17 +100,16 @@ export function useField<
return { api: fieldApi, state: fieldState } as never
}
export type FieldValue<TFormData, TField> = TFormData extends any[]
? unknown extends TField
? TFormData[number]
: DeepValue<TFormData[number], TField>
: DeepValue<TFormData, TField>
export type FieldValue<TParentData, TName> = TParentData extends any[]
? unknown extends TName
? TParentData[number]
: DeepValue<TParentData[number], TName>
: DeepValue<TParentData, TName>
type FieldComponentProps<
TData,
TParentData,
TFormData,
TField,
TName extends unknown extends TFormData ? string : DeepKeys<TFormData>,
TName extends DeepKeys<TParentData>,
> = (TParentData extends any[]
? {
name?: TName
@@ -111,40 +119,35 @@ type FieldComponentProps<
name: TName
index?: never
}) &
Omit<UseFieldOptions<TField, TFormData, TName>, 'name' | 'index'>
Omit<UseFieldOptions<TData, TParentData, TName>, 'name' | 'index'>
export type FieldComponent<TParentData, TFormData> = <
// Type of the field
TField,
// Name of the field
TName extends unknown extends TFormData ? string : DeepKeys<TFormData>,
export type FieldComponent<TParentData> = <
TData,
TName extends DeepKeys<TParentData>,
TResolvedData extends ResolveData<TData, TParentData, TName> = ResolveData<
TData,
TParentData,
TName
>,
>(
fieldOptions: FieldComponentProps<TParentData, TFormData, TField, TName>,
fieldOptions: FieldComponentProps<TData, TParentData, TName>,
context: SetupContext<
{},
SlotsType<{
default: {
field: FieldApi<
TField,
TFormData,
FieldApiOptions<TField, TFormData, TName>
>
state: FieldApi<
TField,
TFormData,
FieldApiOptions<TField, TFormData, TName>
>['state']
field: FieldApi<TData, TParentData, TName, TResolvedData>
state: FieldApi<TData, TParentData, TName, TResolvedData>['state']
}
}>
>,
) => any
export const Field = defineComponent(
<TData, TFormData>(
fieldOptions: UseFieldOptions<TData, TFormData>,
<TData, TParentData, TName extends DeepKeys<TParentData>>(
fieldOptions: UseFieldOptions<TData, TParentData, TName>,
context: SetupContext,
) => {
const fieldApi = useField({ ...fieldOptions, ...context.attrs })
const fieldApi = useField({ ...fieldOptions, ...context.attrs } as any)
provideFormContext({
formApi: fieldApi.api.form,

2
packages/vue-form/src/useForm.tsx
View File

@@ -14,7 +14,7 @@ declare module '@tanstack/form-core' {
interface FormApi<TFormData> {
Provider: (props: Record<string, any> & {}) => any
provideFormContext: () => void
Field: FieldComponent<TFormData, TFormData>
Field: FieldComponent<TFormData>
useField: UseField<TFormData>
useStore: <TSelected = NoInfer<FormState<TFormData>>>(
selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,