fix(language-core): should preserve generic info in directive (#4686)

Author: kermanx

packages/language-core/lib/codegen/script/globalTypes.ts

@@ -54,9 +54,14 @@ declare global {
 	function __VLS_getSlotParams<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>>;
 	// @ts-ignore
 	function __VLS_getSlotParam<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>>[0];
-	function __VLS_directiveFunction<T>(dir: T):
-		T extends import('${vueCompilerOptions.lib}').ObjectDirective<infer E, infer V> | import('${vueCompilerOptions.lib}').FunctionDirective<infer E, infer V> ? (value: V) => void
-		: T;
+
+	// Custom Directives
+	type __VLS_unknownDirective = (arg1: unknown, arg2: unknown, arg3: unknown, arg4: unknown) => void;
+	function __VLS_directiveAsFunction<T extends import('${vueCompilerOptions.lib}').Directive>(dir: T): T extends (...args: any) => any
+	  ? T | __VLS_unknownDirective
+		: NonNullable<(T & Record<string, __VLS_unknownDirective>)['created' | 'beforeMount' | 'mounted' | 'beforeUpdate' | 'updated' | 'beforeUnmount' | 'unmounted']>;
+	const __VLS_directiveBindingRestFields = { instance: null, oldValue: null, modifiers: null as any, dir: null as any };
+
 	function __VLS_withScope<T, K>(ctx: T, scope: K): ctx is T & K;
 	function __VLS_makeOptional<T>(t: T): { [K in keyof T]?: T[K] };
 	function __VLS_nonNullable<T>(t: T): T extends null | undefined ? never : T;

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

@@ -43,7 +43,7 @@ export function* generateElementDirectives(
 				prop.loc.start.offset,
 				prop.loc.end.offset,
 				ctx.codeFeatures.verification,
-				`__VLS_directiveFunction(__VLS_ctx.`,
+				`__VLS_directiveAsFunction(__VLS_ctx.`,
 				...generateCamelized(
 					'v-' + prop.name,
 					prop.loc.start.offset,
@@ -60,27 +60,36 @@ export function* generateElementDirectives(
 						},
 					}
 				),
-				`)(`,
+				`)(null!, { ...__VLS_directiveBindingRestFields, `,
 				...(
 					prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
-						? wrapWith(
-							prop.exp.loc.start.offset,
-							prop.exp.loc.end.offset,
-							ctx.codeFeatures.verification,
-							...generateInterpolation(
-								options,
-								ctx,
-								prop.exp.content,
-								prop.exp.loc,
+						? [
+							...wrapWith(
 								prop.exp.loc.start.offset,
-								ctx.codeFeatures.all,
-								'(',
-								')'
+								prop.exp.loc.end.offset,
+								ctx.codeFeatures.verification,
+								'value'
+							),
+							': ',
+							...wrapWith(
+								prop.exp.loc.start.offset,
+								prop.exp.loc.end.offset,
+								ctx.codeFeatures.verification,
+								...generateInterpolation(
+									options,
+									ctx,
+									prop.exp.content,
+									prop.exp.loc,
+									prop.exp.loc.start.offset,
+									ctx.codeFeatures.all,
+									'(',
+									')'
+								)
 							)
-						)
+						]
 						: [`undefined`]
 				),
-				`)`
+				`}, null!, null!)`
 			);
 			yield endOfLine;
 		}

test-workspace/tsc/passedFixtures/vue3/#4682/main.vue

@@ -0,0 +1,26 @@
+<template>
+	<div v-object1="[1, (_a: 1) => { }]"></div>
+	<div v-object2="[1, (_a: 1) => { }]"></div>
+	<div v-function1="[1, (_a: 1) => { }]"></div>
+	<div v-function2="[1, (_a: 1) => { }]"></div>
+</template>
+
+<script lang="ts" setup>
+import { FunctionDirective } from 'vue';
+import { ObjectDirective } from 'vue';
+
+const vObject1 = {
+	created<T extends number>(
+		_el: HTMLElement,
+		_binding: { value: [T, (a: T) => void]; }
+	) { },
+	mounted<T extends number>(
+		_el: HTMLElement,
+		_binding: { value: [T, (a: T) => void]; },
+		_vNode: any,
+	) { },
+};
+const vObject2 = {} as any as ObjectDirective<any, [1, (a: 1) => void]>;
+function vFunction1<T extends number>(_el: any, _binding: { value: [T, (a: T) => void]; }) { }
+const vFunction2 = {} as any as FunctionDirective<any, [1, (a: 1) => void]>;
+</script>