Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slot typings #3534

Closed
cexbrayat opened this issue Oct 15, 2021 · 2 comments · Fixed by #3537
Closed

Slot typings #3534

cexbrayat opened this issue Oct 15, 2021 · 2 comments · Fixed by #3537
Labels
✨ enhancement a "nice to have" feature 👕 TypeScript TypeScript typings issue

Comments

@cexbrayat
Copy link
Contributor

Is your feature request related to a problem? Please describe.

Volar is capable of checking the slot props type and can assert if the template of a component use them properly.
Until now, you had to provide these types manually, with something like this for vee-validate:

import { Field, Form, useField, useForm } from 'vee-validate';
import type { UnwrapRef } from 'vue';

declare module '@vue/runtime-core' {
  interface GlobalComponents {
    Field: typeof Field & {
      __VLS_slots: {
        default: UnwrapRef<ReturnType<typeof useField>> & { field: any };
      };
    };
    Form: typeof Form & {
      __VLS_slots: {
        default: UnwrapRef<ReturnType<typeof useForm>>;
      };
    };
  }
}

This works great, allowing to catch mistakes in a template:

<!-- metas instead of meta -->
<Field name="login" rules="required|min:3" v-slot="{ field, metas }">

is caught by Volar:

$ vue-tsc --noEmit
src/views/Register.vue:11:69 - error TS2339: Property 'metas' does not exist on type '{ label?: string | undefined; meta: { touched: boolean; dirty: boolean; valid: boolean; validated: boolean; pending: boolean; initialValue?: unknown; }; name: string; type?: string | undefined; value: unknown; ... 14 more ...; setValue: (value: unknown) => void; } & { ...; }'.

11         <Field name="login" rules="required|min:3" v-slot="{ field, metas }">
                                                                       ~~~~~

Found 1 error.

Describe the solution you'd like

Volar now can pick pick up $slots definition if provided since https://github.com/johnsoncodehk/volar/blob/master/CHANGELOG.md#02728

vue-router added them in its latest release (see vuejs/router@1b28dd4), allowing to simplify the declaration of the Router components from:

  interface GlobalComponents {
    RouterLink: typeof RouterLink & {
      __VLS_slots: {
        default: UnwrapRef<ReturnType<typeof useLink>>;
      };
    };
    RouterView: typeof RouterView & {
      __VLS_slots: {
        default: {
          Component: VNode;
          route: RouteLocationNormalized & { href: string };
        };
      };
    };

to

  interface GlobalComponents {
    RouterLink: typeof RouterLink;
    RouterView: typeof RouterView;

It would be awesome to provide slots types out of the box for vee-validate Form and Field, allowing developers to remove the custom declaration from their applications.

Describe alternatives you've considered
It's possible to manually declare the slot types, but it is cumbersome to do it in every application, and error-prone.

@logaretm
Copy link
Owner

Thanks for bringing this up, I was waiting for volar to standardized this but I guess I've forgotten about it.

I think the types maybe a little bit strict at first, LMK what you think with 4.5.3.

@cexbrayat
Copy link
Contributor Author

That works perfectly, thanks @logaretm !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ enhancement a "nice to have" feature 👕 TypeScript TypeScript typings issue
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants