v6: replacing useControlField Typescript problem

[ttiurani]

Hi!

First, thank you for a great library! I've been using v5 successfully to create an internal library module of different form components, and things have worked well.

I'm now trying to migrate the internal library to v6 but am struggling with moving away from useControlField when I don't know the type of the default values.

In the below example the lines rvf.value and rvf.setValue fail in Typescript with:

error TS2345: Argument of type 'string' is not assignable to parameter of type 'StringPaths<PathsOfObject<FormInputData, [], any>, true>'.

What should I put as type there to the name parameter in the TODO? I could not at least find that rvf would export StringPaths or PathsOfObject out of the interface so I can't use that type for that reason.

import { useField } from "@rvf/remix";
import { FieldValues } from "@rvf/core";
import { FormApi } from "@rvf/react";

type RvfDebugProps<FormInputData extends FieldValues> = {
    rvf: FormApi<FormInputData>;
    name: string; // TODO: what should this be? 
};

export const RvfDebug = <FormInputData extends FieldValues>({
    rvf,
    name,
}: RvfDebugProps<FormInputData>) => {
    // // In v5 I did this successfully:
    // const { error, validate } = useField(name);
    // const [value, setValue] = useControlField<string | null>(name, initialContent || "");

    const { error, validate } = useField(name);
    const value = rvf.value(name);
    return (
        <div>
            <MyComponent
                onContentUpdate={(_, updatedContent) => {
                    const cleanedContent = myClean(updatedContent);
                    if (cleanedContent !== value) {
                        rvf.setValue(name, cleanedContent);
                        validate();
                    }
                }}
            />
        </div>
    );
};

Edit. I got it to compile with:

name: Parameters<FormApi<FormInputData>["value"]>[0];

and

rvf.setValue(
    name,
    cleanedContent as ReturnType<FormApi<FormInputData>["value"]>,
);

but that's quite hacky, plus I'd really like to say "name is the key of a field value fo type string" so I wouldn't have to use as there and would get type safety. Is that possible?

[swersk]

+1 on this issue!

[airjp73]

Hi! The best way to create abstractions in v6 is to use the scoping API. You could write your example like this:

// You only need to depend directly on `@rvf/remix`
import { useField, FormScope } from "@rvf/remix";

// No "extends" because we can scope to anything
type RvfDebugProps<FormInputData> = {
  scope: FormScope<FormInputData>;
};

export const RvfDebug = <FormInputData>({
  scope,
}: RvfDebugProps<FormInputData>) => {
  const field = useField(scope);

  return (
    <div>
      <MyComponent
        onContentUpdate={(_, updatedContent) => {
          const cleanedContent = myClean(updatedContent);
          if (cleanedContent !== value) {
            // can use methods directly off of `field` -- don't even need the name
            field.setValue(cleanedContent);
            field.validate();
          }
        }}
      />
    </div>
  );
};

You would use it like this:

<RvfDebug scope={form.scope("myField")} />

Also, given that this component is named RvfDebug, I'm assuming this isn't actually the field component itself -- just a helper util? In the actual controlled component, you'll want to make sure you're passing a ref (more info in the docs).

[ttiurani]

Thank you for the response, I was able to greatly simplify the typings with FormScope!

I removed the generics from the input and made the scope like:

type RvfDebugProps = {
    scope: FormScope<string | undefined | null>;
}

and then get the value out like this:

const field = useField(scope);
const value: string | undefined | null = field.value();

and use it like this:

const cleanedContent = myClean(updatedContent);
if (cleanedContent !== value) {
    field.setValue(cleanedContent);
    field.validate();
}

In the real implementation I also try to use the ref like this (hope it's correct?):

<input
    type="hidden"
    name={field.name()}
    key={value}
    value={value || ""}
    ref={field.refs.controlled}
/>