From 7854385e6d6ba136f85b7ffe3a4420fdb52907ed Mon Sep 17 00:00:00 2001
From: KazariEX <1364035137@qq.com>
Date: Fri, 1 Nov 2024 01:55:27 +0800
Subject: [PATCH 1/7] feat: support `v-generic`

---
 .../vscode/syntaxes/vue.tmLanguage.json       |  6 ++---
 .../lib/codegen/template/element.ts           | 25 ++++++++++++++++++-
 .../lib/codegen/template/elementDirectives.ts |  1 +
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/extensions/vscode/syntaxes/vue.tmLanguage.json b/extensions/vscode/syntaxes/vue.tmLanguage.json
index 71109bc144..cb700da6e7 100644
--- a/extensions/vscode/syntaxes/vue.tmLanguage.json
+++ b/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"
diff --git a/packages/language-core/lib/codegen/template/element.ts b/packages/language-core/lib/codegen/template/element.ts
index 258f317f59..98859e9324 100644
--- a/packages/language-core/lib/codegen/template/element.ts
+++ b/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,27 @@ 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') {
+			continue;
+		}
+		yield `<`;
+		if (prop.exp) {
+			yield [
+				prop.exp.loc.source,
+				'template',
+				prop.exp.loc.start.offset,
+				ctx.codeFeatures.all
+			]
+		}
+		yield `>`;
+	}
+}
+
 function* generateComponentSlot(
 	options: TemplateCodegenOptions,
 	ctx: TemplateCodegenContext,
diff --git a/packages/language-core/lib/codegen/template/elementDirectives.ts b/packages/language-core/lib/codegen/template/elementDirectives.ts
index 3c67bce054..c8ebf4758a 100644
--- a/packages/language-core/lib/codegen/template/elementDirectives.ts
+++ b/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;
 		}

From 86230c45834e148e20a5a881ec1f906edfab1a9b Mon Sep 17 00:00:00 2001
From: KazariEX <1364035137@qq.com>
Date: Fri, 1 Nov 2024 01:59:17 +0800
Subject: [PATCH 2/7] fix: should break

---
 packages/language-core/lib/codegen/template/element.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/language-core/lib/codegen/template/element.ts b/packages/language-core/lib/codegen/template/element.ts
index 98859e9324..e4658e5d00 100644
--- a/packages/language-core/lib/codegen/template/element.ts
+++ b/packages/language-core/lib/codegen/template/element.ts
@@ -472,6 +472,7 @@ function* generateComponentGeneric(
 			]
 		}
 		yield `>`;
+		break;
 	}
 }
 

From f8ba3212024d18b741a002e326ffebe105c8d18f Mon Sep 17 00:00:00 2001
From: KazariEX <1364035137@qq.com>
Date: Fri, 1 Nov 2024 02:18:41 +0800
Subject: [PATCH 3/7] test: add

---
 .../tsc/passedFixtures/vue3/v-generic/comp.vue        |  5 +++++
 .../tsc/passedFixtures/vue3/v-generic/main.vue        | 11 +++++++++++
 2 files changed, 16 insertions(+)
 create mode 100644 test-workspace/tsc/passedFixtures/vue3/v-generic/comp.vue
 create mode 100644 test-workspace/tsc/passedFixtures/vue3/v-generic/main.vue

diff --git a/test-workspace/tsc/passedFixtures/vue3/v-generic/comp.vue b/test-workspace/tsc/passedFixtures/vue3/v-generic/comp.vue
new file mode 100644
index 0000000000..4ad1b21578
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/test-workspace/tsc/passedFixtures/vue3/v-generic/main.vue b/test-workspace/tsc/passedFixtures/vue3/v-generic/main.vue
new file mode 100644
index 0000000000..2d917c7ce0
--- /dev/null
+++ b/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>
\ No newline at end of file

