From 4ad70f574e68831925334695ec804811ff6d05eb Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <32807958+zhiyuanzmj@users.noreply.github.com>
Date: Sun, 7 Apr 2024 22:32:44 +0800
Subject: [PATCH] feat(volar/jsx-directive): support generic component  (#658)

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

* chore: add changeset

* fix: format
---
 .changeset/polite-paws-doubt.md               |   5 +
 .../tests/__snapshots__/v-on.test.ts.snap     |  28 +++--
 .../tests/__snapshots__/v-slot.test.ts.snap   |  14 ++-
 .../tests/fixtures/v-on/child.vue             |  10 +-
 .../tests/fixtures/v-on/index.vue             |   4 +-
 .../tests/fixtures/v-slot/child.vue           |   8 +-
 .../tests/fixtures/v-slot/index.vue           |   7 +-
 packages/volar/src/common.ts                  |  61 ----------
 packages/volar/src/jsx-directive/index.ts     | 112 +++++++++++++-----
 packages/volar/src/jsx-directive/v-bind.ts    |  13 +-
 packages/volar/src/jsx-directive/v-for.ts     |  17 ++-
 packages/volar/src/jsx-directive/v-if.ts      |  10 +-
 packages/volar/src/jsx-directive/v-model.ts   |  53 ++++++---
 packages/volar/src/jsx-directive/v-on.ts      |  31 ++---
 packages/volar/src/jsx-directive/v-slot.ts    |  42 ++-----
 15 files changed, 208 insertions(+), 207 deletions(-)
 create mode 100644 .changeset/polite-paws-doubt.md

diff --git a/.changeset/polite-paws-doubt.md b/.changeset/polite-paws-doubt.md
new file mode 100644
index 000000000..03ef5f4b2
--- /dev/null
+++ b/.changeset/polite-paws-doubt.md
@@ -0,0 +1,5 @@
+---
+"@vue-macros/volar": patch
+---
+
+support generic component
diff --git a/packages/jsx-directive/tests/__snapshots__/v-on.test.ts.snap b/packages/jsx-directive/tests/__snapshots__/v-on.test.ts.snap
index a119e7135..cef3635d7 100644
--- a/packages/jsx-directive/tests/__snapshots__/v-on.test.ts.snap
+++ b/packages/jsx-directive/tests/__snapshots__/v-on.test.ts.snap
@@ -1,19 +1,23 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`jsx-vue-directive > vue 2.7 v-on > ./fixtures/v-on/child.vue 1`] = `
-"<script setup lang="tsx">
+"<script setup lang="tsx" generic="T">
+const { bar } = defineProps<{
+  bar: T
+}>()
+
 const slots = defineSlots<{
   default: () => any
   bottom: (props: { foo: 1 }) => any
 }>()
 
 const emit = defineEmits<{
-  log: [foo: number]
+  log: [foo: T]
   click: []
 }>()
 
 defineRender(() => (
-  <form v-on:submit_prevent={() => {}} onClick={() => emit('log', 1)}>
+  <form v-on:submit_prevent={() => {}} onClick={() => emit('log', bar)}>
     <slots.default />
   </form>
 ))
@@ -23,6 +27,7 @@ defineRender(() => (
 
 exports[`jsx-vue-directive > vue 2.7 v-on > ./fixtures/v-on/index.vue 1`] = `
 "<script setup lang="tsx">
+import { expectTypeOf } from 'expect-type'
 import Child from './child.vue'
 
 let bar = $ref('')
