types(defineComponent): Support for GlobalComponents, typed Directives and respect expose on defineComponent

[pikax]

fix #3367

Changes

• Support for typed Components - to allow extraction of the components available
• Support for typed Directives and ComponentCustomDirectives (aka global directives)
• Initial support for typed exposed - this is a bit different from the actual implementation, this types will allow the exposed vue internal component types
• Improvements on Directive type, allowing to specify the modifiers and the expected argument.

Directive usage

Now Directives will hold more types to help the extensions:

export type Directive<
  HostElement = any,  // host Element type, eg: `HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement`
  Value = any, // value typed, eg: `string` or `number`
  Modifiers extends string = string, // possible modifiers, eg: `'trim' | 'number' | 'lazy'`
  Arg extends string = string, // possible `arg`, eg: `string` or `'passive' | 'other'`
> =
 // implementation 
  | ObjectDirective<HostElement, Value, Arg, Modifiers> 
  | FunctionDirective<HostElement, Value, Arg, Modifiers>
  
  
// vmodel type implementation
Directive<HTMLInputElement | HTMLTextAreaElement, any, 'trim' | 'number' | 'lazy'> 

[johnsoncodehk]

Thanks for this update, custom directives IntelliSense and Type-Checking is coming!

We also need ComponentCustomComponents (global components). Similar to JSX.IntrinsicElements but actually it's use for handle different problem.

[HcySunYang]

We also need ComponentCustomComponents (global components). Similar to JSX.IntrinsicElements but actually it's use for handle different problem.

@johnsoncodehk I think this is worth putting in a new issue for tracking, with as detailed information as possible. 😁

Edit: After reviewing the code, I think it can be implemented in this PR if possible

[pikax]

We also need ComponentCustomComponents (global components).

Maybe a better name would be good, any suggestions?

[HcySunYang]

GlobalComponents and GlobalDirectives?

[johnsoncodehk]

GlobalComponents and GlobalDirectives?

Look good, but inconsistent...

declare module 'vue' {
  interface ComponentCustomOptions { }
  interface ComponentCustomProperties { }
  interface GlobalComponents { }
  interface GlobalDirectives { }
}

[pikax]

Look good, but inconsistent...

It looks inconsistent but they mean different things

• ComponentCustomOptions : Component custom options when you defineComponent, eg: onBeforeRouteUpdate
• ComponentCustomProperties : Custom vm properties available on the componentInstance, eg: $router
• GlobalComponents : Components added to the app/global, available on every component (render), eg: router-view
• GlobalDirectives : Directives defined to the app/global, available on every component (render), eg: v-tooltip

As you can see they usually mean different things, altho the Components/Directives are used on the components, they are not enhancing the component interaction, but to provide enhancement to the render.

I mean this is my logic on the naming, might be incorrect 😄

Having ComponentCustomComponents sounds a bit bad 😆

[HcySunYang]

yeah, they are different.

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	93.9 kB (+3.24 kB)	35.5 kB (+966 B)	32 kB (+877 B)
vue.global.prod.js	151 kB (+3.24 kB)	54.8 kB (+999 B)	48.9 kB (+809 B)

Usages

Name	Size	Gzip	Brotli
createApp	53.9 kB (+3.16 kB)	20.9 kB (+1.01 kB)	18.9 kB (+838 B)
createSSRApp	57.2 kB (+3.16 kB)	22.2 kB (+983 B)	20.1 kB (+802 B)
defineCustomElement	56.2 kB (+3.16 kB)	21.6 kB (+999 B)	19.6 kB (+802 B)
overall	67.7 kB (+3.21 kB)	25.8 kB (+958 B)	23.4 kB (+854 B)

[pikax]

/ecosystem-ci run

[matthew-dean]

Can this be merged?

[matthew-dean]

Note, one thing I figured out you can do is simply use TypeScript's satisfies to get type-checking for custom directives. For example:

<div 
  v-popover="{
    html: true,
    title: vm.tooltipTitle(),
    placement: 'right',
    trigger: 'click',
    content: vm.tooltipContent()
    } satisfies PopoverOptions"
></div>

Volar's code syntax coloring of Vue files completely borks if you use satisfies in that way, but it looks like the technique itself succeeds.

It would be great if there was an ESLint plugin then to force / enforce the use of satisfies for any custom directive in the meantime (I guess from the eslint-plugin-vue folks) but that's a separate issue.

[pikax]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
language-tools	❌ failure	❌ failure
nuxt	✅ success	❌ failure
pinia	✅ success	✅ success
primevue	✅ success	✅ success
quasar	✅ success	✅ success
radix-vue	✅ success	✅ success
router	✅ success	✅ success
test-utils	✅ success	✅ success
vant	❌ failure	✅ success
vite-plugin-vue	✅ success	✅ success
vitepress	✅ success	✅ success
vue-i18n	✅ success	✅ success
vue-macros	✅ success	✅ success
vuetify	❌ failure	❌ failure
vueuse	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success