feat(language-core): support @vue-generic

extensions/vscode/syntaxes/vue.tmLanguage.json

@@ -977,10 +977,10 @@
 					"include": "#vue-directives-style-attr"
 				},
 				{
-					"include": "#vue-directives-original"
+					"include": "#vue-directives-generic-attr"
 				},
 				{
-					"include": "#vue-directives-generic-attr"
+					"include": "#vue-directives-original"
 				}
 			]
 		},
@@ -1199,7 +1199,7 @@
 			]
 		},
 		"vue-directives-generic-attr": {
-			"begin": "\\b(generic)\\s*(=)",
+			"begin": "\\b((?:v-)?generic)\\s*(=)",
 			"captures": {
 				"1": {
 					"name": "entity.other.attribute-name.html.vue"

packages/language-core/lib/codegen/template/element.ts

@@ -205,7 +205,9 @@ export function* generateComponent(
 	yield* generateElementProps(options, ctx, node, props, false);
 	yield `}))${endOfLine}`;
 
-	yield `const ${var_componentInstance} = ${var_functionalComponent}(`;
+	yield `const ${var_componentInstance} = ${var_functionalComponent}`;
+	yield* generateComponentGeneric(ctx, props);
+	yield `(`;
 	yield* wrapWith(
 		startTagOffset,
 		startTagOffset + node.tag.length,
@@ -452,6 +454,31 @@ function* generateCanonicalComponentName(tagText: string, offset: number, featur
 	}
 }
 
+function* generateComponentGeneric(
+	ctx: TemplateCodegenContext,
+	props: (CompilerDOM.AttributeNode | CompilerDOM.DirectiveNode)[]
+): Generator<Code> {
+	for (const prop of props) {
+		if (prop.type !== CompilerDOM.NodeTypes.DIRECTIVE || prop.name !== 'generic' || !prop.exp) {
+			continue;
+		}
+		yield* wrapWith(
+			prop.exp.loc.start.offset,
+			prop.exp.loc.end.offset,
+			ctx.codeFeatures.verification,
+			`<`,
+			[
+				prop.exp.loc.source,
+				'template',
+				prop.exp.loc.start.offset,
+				ctx.codeFeatures.all
+			],
+			`>`
+		);
+		break;
+	}
+}
+
 function* generateComponentSlot(
 	options: TemplateCodegenOptions,
 	ctx: TemplateCodegenContext,

packages/language-core/lib/codegen/template/elementDirectives.ts

@@ -24,6 +24,7 @@ export function* generateElementDirectives(
 			|| prop.name === 'bind'
 			|| prop.name === 'scope'
 			|| prop.name === 'data'
+			|| prop.name === 'generic'
 		) {
 			continue;
 		}

test-workspace/tsc/passedFixtures/vue2/tsconfig.json

@@ -41,5 +41,6 @@
 		"../vue3/slots",
 		"../vue3/templateRef",
 		"../vue3/templateRef_native",
+		"../vue3/v-generic"
 	]
 }

test-workspace/tsc/passedFixtures/vue3/v-generic/comp.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts" generic="T extends string | number">
+defineEmits<{
+    foo: [val: T]
+}>();
+</script>

test-workspace/tsc/passedFixtures/vue3/v-generic/main.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { exactType } from '../../shared';
+import Comp from './comp.vue';
+</script>
+
+<template>
+    <Comp v-generic="number" @foo="(val) => exactType(val, {} as number)"/>
+    <Comp v-generic="string" @foo="(val) => exactType(val, {} as string)"/>
+    <!-- @vue-expect-error -->
+    <Comp v-generic="boolean" />
+</template>