@@ -31,7 +36,8 @@ defineRender(() => (
     <legend>v-on</legend>
 
     <Child
-      on={{ log: console.log }}
+      bar={bar}
+      on={{ log: (e) => expectTypeOf<string>(e) }}
       v-on:click_capture_stop={() => console.log('stopped')}
     >
       <input
@@ -47,20 +53,24 @@ defineRender(() => (
 `;
 
 exports[`jsx-vue-directive > vue 3 v-on > ./fixtures/v-on/child.vue 1`] = `
-"<script setup lang="tsx">
+"<script setup lang="tsx" generic="T">
 import { withModifiers as __MACROS_withModifiers } from "vue";
+const { bar } = defineProps<{
+  bar: T
+}>()
+
 const slots = defineSlots<{
   default: () => any
   bottom: (props: { foo: 1 }) => any
 }>()
 
 const emit = defineEmits<{
-  log: [foo: number]
+  log: [foo: T]
   click: []
 }>()
 
 defineRender(() => (
-  <form onSubmit={__MACROS_withModifiers(() => {}, ['prevent'])} onClick={() => emit('log', 1)}>
+  <form onSubmit={__MACROS_withModifiers(() => {}, ['prevent'])} onClick={() => emit('log', bar)}>
     <slots.default />
   </form>
 ))
@@ -71,6 +81,7 @@ defineRender(() => (
 exports[`jsx-vue-directive > vue 3 v-on > ./fixtures/v-on/index.vue 1`] = `
 "<script setup lang="tsx">
 import { withModifiers as __MACROS_withModifiers } from "vue";const __MACROS_transformVOn = (obj) => Object.entries(obj).reduce((res, [key, value]) => (res['on' + key[0].toUpperCase() + key.slice(1)] = value, res), {});
+import { expectTypeOf } from 'expect-type'
 import Child from './child.vue'
 
 let bar = $ref('')
@@ -79,7 +90,8 @@ defineRender(() => (
     <legend>v-on</legend>
 
     <Child
-      {...__MACROS_transformVOn({ log: console.log })}
+      bar={bar}
+      {...__MACROS_transformVOn({ log: (e) => expectTypeOf<string>(e) })}
       onClickCapture={__MACROS_withModifiers(() => console.log('stopped'),['stop'])}
     >
       <input
diff --git a/packages/jsx-directive/tests/__snapshots__/v-slot.test.ts.snap b/packages/jsx-directive/tests/__snapshots__/v-slot.test.ts.snap
index a7751d9ca..e1d92f6e8 100644
--- a/packages/jsx-directive/tests/__snapshots__/v-slot.test.ts.snap
+++ b/packages/jsx-directive/tests/__snapshots__/v-slot.test.ts.snap
@@ -3,6 +3,7 @@
 exports[`jsx-vue-directive > vue 2.7 v-slot > ./fixtures/v-slot/index.vue 1`] = `
 "<script setup lang="tsx">
 import { unref as __MACROS_unref } from "vue";
+import { expectTypeOf } from 'expect-type'
 import Child from './child.vue'
 import type { FunctionalComponent } from 'vue'
 
@@ -22,6 +23,7 @@ const Comp: FunctionalComponent<
   )
 }
 
+let baz = $ref('')
 let show = $ref<boolean | undefined>()
 defineRender(() => (
   <div>
@@ -33,8 +35,9 @@ defineRender(() => (
     <Comp  scopedSlots={{'default': () => <span>default</span>,}}></Comp>
     <Child  scopedSlots={{'bottom': ({ foo }) => <span>{foo}</span>,}}></Child>
 
-    <Comp  scopedSlots={{'default': () => <span> </span>,}} />
-    <Child  scopedSlots={{'bottom': ({ foo }) => <span> </span>,}} />
+    <Child baz={baz}  scopedSlots={{'title': ({ foo }) => <span>
+      {expectTypeOf<string>(foo)}
+    </span>,}}></Child>
 
     <Child scopedSlots={{...(show) ? {'title': ({ foo }) => <span>
         {show}
@@ -57,6 +60,7 @@ exports[`jsx-vue-directive > vue 3 v-slot > ./fixtures/v-slot/index.vue 1`] = `
 "<script setup lang="tsx">
 import { renderList as __MACROS_renderList } from "vue";
 import { unref as __MACROS_unref } from "vue";
+import { expectTypeOf } from 'expect-type'
 import Child from './child.vue'
 import type { FunctionalComponent } from 'vue'
 
@@ -76,6 +80,7 @@ const Comp: FunctionalComponent<
   )
 }
 
+let baz = $ref('')
 let show = $ref<boolean | undefined>()
 defineRender(() => (
   <div>
@@ -87,8 +92,9 @@ defineRender(() => (
     <Comp  v-slots={{'default': () => <>default</>,}}></Comp>
     <Child  v-slots={{'bottom': ({ foo }) => <>{foo}</>,}}></Child>
 
-    <Comp  v-slots={{'default': () => <> </>,}} />
-    <Child  v-slots={{'bottom': ({ foo }) => <> </>,}} />
+    <Child baz={baz}  v-slots={{'title': ({ foo }) => <>
+      {expectTypeOf<string>(foo)}
+    </>,}}></Child>
 
     <Child v-slots={{...(show) ? {'title': ({ foo }) => <>
         {show}
diff --git a/packages/jsx-directive/tests/fixtures/v-on/child.vue b/packages/jsx-directive/tests/fixtures/v-on/child.vue
index 41d9c13b9..cdb324156 100644
--- a/packages/jsx-directive/tests/fixtures/v-on/child.vue
+++ b/packages/jsx-directive/tests/fixtures/v-on/child.vue
@@ -1,16 +1,20 @@
-<script setup lang="tsx">
+<script setup lang="tsx" generic="T">
+const { bar } = defineProps<{
+  bar: T
+}>()
+
 const slots = defineSlots<{
   default: () => any
   bottom: (props: { foo: 1 }) => any
 }>()
 
 const emit = defineEmits<{
-  log: [foo: number]
+  log: [foo: T]
   click: []
 }>()
 
 defineRender(() => (
-  <form onSubmit_prevent onClick={() => emit('log', 1)}>
+  <form onSubmit_prevent onClick={() => emit('log', bar)}>
     <slots.default />
   </form>
 ))
diff --git a/packages/jsx-directive/tests/fixtures/v-on/index.vue b/packages/jsx-directive/tests/fixtures/v-on/index.vue
index e80444016..9da834035 100644
--- a/packages/jsx-directive/tests/fixtures/v-on/index.vue
+++ b/packages/jsx-directive/tests/fixtures/v-on/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="tsx">
+import { expectTypeOf } from 'expect-type'
 import Child from './child.vue'
 
 let bar = $ref('')
@@ -7,7 +8,8 @@ defineRender(() => (
     <legend>v-on</legend>
 
     <Child
-      v-on={{ log: console.log }}
+      bar={bar}
+      v-on={{ log: (e) => expectTypeOf<string>(e) }}
       onClick_capture_stop={() => console.log('stopped')}
     >
       <input
diff --git a/packages/jsx-directive/tests/fixtures/v-slot/child.vue b/packages/jsx-directive/tests/fixtures/v-slot/child.vue
index bc3ed661c..a1b4dd6a9 100644
--- a/packages/jsx-directive/tests/fixtures/v-slot/child.vue
+++ b/packages/jsx-directive/tests/fixtures/v-slot/child.vue
@@ -1,7 +1,11 @@
-<script setup lang="tsx">
+<script setup lang="tsx" generic="T">
+defineProps<{
+  baz?: T
+}>()
+
 defineSlots<{
   default: () => any
-  title: (props: { foo: 1 }) => any
+  title: (props: { foo: T }) => any
   bottom: (props: { foo: 1 }) => any
   center: (props: { foo: 1 }) => any
   'bot-tom': (props: { foo: 1 }) => any
diff --git a/packages/jsx-directive/tests/fixtures/v-slot/index.vue b/packages/jsx-directive/tests/fixtures/v-slot/index.vue
index 3a14cc66d..45032c506 100644
--- a/packages/jsx-directive/tests/fixtures/v-slot/index.vue
+++ b/packages/jsx-directive/tests/fixtures/v-slot/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="tsx">
+import { expectTypeOf } from 'expect-type'
 import Child from './child.vue'
 import type { FunctionalComponent } from 'vue'
 
@@ -18,6 +19,7 @@ const Comp: FunctionalComponent<
   )
 }
 
+let baz = $ref('')
 let show = $ref<boolean | undefined>()
 defineRender(() => (
   <div>
@@ -29,8 +31,9 @@ defineRender(() => (
     <Comp v-slot>default</Comp>
     <Child v-slot:bottom={{ foo }}>{foo}</Child>
 
-    <Comp v-slot />
-    <Child v-slot:bottom={{ foo }} />
+    <Child baz={baz} v-slot:title={{ foo }}>
+      {expectTypeOf<string>(foo)}
+    </Child>
 
     <Child>
       default
diff --git a/packages/volar/src/common.ts b/packages/volar/src/common.ts
index b2ca1fa78..e150230b3 100644
--- a/packages/volar/src/common.ts
+++ b/packages/volar/src/common.ts
@@ -3,7 +3,6 @@ import {
   type Segment,
   type Sfc,
   type VueCompilerOptions,
-  getSlotsPropertyName,
   replaceAll,
 } from '@vue/language-core'
 import type { VolarOptions } from '..'
@@ -85,63 +84,3 @@ export function getImportNames(
 
   return names
 }
-
-export function getPropsType(codes: Segment<FileRangeCapabilities>[]) {
-  if (codes.toString().includes('type __VLS_getProps')) return
-
-  codes.push(`
-type __VLS_getProps<T> = T extends new () => { $props: infer P }
-  ? NonNullable<P>
-  : T extends (props: infer P, ctx: any) => any
-    ? NonNullable<P>
-    : {};`)
-}
-
-export function getEmitsType(codes: Segment<FileRangeCapabilities>[]) {
-  if (codes.toString().includes('type __VLS_getEmits')) return
-
-  codes.push(`
-type __VLS_getEmits<T> = T extends new () => { $emit: infer E }
-  ? NonNullable<__VLS_NormalizeEmits<E>>
-  : T extends (
-        props: any,
-        ctx: { slots: any; attrs: any; emit: infer E },
-      ) => any
-    ? NonNullable<__VLS_NormalizeEmits<E>>
-    : {};`)
-}
-
-export function getModelsType(codes: Segment<FileRangeCapabilities>[]) {
-  if (codes.toString().includes('type __VLS_getModels')) return
-  getEmitsType(codes)
-  getPropsType(codes)
-
-  codes.push(`
-type __VLS_CamelCase<S extends string> = S extends \`\${infer F}-\${infer RF}\${infer R}\`
-  ? \`\${F}\${Uppercase<RF>}\${__VLS_CamelCase<R>}\`
-  : S;
-type __VLS_RemoveUpdatePrefix<T> = T extends \`update:modelValue\`
-  ? never
-  : T extends \`update:\${infer R}\`
-    ? __VLS_CamelCase<R>
-    : T;
-type __VLS_getModels<T> = T extends object
-  ? {
-      [K in keyof __VLS_getEmits<T> as __VLS_RemoveUpdatePrefix<K>]: __VLS_getProps<T>[__VLS_RemoveUpdatePrefix<K>]
-    }
-  : {};`)
-}
-
-export function getSlotsType(
-  codes: Segment<FileRangeCapabilities>[],
-  vueVersion?: number,
-) {
-  if (codes.toString().includes('type __VLS_getSlots')) return
-  codes.push(`
-type __VLS_getSlots<T> = T extends new () => { '${getSlotsPropertyName(
-    vueVersion || 3,
-  )}': infer S } ? NonNullable<S>
-  : T extends (props: any, ctx: { slots: infer S; attrs: any; emit: any }) => any
-  ? NonNullable<S>
-  : {};`)
-}
diff --git a/packages/volar/src/jsx-directive/index.ts b/packages/volar/src/jsx-directive/index.ts
index 77fdcf2c4..1223f9110 100644
--- a/packages/volar/src/jsx-directive/index.ts
+++ b/packages/volar/src/jsx-directive/index.ts
@@ -20,20 +20,8 @@ export type TransformOptions = {
   vueVersion?: number
 }
 
-export function transformJsxDirective({
-  codes,
-  sfc,
-  ts,
-  source,
-  vueVersion,
-}: TransformOptions) {
-  function getTagName(node: JsxDirective['node']) {
-    return ts.isJsxSelfClosingElement(node)
-      ? node.tagName.getText(sfc[source]?.ast)
-      : ts.isJsxElement(node)
-        ? node.openingElement.tagName.getText(sfc[source]?.ast)
-        : null
-  }
+export function transformJsxDirective(options: TransformOptions) {
+  const { sfc, ts, source } = options
 
   const vIfMap = new Map<
     JsxDirective['node'] | null | undefined,
@@ -46,11 +34,13 @@ export function transformJsxDirective({
   const vOnWithModifiers: JsxDirective[] = []
   const vBindNodes: JsxDirective[] = []
 
+  const ctxNodeSet = new Set<JsxDirective['node']>()
+
   function walkJsxDirective(
     node: import('typescript/lib/tsserverlibrary').Node,
     parent?: import('typescript/lib/tsserverlibrary').Node,
   ) {
-    const tagName = getTagName(node)
+    const tagName = getTagName(node, options)
     const properties = ts.isJsxElement(node)
       ? node.openingElement.attributes.properties
       : ts.isJsxSelfClosingElement(node)
@@ -75,8 +65,12 @@ export function transformJsxDirective({
           node,
           attribute,
         })
+
+        ctxNodeSet.add(node)
       } else if (attributeName === 'v-on') {
         vOnNodes.push({ node, attribute })
+
+        ctxNodeSet.add(node)
       } else if (/^on[A-Z]\S*[_|-]\S+/.test(attributeName)) {
         vOnWithModifiers.push({ node, attribute })
       } else if (/^(?!v-)\S+[_|-]\S+/.test(attributeName)) {
@@ -107,11 +101,13 @@ export function transformJsxDirective({
       const slotNode = tagName === 'template' ? parent : node
       if (!slotNode) return
 
+      ctxNodeSet.add(slotNode)
+
       const attributeMap =
         vSlotMap.get(slotNode)?.attributeMap ||
         vSlotMap
           .set(slotNode, {
-            vSlotAttribute: tagName !== 'template' ? vSlotAttribute : undefined,
+            vSlotAttribute: tagName === 'template' ? undefined : vSlotAttribute,
             attributeMap: new Map(),
           })
           .get(slotNode)!.attributeMap
@@ -135,7 +131,7 @@ export function transformJsxDirective({
         if (attributeMap.get(null)) return
         for (const child of parent.children) {
           if (
-            getTagName(child) === 'template' ||
+            getTagName(child, options) === 'template' ||
             (ts.isJsxText(child) && !child.getText(sfc[source]?.ast).trim())
           )
             continue
@@ -158,20 +154,72 @@ export function transformJsxDirective({
   }
   sfc[source]?.ast.forEachChild(walkJsxDirective)
 
-  transformVSlot({
-    nodeMap: vSlotMap,
-    codes,
-    sfc,
-    ts,
-    source,
-    vueVersion,
-  })
-  transformVFor({ nodes: vForNodes, codes, sfc, ts, source })
-  vIfMap.forEach((nodes) => transformVIf({ nodes, codes, sfc, ts, source }))
-  vModelMap.forEach((nodes) =>
-    transformVModel({ nodes, codes, sfc, ts, source }),
+  const ctxMap = new Map(
+    Array.from(ctxNodeSet).map((node, index) => [
+      node,
+      transformCtx(node, index, options),
+    ]),
+  )
+
+  transformVSlot(vSlotMap, ctxMap, options)
+  transformVFor(vForNodes, options)
+  vIfMap.forEach((nodes) => transformVIf(nodes, options))
+  vModelMap.forEach((nodes) => transformVModel(nodes, ctxMap, options))
+  transformVOn(vOnNodes, ctxMap, options)
+  transformVOnWithModifiers(vOnWithModifiers, options)
+  transformVBind(vBindNodes, options)
+}
+
+export function getTagName(
+  node: JsxDirective['node'],
+  { ts, sfc, source }: TransformOptions,
+) {
+  return ts.isJsxSelfClosingElement(node)
+    ? node.tagName.getText(sfc[source]?.ast)
+    : ts.isJsxElement(node)
+      ? node.openingElement.tagName.getText(sfc[source]?.ast)
+      : ''
+}
+
+function transformCtx(
+  node: JsxDirective['node'],
+  index: number,
+  options: TransformOptions,
+) {
+  const { ts, sfc, source, codes } = options
+
+  const tag = ts.isJsxSelfClosingElement(node)
+    ? node
+    : ts.isJsxElement(node)
+      ? node.openingElement
+      : null
+  if (!tag) return ''
+
+  let props = ''
+  for (const prop of tag.attributes.properties) {
+    if (!ts.isJsxAttribute(prop)) continue
+    const name = prop.name.getText(sfc[source]?.ast)
+    if (name.startsWith('v-')) continue
+
+    const value =
+      prop.initializer && ts.isJsxExpression(prop.initializer)
+        ? prop.initializer.expression?.getText(sfc[source]?.ast)
+        : 'true'
+    props += `'${name}': ${value},`
+  }
+
+  const tagName = getTagName(node, options)
+  const ctxName = `__VLS_ctx${index}`
+  if (!codes.toString().includes('function __VLS_getFunctionalComponentCtx')) {
+    codes.push(
+      `function __VLS_getFunctionalComponentCtx<T, K>(comp: T, compInstance: K): __VLS_PickNotAny<
+	'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends { __ctx?: infer Ctx } ? Ctx : never : any
+	, T extends (props: infer P, ctx: infer Ctx) => any ? Ctx & { props: P } : any>;
+`,
+    )
+  }
+  codes.push(
+    `const ${ctxName} = __VLS_getFunctionalComponentCtx(${tagName}, __VLS_asFunctionalComponent(${tagName})({${props}}));\n`,
   )
-  transformVOn({ nodes: vOnNodes, codes, sfc, ts, source })
-  transformVOnWithModifiers({ nodes: vOnWithModifiers, codes, sfc, ts, source })
-  transformVBind({ nodes: vBindNodes, codes, sfc, ts, source })
+  return ctxName
 }
diff --git a/packages/volar/src/jsx-directive/v-bind.ts b/packages/volar/src/jsx-directive/v-bind.ts
index 0d685e20a..949286fa2 100644
--- a/packages/volar/src/jsx-directive/v-bind.ts
+++ b/packages/volar/src/jsx-directive/v-bind.ts
@@ -2,18 +2,13 @@
 
 import { FileRangeCapabilities, replaceSourceRange } from '@vue/language-core'
 import { camelize } from '@vue/shared'
-import { getEmitsType } from '../common'
 import type { JsxDirective, TransformOptions } from './index'
 
-export function transformVBind({
-  nodes,
-  codes,
-  ts,
-  sfc,
-  source,
-}: TransformOptions & { nodes: JsxDirective[] }) {
+export function transformVBind(
+  nodes: JsxDirective[],
+  { codes, ts, sfc, source }: TransformOptions,
+) {
   if (nodes.length === 0) return
-  getEmitsType(codes)
 
   for (const { attribute } of nodes) {
     let attributeName = attribute.name.getText(sfc[source]?.ast)
diff --git a/packages/volar/src/jsx-directive/v-for.ts b/packages/volar/src/jsx-directive/v-for.ts
index 4ec67ee9d..101c79e9a 100644
--- a/packages/volar/src/jsx-directive/v-for.ts
+++ b/packages/volar/src/jsx-directive/v-for.ts
@@ -7,7 +7,7 @@ import type { JsxDirective, TransformOptions } from './index'
 
 export function resolveVFor(
   attribute: JsxDirective['attribute'],
-  { ts, sfc, source }: Omit<TransformOptions, 'codes'>,
+  { ts, sfc, source }: TransformOptions,
 ) {
   const result: Segment<FileRangeCapabilities>[] = []
   if (
@@ -81,15 +81,14 @@ export function resolveVFor(
   return result
 }
 
-export function transformVFor({
-  nodes,
-  codes,
-  ts,
-  sfc,
-  source,
-}: TransformOptions & { nodes: JsxDirective[] }) {
+export function transformVFor(
+  nodes: JsxDirective[],
+  options: TransformOptions,
+) {
+  const { codes, source } = options
+
   nodes.forEach(({ attribute, node, parent }) => {
-    const result = resolveVFor(attribute, { ts, sfc, source })
+    const result = resolveVFor(attribute, options)
     if (parent) {
       result.unshift('{')
     }
diff --git a/packages/volar/src/jsx-directive/v-if.ts b/packages/volar/src/jsx-directive/v-if.ts
index a6754f3a2..a62aeebce 100644
--- a/packages/volar/src/jsx-directive/v-if.ts
+++ b/packages/volar/src/jsx-directive/v-if.ts
@@ -1,13 +1,9 @@
 import { FileRangeCapabilities, replaceSourceRange } from '@vue/language-core'
 import type { JsxDirective, TransformOptions } from './index'
 
-export function transformVIf({
-  nodes,
-  codes,
-  ts,
-  sfc,
-  source,
-}: TransformOptions & { nodes: JsxDirective[] }) {
+export function transformVIf(nodes: JsxDirective[], options: TransformOptions) {
+  const { codes, ts, sfc, source } = options
+
   nodes.forEach(({ node, attribute, parent }, index) => {
     if (!ts.isIdentifier(attribute.name)) return
 
diff --git a/packages/volar/src/jsx-directive/v-model.ts b/packages/volar/src/jsx-directive/v-model.ts
index 2afb6ae5b..b7fb8170e 100644
--- a/packages/volar/src/jsx-directive/v-model.ts
+++ b/packages/volar/src/jsx-directive/v-model.ts
@@ -6,27 +6,22 @@ import {
   replaceSourceRange,
 } from '@vue/language-core'
 import { camelize } from '@vue/shared'
-import { getModelsType } from '../common'
-import type { JsxDirective, TransformOptions } from './index'
+import { type JsxDirective, type TransformOptions, getTagName } from './index'
 
-export function transformVModel({
-  nodes,
-  codes,
-  ts,
-  sfc,
-  source,
-}: TransformOptions & { nodes: JsxDirective[] }) {
+export function transformVModel(
+  nodes: JsxDirective[],
+  ctxMap: Map<JsxDirective['node'], string>,
+  options: TransformOptions,
+) {
+  const { codes, ts, sfc, source } = options
   let firstNamespacedNode:
-    | { attribute: JsxDirective['attribute']; tagName: string }
+    | { attribute: JsxDirective['attribute']; node: JsxDirective['node'] }
     | undefined
   const result: Segment<FileRangeCapabilities>[] = []
   for (const { attribute, node } of nodes) {
-    const tagName = ts.isJsxSelfClosingElement(node)
-      ? node.tagName.getText(sfc[source]?.ast)
-      : ts.isJsxElement(node)
-        ? node.openingElement.tagName.getText(sfc[source]?.ast)
-        : ''
-    const modelValue = ['input', 'select', 'textarea'].includes(tagName)
+    const modelValue = ['input', 'select', 'textarea'].includes(
+      getTagName(node, options),
+    )
       ? 'value'
       : 'modelValue'
     const isArrayExpression =
@@ -51,7 +46,7 @@ export function transformVModel({
             return $1
           }),
       )
-      firstNamespacedNode ??= { attribute, tagName }
+      firstNamespacedNode ??= { attribute, node }
       if (firstNamespacedNode.attribute !== attribute) {
         replaceSourceRange(
           codes,
@@ -128,7 +123,7 @@ export function transformVModel({
   }
 
   if (!firstNamespacedNode) return
-  const { attribute, tagName } = firstNamespacedNode
+  const { attribute, node } = firstNamespacedNode
   getModelsType(codes)
 
   replaceSourceRange(
@@ -138,6 +133,26 @@ export function transformVModel({
     attribute.getEnd(),
     `{...{`,
     ...result,
-    `} satisfies __VLS_getModels<typeof ${tagName}>}`,
+    `} satisfies __VLS_getModels<__VLS_NormalizeEmits<typeof ${ctxMap.get(node)}.emit>, typeof ${ctxMap.get(node)}.props>}`,
   )
 }
+
+function getModelsType(codes: Segment<FileRangeCapabilities>[]) {
+  if (codes.toString().includes('type __VLS_GetModels')) return
+
+  codes.push(`
+type __VLS_CamelCase<S extends string> = S extends \`\${infer F}-\${infer RF}\${infer R}\`
+  ? \`\${F}\${Uppercase<RF>}\${__VLS_CamelCase<R>}\`
+  : S;
+type __VLS_RemoveUpdatePrefix<T> = T extends \`update:modelValue\`
+  ? never
+  : T extends \`update:\${infer R}\`
+    ? __VLS_CamelCase<R>
+    : T;
+type __VLS_GetModels<E, P> = E extends object
+  ? {
+      [K in keyof E as __VLS_RemoveUpdatePrefix<K>]: P[__VLS_RemoveUpdatePrefix<K>]
+    }
+  : {};
+`)
+}
diff --git a/packages/volar/src/jsx-directive/v-on.ts b/packages/volar/src/jsx-directive/v-on.ts
index 5a9bf378c..9da534625 100644
--- a/packages/volar/src/jsx-directive/v-on.ts
+++ b/packages/volar/src/jsx-directive/v-on.ts
@@ -1,39 +1,28 @@
 import { FileRangeCapabilities, replaceSourceRange } from '@vue/language-core'
-import { getEmitsType } from '../common'
 import type { JsxDirective, TransformOptions } from './index'
 
-export function transformVOn({
-  nodes,
-  codes,
-  ts,
-  sfc,
-  source,
-}: TransformOptions & { nodes: JsxDirective[] }) {
+export function transformVOn(
+  nodes: JsxDirective[],
+  ctxMap: Map<JsxDirective['node'], string>,
+  { codes, source }: TransformOptions,
+) {
   if (nodes.length === 0) return
-  getEmitsType(codes)
 
   for (const { node, attribute } of nodes) {
-    const tagName = ts.isJsxSelfClosingElement(node)
-      ? node.tagName.getText(sfc[source]?.ast)
-      : ts.isJsxElement(node)
-        ? node.openingElement.tagName.getText(sfc[source]?.ast)
-        : null
     replaceSourceRange(
       codes,
       source,
       attribute.getEnd() - 1,
       attribute.getEnd() - 1,
-      ` satisfies __VLS_getEmits<typeof ${tagName}>`,
+      ` satisfies __VLS_NormalizeEmits<typeof ${ctxMap.get(node)}.emit>`,
     )
   }
 }
 
-export function transformVOnWithModifiers({
-  nodes,
-  codes,
-  sfc,
-  source,
-}: TransformOptions & { nodes: JsxDirective[] }) {
+export function transformVOnWithModifiers(
+  nodes: JsxDirective[],
+  { codes, sfc, source }: TransformOptions,
+) {
   for (const { attribute } of nodes) {
     const attributeName = attribute.name.getText(sfc[source]?.ast).split('_')[0]
     replaceSourceRange(
diff --git a/packages/volar/src/jsx-directive/v-slot.ts b/packages/volar/src/jsx-directive/v-slot.ts
index e7650aa89..0d6f3af3f 100644
--- a/packages/volar/src/jsx-directive/v-slot.ts
+++ b/packages/volar/src/jsx-directive/v-slot.ts
@@ -3,9 +3,8 @@ import {
   type Segment,
   replaceSourceRange,
 } from '@vue/language-core'
-import { getSlotsType } from '../common'
 import { resolveVFor } from './v-for'
-import type { JsxDirective, TransformOptions } from './index'
+import { type JsxDirective, type TransformOptions, getTagName } from './index'
 
 export type VSlotMap = Map<
   JsxDirective['node'],
@@ -22,16 +21,13 @@ export type VSlotMap = Map<
   }
 >
 
-export function transformVSlot({
-  nodeMap,
-  codes,
-  ts,
-  sfc,
-  source,
-  vueVersion,
-}: TransformOptions & { nodeMap: VSlotMap }) {
+export function transformVSlot(
+  nodeMap: VSlotMap,
+  ctxMap: Map<JsxDirective['node'], string>,
+  options: TransformOptions,
+) {
   if (nodeMap.size === 0) return
-  getSlotsType(codes, vueVersion)
+  const { codes, ts, sfc, source } = options
 
   nodeMap.forEach(({ attributeMap, vSlotAttribute }, node) => {
     const result: Segment<FileRangeCapabilities>[] = [' v-slots={{']
@@ -67,11 +63,7 @@ export function transformVSlot({
         }
 
         if (vForAttribute) {
-          result.push(
-            '...',
-            ...resolveVFor(vForAttribute, { ts, sfc, source }),
-            '({',
-          )
+          result.push('...', ...resolveVFor(vForAttribute, options), '({')
         }
 
         let isDynamic = false
@@ -108,16 +100,13 @@ export function transformVSlot({
           isDynamic ? ': any' : '',
           ') => <>',
           ...children.map((child) => {
-            // Remove original children
             replaceSourceRange(codes, source, child.pos, child.end)
 
+            const isSlotTemplate =
+              getTagName(child, options) === 'template' && !vSlotAttribute
             const node =
-              ts.isJsxElement(child) &&
-              child.openingElement.tagName.getText(sfc[source]?.ast) ===
-                'template'
-                ? child.children
-                : child
-            return ts.isJsxSelfClosingElement(child)
+              isSlotTemplate && ts.isJsxElement(child) ? child.children : child
+            return isSlotTemplate && ts.isJsxSelfClosingElement(child)
               ? ''
               : ([
                   sfc[source]!.content.slice(node.pos, node.end),
@@ -151,12 +140,7 @@ export function transformVSlot({
       },
     )
 
-    const tagName = ts.isJsxSelfClosingElement(node)
-      ? node.tagName.getText(sfc[source]?.ast)
-      : ts.isJsxElement(node)
-        ? node.openingElement.tagName.getText(sfc[source]?.ast)
-        : null
-    const slotType = `} satisfies __VLS_getSlots<typeof ${tagName}>}`
+    const slotType = `} satisfies typeof ${ctxMap.get(node)}.slots}`
     if (attributeMap.has(null)) {
       result.push('default: () => <>')
     } else {