V8: Replacing the Path type

[felixschorer]

The Problem

Path can produce very large union types for nested form data.

TypeScript Performance

See #7290.

Developer Experience

When entering a path, IntelliSense will display the suggested paths in alphabetical order. That results in "deeper" paths being placed above the immediately following paths.

See this TS Playground.

When entering "foo" the following suggestions will be shown.

Notice, that "foo.foo" is only the 5th suggestion, and that completely unrelated paths are suggested.

Proposed Solution

LazyPath (Function Arguments)

In places where Path is used to describe a function argument, one can use a type which validates the string using template literal type inference.

This has been implemented in this Code Sandbox.

- interface SomeComponentProps<T extends FieldValues, P extends Path<T>> {
+ interface SomeComponentProps<T extends FieldValues, P extends string> { 
    control: Control<T>
-   name: P
+   name: LazyPath<T, P>
  }

- function SomeComponent<T extends FieldValues, P extends Path<T>>({ 
+ function SomeComponent<T extends FieldValues, P extends string>({
    control, 
    name,
  }: SomeComponentProps<T, P>) {
    const { field } = useController({ control, name })
    // ...
  }

Other Use Cases

Path can be used outside of function arguments. However, LazyPath can only be used for function arguments.
For those cases something like #7354 could be used.

  interface TextFieldDescriptor<T extends FieldValues> {
    type: "text"
    label: string
-   path: Path<T>
+   path: PathWithMeta<T, string>
  }

  interface NumberFieldDescriptor<T extends FieldValues> {
    type: "number"
    label: string
-   path: Path<T>
+   path: PathWithMeta<T, number>
  }

  type FormDescriptor<T extends FieldValues> = Array<
    TextFieldDescriptor<T> | NumberFieldDescriptor<T>
  >

  interface FooBar {
    foo: string
    bar: number
  }

  const fooBarForm: FormDescriptor<FooBar> = [
-   { type: 'text', label: 'Foo', path: 'foo' },
-   { type: 'number', label: 'Bar', path: 'bar' },
+   { type: 'text', label: 'Foo', path: of('foo') },
+   { type: 'number', label: 'Bar', path: of('bar') },
  ]

cc @barrymay @kotarella1110 @jorisre

[bluebill1049]

I would recommend exposing FieldPath still (as alias perhaps), as this will be more consistent for exposing type and without confusing with some user's generic type.

https://react-hook-form.com/ts

[felixschorer]

We should consider not exporting Path then. Currently Path and FieldPath is exported.

[bluebill1049]

If it's possible, I think it's better to keep those type names relevant to (hook) form.

[salamaashoush]

I am currently relying on Path, PathValue, Please is it possible to keep those generic types exposed also, and I don't mind also if it is the new lazy variant, I use them to build similar DX as RHF FieldPath, Thanks

[felixschorer]

@salamaashoush
The current state is that Path and PathValue are no longer exposed. Instead there's now FieldPath, Auto.FieldPath and FieldPathValue (+ a few variations of these). Despite the name, the generics are no longer constrained to FieldValues.

• FieldPath requires you to call to of, e.g. of('some.path.to.a.value'). (formerly PathWithMeta)
• Auto.FieldPath can only be used on function arguments. (formerly LazyPath)
• FieldPathValue works with either of these.

If you need the old behavior where Path produces an exhaustive list of all paths, then you're currently out of luck.

We've tried to fix most of the issues with the Path type to keep it around, but every time we tried we ran into TS limitations.

[salamaashoush]

@felixschorer Awesome that's great, I don't need the old behavior I just need the type itself to be exposed without coupling with RHF meta, thanks for clarifying