feat(volar/jsx-directive): support generic component (#673)

* feat(volar/jsx-directive): support generic component * chore: add changeset
vue-macros · May 4, 2024 · 3227507 · 3227507
1 parent b868726
commit 3227507
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/.changeset/brown-clouds-check.md b/.changeset/brown-clouds-check.md
@@ -0,0 +1,5 @@
+---
+"@vue-macros/volar": patch
+---
+
+support generic component for jsx-direcitve
diff --git a/packages/volar/src/jsx-directive/index.ts b/packages/volar/src/jsx-directive/index.ts
@@ -188,7 +188,7 @@ function transformCtx(
  index: number,
  options: TransformOptions,
 ) {
- const { ts, codes } = options
+ const { ts, codes, sfc } = options
 
  const tag = ts.isJsxSelfClosingElement(node)
  ? node
@@ -219,8 +219,16 @@ function transformCtx(
 `,
  )
  }
- codes.push(
- `const ${ctxName} = __VLS_getFunctionalComponentCtx(${tagName}, __VLS_asFunctionalComponent(${tagName})({${props}}));\n`,
- )
+
+ const code = `const ${ctxName} = __VLS_getFunctionalComponentCtx(${tagName}, __VLS_asFunctionalComponent(${tagName})({${props}}));\n`
+ if (sfc.scriptSetup?.generic) {
+ const index = codes.findIndex((code) =>
+ code.includes('__VLS_setup = (async () => {'),
+ )
+ codes.splice(index + 1, 0, code)
+ } else {
+ codes.push(code)
+ }
+
  return ctxName
 }
diff --git a/playground/vue3/src/examples/jsx-directive/v-slot/index.vue b/playground/vue3/src/examples/jsx-directive/v-slot/index.vue
@@ -1,4 +1,4 @@
-<script setup lang="tsx">
+<script setup lang="tsx" generic="T">
 import Child from './child.vue'
 import type { FunctionalComponent } from 'vue'