From ea0c3583c09b72c34f099370478917c6efd4ad8b Mon Sep 17 00:00:00 2001
From: KazariEX <1364035137@qq.com>
Date: Fri, 1 Nov 2024 02:21:25 +0800
Subject: [PATCH 4/7] test: exclude

---
 test-workspace/tsc/passedFixtures/vue2/tsconfig.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test-workspace/tsc/passedFixtures/vue2/tsconfig.json b/test-workspace/tsc/passedFixtures/vue2/tsconfig.json
index c7626d3065..50361e864d 100644
--- a/test-workspace/tsc/passedFixtures/vue2/tsconfig.json
+++ b/test-workspace/tsc/passedFixtures/vue2/tsconfig.json
@@ -41,5 +41,6 @@
 		"../vue3/slots",
 		"../vue3/templateRef",
 		"../vue3/templateRef_native",
+		"../vue3/v-generic"
 	]
 }

From 3b2082156fb42b0b8f5de0114640e3bc3a0a9762 Mon Sep 17 00:00:00 2001
From: KazariEX <1364035137@qq.com>
Date: Fri, 1 Nov 2024 18:23:29 +0800
Subject: [PATCH 5/7] fix: use `wrapWith`

---
 .../lib/codegen/template/element.ts             | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/language-core/lib/codegen/template/element.ts b/packages/language-core/lib/codegen/template/element.ts
index e4658e5d00..556d634f3e 100644
--- a/packages/language-core/lib/codegen/template/element.ts
+++ b/packages/language-core/lib/codegen/template/element.ts
@@ -459,19 +459,22 @@ function* generateComponentGeneric(
 	props: (CompilerDOM.AttributeNode | CompilerDOM.DirectiveNode)[]
 ): Generator<Code> {
 	for (const prop of props) {
-		if (prop.type !== CompilerDOM.NodeTypes.DIRECTIVE || prop.name !== 'generic') {
+		if (prop.type !== CompilerDOM.NodeTypes.DIRECTIVE || prop.name !== 'generic' || !prop.exp) {
 			continue;
 		}
-		yield `<`;
-		if (prop.exp) {
-			yield [
+		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
-			]
-		}
-		yield `>`;
+			],
+			`>`
+		);
 		break;
 	}
 }

From 8d8a220caa9f5c7937f4ee1ad61f9206fb7c8c7a Mon Sep 17 00:00:00 2001
From: KazariEX <1364035137@qq.com>
Date: Sat, 2 Nov 2024 02:11:33 +0800
Subject: [PATCH 6/7] test: multiple generic params

---
 test-workspace/tsc/passedFixtures/vue3/v-generic/comp.vue | 4 ++--
 test-workspace/tsc/passedFixtures/vue3/v-generic/main.vue | 7 +++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/test-workspace/tsc/passedFixtures/vue3/v-generic/comp.vue b/test-workspace/tsc/passedFixtures/vue3/v-generic/comp.vue
index 4ad1b21578..80a6229b95 100644
--- a/test-workspace/tsc/passedFixtures/vue3/v-generic/comp.vue
+++ b/test-workspace/tsc/passedFixtures/vue3/v-generic/comp.vue
@@ -1,5 +1,5 @@
-<script setup lang="ts" generic="T extends string | number">
+<script setup lang="ts" generic="T extends string | number, K = any">
 defineEmits<{
-    foo: [val: T]
+    foo: [bar: T, baz: K]
 }>();
 </script>
\ No newline at end of file
diff --git a/test-workspace/tsc/passedFixtures/vue3/v-generic/main.vue b/test-workspace/tsc/passedFixtures/vue3/v-generic/main.vue
index 2d917c7ce0..8b12f00b57 100644
--- a/test-workspace/tsc/passedFixtures/vue3/v-generic/main.vue
+++ b/test-workspace/tsc/passedFixtures/vue3/v-generic/main.vue
@@ -4,8 +4,11 @@ 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)"/>
+    <Comp v-generic="string" @foo="(bar) => exactType(bar, {} as string)"/>
+    <Comp v-generic="number, boolean" @foo="(bar, baz) => (
+        exactType(bar, {} as number),
+        exactType(baz, {} as boolean)
+    )"/>
     <!-- @vue-expect-error -->
     <Comp v-generic="boolean" />
 </template>
