feat(volar/jsx-directive): support function component in v-slot (#499)

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>

.changeset/ninety-impalas-destroy.md

@@ -0,0 +1,5 @@
+---
+'@vue-macros/volar': patch
+---
+
+support function component in v-slot

packages/volar/src/jsx-directive.ts

@@ -175,6 +175,13 @@ function transformVSlot({
 }: TransformOptions & {
   nodes: import('typescript/lib/tsserverlibrary').JsxElement[]
 }) {
+  if (nodes.length === 0) return
+  codes.push(`type __VLS_getSlots<T> = T extends new (...args: any) => any
+  ? InstanceType<T>['$slots']
+  : T extends (props: any, ctx: infer Ctx) => any
+  ? Ctx['slots']
+  : any`)
+
   nodes.forEach((node) => {
     if (!ts.isIdentifier(node.openingElement.tagName)) return
 
@@ -296,7 +303,7 @@ function transformVSlot({
           '</>,',
         ]
       ),
-      `} as InstanceType<typeof ${node.openingElement.tagName.escapedText}>['$slots'] }`,
+      `} as __VLS_getSlots<typeof ${node.openingElement.tagName.escapedText}> }`,
     ] as Segment<FileRangeCapabilities>[]
 
     if (attribute) {

playground/vue3/src/examples/jsx-directive/v-slot/index.vue

@@ -1,10 +1,23 @@
 <script setup lang="tsx">
+import { type FunctionalComponent } from 'vue'
 import Child from './child.vue'
 
+const Comp: FunctionalComponent<
+  {},
+  {},
+  {
+    default: (scope: { foo: string }) => any
+  }
+> = (props, { slots }) => {
+  return <slots.default foo="foo"></slots.default>
+}
+
 defineRender(() => (
   <fieldset>
     <legend>v-slot</legend>
 
+    <Comp v-slot={{ foo }}>{''}</Comp>
+
     <Child>
       <div>default: begin</div>