`label` missing from TypeScript definition about formkit

[justin-schroeder]

This is gonna be an interesting one that I've been pondering for a while. FormKit does not always use props for its props 😂 some of the "props" are actually "attrs" that are picked up and treated as props (inheritAttrs is false). I haven’t found a way (yet) to give type annotations for attributes in Vue 3. If you know of a way, i’m all ears.

[hisuwh]

Interesting. My experimentation with FormKit is also my first-time with vue 3.

I'll try and do some investigation. There are other typing improvements I would like to see, like strongly typed type and perhaps then using a discriminated union on this to restrict the other props. Would obviously need to consider how this would work with custom components though.

[justin-schroeder]

2 things:

1. I've been able to add support for these "synthetic" props without being forced to define them all as actual props (to keep them out of the JS and only in the d.ts file) (https://github.com/formkit/formkit/blob/release/beta.1/packages/vue/src/props.ts). This isn’t quite as robust as it will need to be in order to handle custom inputs, but Vue uses a type internally for its props instead of an interface, so I dont currently see any obvious way to change those props apparent from explicit declarations like this.
2. I too would like to see strong types for the value — although I think this is going to be really challenging because values are determined at runtime. Inputs can output any value type, some are arrays, some objects, some strings — and these value types can be determined at runtime. That said I think we could "force" the typings to be strong by introducing something like const FormKitText = defineFormKit<TypingsHere>() where FormKitText is then the strictly typed component. This definitely removes some of the convenience of FormKit but it might be required in order to get strongly typed values.

[hisuwh]

Are you suggesting we would have to in our files call that defineFormKit function? Do you not think a discriminated union would work? I.e. (and sorry if you already know what this is):

type FormKitText = {
  type: "text",
  value: string
};

type FormKitNumber = {
  type: "number",
  value: number
};

type FormKitForm = {
  type: "form",
  submitLabel: string,
  formClass: string,
};

type FormKit = FormKitText | FormKitNumber | FormKitForm;

Other props/types omitted for brevity.

[justin-schroeder]

In reference to the defineFormKit idea, we would call that internally for all the input types that we export from the package, but for end users wanting to create custom inputs it would give them an easy way to have type safety.

Fundamentally a discriminated union is exactly what we need, unfortunately I'm not sure we're gonna get away with using it as the prop typing for vue's defineComponent but I've only started experimenting with it.

[huzaifahj]

I'm getting this error and wondering if related to this issue?

Property 'value' does not exist on type 'IntrinsicAttributes & Partial<{ config: Record<string, any>; plugins: FormKitPlugin[]; type: string | FormKitTypeDefinition; errors: string[]; inputErrors: Record<...>; sectionsSchema: Record<...>; }> & Omit<...>'.ts(2322)

<FormKit
              type="text"
              label="Display name"
              :value="displayName"
            />

[justin-schroeder]

Not related but that error doesn't look right to me. I'm guessing there's some kind of implementation issue. Happy to check it out if you provide a reproduction