\ No newline at end of file

From 63c4f50230432d657c4658790a8a4a06fbafa44c Mon Sep 17 00:00:00 2001
From: KazariEX <1364035137@qq.com>
Date: Sat, 2 Nov 2024 16:21:45 +0800
Subject: [PATCH 7/7] refactor: use comment syntax

---
 .../vscode/syntaxes/vue.tmLanguage.json       |  6 +++---
 .../lib/codegen/template/context.ts           |  5 +++++
 .../lib/codegen/template/element.ts           | 21 ++++++++-----------
 .../lib/codegen/template/templateChild.ts     | 16 +++++++++++---
 .../lib/plugins/vue-template-inline-ts.ts     | 14 ++++++++++++-
 .../lib/plugins/vue-directive-comments.ts     | 17 ++++++++-------
 .../passedFixtures/vue3/v-generic/main.vue    | 19 ++++++++++-------
 7 files changed, 64 insertions(+), 34 deletions(-)

diff --git a/extensions/vscode/syntaxes/vue.tmLanguage.json b/extensions/vscode/syntaxes/vue.tmLanguage.json
index cb700da6e7..71109bc144 100644
--- a/extensions/vscode/syntaxes/vue.tmLanguage.json
+++ b/extensions/vscode/syntaxes/vue.tmLanguage.json
@@ -977,10 +977,10 @@
 					"include": "#vue-directives-style-attr"
 				},
 				{
-					"include": "#vue-directives-generic-attr"
+					"include": "#vue-directives-original"
 				},
 				{
-					"include": "#vue-directives-original"
+					"include": "#vue-directives-generic-attr"
 				}
 			]
 		},
