feat: Support generic typed template slots for RFC 436

[johnsoncodehk]

Update codegen for script setup to change export component type from DefineComponent to functional component.

For following SFC code:

<template>
  <slot name="default" :test="props.msg"></slot>
</template>

<script lang="ts" setup generic="T">
const props = defineProps<{ msg: T }>()
</script>

Output type:

<T>(__props: { msg: T }): {
	props: typeof __props,
	children: { default(_: { test: T }): any },
}

vue-component-meta tests is broken because we not yet implement type extract for functional component in vue-component-meta.

[StepanMynarik]

Updated to 1.0.4 and the thing works PERFECTLY. Generic list components, multiselects etc. - all will be cleaner now, more safe. This is lovely.
Well done!

[StepanMynarik]

I noticed one issue that stems from this I believe.

In the following code, 'typeof BButton' is highlighted with error: Type '(__VLS_props: { text: string; preset?: Preset | undefined; size?: Size | undefined; disabled?: boolean | undefined; active?: boolean | undefined; }) => Omit<Element, "props" | "children"> & Omit<...> & { ...; }' provides no match for the signature 'new (...args: any): any'.

const referenceRef = $ref<InstanceType<typeof BButton> | null>(null);

[johnsoncodehk]

@StepanMynarik You should use ReturnType<typeof BButton> instead of InstanceType<typeof BButton> for components gen with experimentalRfc436 enabled.

[johanninos]

@StepanMynarik You should use ReturnType<typeof BButton> instead of InstanceType<typeof BButton> for components gen with experimentalRfc436 enabled.

InstanceType<typeof BButton<T>> can pass generic.
but ReturnType<typeof BButton<T>> wasn't supported untill typescript 4.7.0

but vue has issue with this ts new feature

vuejs/core#7161

how to deal with that?

[johanninos]

  const F = () => BButton <string>('');
  const btnRef = ref<ReturnType<typeof F> | null>(null);

this works, but a bit wasteful

[jaulz]

Does this actually also work with defineComponent?