@@ -1199,7 +1199,7 @@
 			]
 		},
 		"vue-directives-generic-attr": {
-			"begin": "\\b((?:v-)?generic)\\s*(=)",
+			"begin": "\\b(generic)\\s*(=)",
 			"captures": {
 				"1": {
 					"name": "entity.other.attribute-name.html.vue"
diff --git a/packages/language-core/lib/codegen/template/context.ts b/packages/language-core/lib/codegen/template/context.ts
index c5abab54e1..7334ae85a3 100644
--- a/packages/language-core/lib/codegen/template/context.ts
+++ b/packages/language-core/lib/codegen/template/context.ts
@@ -63,6 +63,10 @@ export function createTemplateCodegenContext(options: Pick<TemplateCodegenOption
 		errors: number;
 		node: CompilerDOM.CommentNode;
 	} | undefined;
+	let lastGenericComment: {
+		content: string;
+		offset: number;
+	} | undefined;
 	let variableId = 0;
 
 	const codeFeatures = new Proxy(_codeFeatures, {
@@ -123,6 +127,7 @@ export function createTemplateCodegenContext(options: Pick<TemplateCodegenOption
 		dynamicSlots,
 		codeFeatures,
 		accessExternalVariables,
+		lastGenericComment,
 		hasSlotElements,
 		blockConditions,
 		usedComponentCtxVars,
diff --git a/packages/language-core/lib/codegen/template/element.ts b/packages/language-core/lib/codegen/template/element.ts
index 556d634f3e..6fe5abfe31 100644
--- a/packages/language-core/lib/codegen/template/element.ts
+++ b/packages/language-core/lib/codegen/template/element.ts
@@ -206,7 +206,7 @@ export function* generateComponent(
 	yield `}))${endOfLine}`;
 
 	yield `const ${var_componentInstance} = ${var_functionalComponent}`;
-	yield* generateComponentGeneric(ctx, props);
+	yield* generateComponentGeneric(ctx);
 	yield `(`;
 	yield* wrapWith(
 		startTagOffset,
@@ -455,28 +455,25 @@ function* generateCanonicalComponentName(tagText: string, offset: number, featur
 }
 
 function* generateComponentGeneric(
-	ctx: TemplateCodegenContext,
-	props: (CompilerDOM.AttributeNode | CompilerDOM.DirectiveNode)[]
+	ctx: TemplateCodegenContext
 ): Generator<Code> {
-	for (const prop of props) {
-		if (prop.type !== CompilerDOM.NodeTypes.DIRECTIVE || prop.name !== 'generic' || !prop.exp) {
-			continue;
-		}
+	if (ctx.lastGenericComment) {
+		const { content, offset } = ctx.lastGenericComment;
 		yield* wrapWith(
-			prop.exp.loc.start.offset,
-			prop.exp.loc.end.offset,
+			offset,
+			offset + content.length,
 			ctx.codeFeatures.verification,
 			`<`,
 			[
-				prop.exp.loc.source,
+				content,
 				'template',
-				prop.exp.loc.start.offset,
+				offset,
 				ctx.codeFeatures.all
 			],
 			`>`
 		);
-		break;
 	}
+	ctx.lastGenericComment = undefined;
 }
 
 function* generateComponentSlot(
diff --git a/packages/language-core/lib/codegen/template/templateChild.ts b/packages/language-core/lib/codegen/template/templateChild.ts
index c7df01b522..69be101239 100644
--- a/packages/language-core/lib/codegen/template/templateChild.ts
+++ b/packages/language-core/lib/codegen/template/templateChild.ts
@@ -36,16 +36,26 @@ export function* generateTemplateChild(
 ): Generator<Code> {
 	if (prevNode?.type === CompilerDOM.NodeTypes.COMMENT) {
 		const commentText = prevNode.content.trim().split(' ')[0];
-		if (commentText.match(/^@vue-skip\b[\s\S]*/)) {
+		if (/^@vue-skip\b[\s\S]*/.test(commentText)) {
 			yield `// @vue-skip${newLine}`;
 			return;
 		}
-		else if (commentText.match(/^@vue-ignore\b[\s\S]*/)) {
+		else if (/^@vue-ignore\b[\s\S]*/.test(commentText)) {
 			yield* ctx.ignoreError();
 		}
-		else if (commentText.match(/^@vue-expect-error\b[\s\S]*/)) {
+		else if (/^@vue-expect-error\b[\s\S]*/.test(commentText)) {
 			yield* ctx.expectError(prevNode);
 		}
+		else {
+			const match = prevNode.loc.source.match(/^<!--\s*@vue-generic\b\s*\{(?<content>[^}]*)\}/);
+			if (match) {
+				const { content } = match.groups ?? {};
+				ctx.lastGenericComment = {
+					content,
+					offset: prevNode.loc.start.offset + match[0].indexOf(content)
+				};
+			}
+		}
 	}
 
 	const shouldInheritRootNodeAttrs = options.inheritAttrs;
diff --git a/packages/language-core/lib/plugins/vue-template-inline-ts.ts b/packages/language-core/lib/plugins/vue-template-inline-ts.ts
index ad38f5e013..f23bc015ff 100644
--- a/packages/language-core/lib/plugins/vue-template-inline-ts.ts
+++ b/packages/language-core/lib/plugins/vue-template-inline-ts.ts
@@ -19,6 +19,7 @@ const formatBrackets = {
 	// fix https://github.com/vuejs/language-tools/issues/2305
 	curly: ['0 +', '+ 0;'] as [string, string],
 	event: ['() => ', ';'] as [string, string],
+	generic: ['<', '>() => {};'] as [string, string],
 };
 
 const plugin: VueLanguagePlugin = ctx => {
@@ -71,7 +72,18 @@ const plugin: VueLanguagePlugin = ctx => {
 		return data;
 
 		function visit(node: CompilerDOM.TemplateChildNode | CompilerDOM.SimpleExpressionNode) {
-			if (node.type === CompilerDOM.NodeTypes.ELEMENT) {
+			if (node.type === CompilerDOM.NodeTypes.COMMENT) {
+				const match = node.loc.source.match(/^<!--\s*@vue-generic\b\s*\{(?<content>[^}]*)\}/);
+				if (match) {
+					const { content } = match.groups ?? {};
+					addFormatCodes(
+						content,
+						node.loc.start.offset + match[0].indexOf(content),
+						formatBrackets.generic
+					);
+				}
+			}
+			else if (node.type === CompilerDOM.NodeTypes.ELEMENT) {
 				for (const prop of node.props) {
 					if (prop.type !== CompilerDOM.NodeTypes.DIRECTIVE) {
 						continue;
diff --git a/packages/language-service/lib/plugins/vue-directive-comments.ts b/packages/language-service/lib/plugins/vue-directive-comments.ts
index 7b2504e59e..17b70b1077 100644
--- a/packages/language-service/lib/plugins/vue-directive-comments.ts
+++ b/packages/language-service/lib/plugins/vue-directive-comments.ts
@@ -1,9 +1,11 @@
 import type { CompletionItem, LanguageServicePlugin, LanguageServicePluginInstance } from '@volar/language-service';
+import type * as vscode from 'vscode-languageserver-protocol';
 
 const cmds = [
-	'vue-ignore',
-	'vue-skip',
-	'vue-expect-error',
+	['vue-ignore'],
+	['vue-skip'],
+	['vue-expect-error'],
+	['vue-generic', 'vue-generic {$1}'],
 ];
 
 const directiveCommentReg = /<!--\s*@/;
@@ -34,17 +36,17 @@ export function create(): LanguageServicePlugin {
 					const remainText = line.substring(startIndex);
 					const result: CompletionItem[] = [];
 
-					for (const cmd of cmds) {
+					for (const [label, text = label] of cmds) {
 						let match = true;
 						for (let i = 0; i < remainText.length; i++) {
-							if (remainText[i] !== cmd[i]) {
+							if (remainText[i] !== label[i]) {
 								match = false;
 								break;
 							}
 						}
 						if (match) {
 							result.push({
-								label: '@' + cmd,
+								label: '@' + label,
 								textEdit: {
 									range: {
 										start: {
@@ -53,8 +55,9 @@ export function create(): LanguageServicePlugin {
 										},
 										end: position,
 									},
-									newText: '@' + cmd,
+									newText: '@' + text,
 								},
+								insertTextFormat: 2 satisfies typeof vscode.InsertTextFormat.Snippet
 							});
 						}
 					}
diff --git a/test-workspace/tsc/passedFixtures/vue3/v-generic/main.vue b/test-workspace/tsc/passedFixtures/vue3/v-generic/main.vue
index 8b12f00b57..9491d28486 100644
--- a/test-workspace/tsc/passedFixtures/vue3/v-generic/main.vue
+++ b/test-workspace/tsc/passedFixtures/vue3/v-generic/main.vue
@@ -4,11 +4,14 @@ import Comp from './comp.vue';
 </script>
 
 <template>
-    <Comp v-generic="string" @foo="(bar) => exactType(bar, {} as string)"/>
-    <Comp v-generic="number, boolean" @foo="(bar, baz) => (
-        exactType(bar, {} as number),
-        exactType(baz, {} as boolean)
-    )"/>
-    <!-- @vue-expect-error -->
-    <Comp v-generic="boolean" />
-</template>
\ No newline at end of file
+	<!-- @vue-generic {string} -->
+	<Comp @foo="(bar) => exactType(bar, {} as string)" />
+	<!-- @vue-generic {number, boolean} -->
+	<Comp @foo="(bar, baz) => (
+		exactType(bar, {} as number),
+		exactType(baz, {} as boolean)
+	)" />
+	<!-- @vue-expect-error -->
+	<!-- @vue-generic {boolean} -->
+	<Comp />
+</template>