feat(language-core): auto infer $event.currentTarget type

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

@@ -1,7 +1,7 @@
 import { getSlotsPropertyName } from '../utils/shared';
 
 export function generateGlobalTypes(lib: string, target: number, strictTemplates: boolean) {
-	const fnPropsType = `(K extends { $props: infer Props } ? Props : any)${strictTemplates ? '' : ' & Record<string, unknown>'}`;
+	const fnPropsType = `(K extends { $props: infer Props } ? __VLS_WithEventTarget<K['$el'], Props> : any)${strictTemplates ? '' : ' & Record<string, unknown>'}`;
 	let text = ``;
 	if (target < 3.5) {
 		text += `
@@ -87,6 +87,13 @@ export function generateGlobalTypes(lib: string, target: number, strictTemplates
 		'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends { __ctx?: infer Ctx } ? Ctx : never : any
 		, T extends (props: any, ctx: infer Ctx) => any ? Ctx : any
 	>>;
+	type __VLS_WithEventTarget<E, T> = {
+		[K in keyof T]: T[K] extends ((payload: infer P) => void) | undefined
+			? P extends Event
+				? ((payload: P & { currentTarget: __VLS_PickNotAny<E, Element>, target: Element }) => void) | undefined
+				: T[K]
+			: T[K];
+	};
 
 	function __VLS_getVForSourceType(source: number): [number, number, number][];
 	function __VLS_getVForSourceType(source: string): [string, number, number][];
@@ -131,7 +138,7 @@ export function generateGlobalTypes(lib: string, target: number, strictTemplates
 		: T extends () => any ? (props: {}, ctx?: any) => ReturnType<T>
 		: T extends (...args: any) => any ? T
 		: (_: {}${strictTemplates ? '' : ' & Record<string, unknown>'}, ctx?: any) => { __ctx?: { attrs?: any, expose?: any, slots?: any, emit?: any, props?: {}${strictTemplates ? '' : ' & Record<string, unknown>'} } };
-	function __VLS_elementAsFunction<T>(tag: T, endTag?: T): (_: T${strictTemplates ? '' : ' & Record<string, unknown>'}) => void;
+	function __VLS_asFunctionalElement<E, T>(el: E, tag: T, endTag?: T): (_: __VLS_WithEventTarget<E, T>${strictTemplates ? '' : ' & Record<string, unknown>'}) => void;
 	function __VLS_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): 2 extends Parameters<T>['length'] ? [any] : [];
 	function __VLS_normalizeSlot<S>(s: S): S extends () => infer R ? (props: {}) => R : S;
 	function __VLS_tryAsConstant<const T>(t: T): T;

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

@@ -296,7 +296,15 @@ export function* generateElement(
 		suffix: string;
 	}[] = [];
 
-	yield `__VLS_elementAsFunction(__VLS_intrinsicElements`;
+	yield `__VLS_asFunctionalElement(__VLS_nativeElements`;
+	yield* generatePropertyAccess(
+		options,
+		ctx,
+		node.tag,
+		startTagOffset,
+		ctx.codeFeatures.withoutHighlightAndCompletion
+	);
+	yield `, __VLS_intrinsicElements`;
 	yield* generatePropertyAccess(
 		options,
 		ctx,

test-workspace/tsc/passedFixtures/vue3.4/tsconfig.json

@@ -12,6 +12,7 @@
 		"../vue3/#3820",
 		"../vue3/#4777",
 		"../vue3/#4820",
+		"../vue3/events",
 		"../vue3/rootEl",
 		"../vue3/templateRef",
 		"../vue3/templateRef_native",

test-workspace/tsc/passedFixtures/vue3/events/main.vue

@@ -1,8 +1,8 @@
 <template>
-	<div @click="exactType($event, {} as MouseEvent)"></div>
+	<div @click="exactType($event, {} as MouseEventWithTarget)"></div>
 
 	<!-- #3445 -->
-	<div @click="function (e) { exactType(e, {} as MouseEvent) }"></div>
+	<div @click="function (e) { exactType(e, {} as MouseEventWithTarget) }"></div>
 
 	<C1 @foo-bar="exactType($event, {} as number)" @bar-baz="exactType($event, {} as number)" />
 	<C2 @foo-bar="exactType($event, {} as number)" />
@@ -31,18 +31,29 @@
 
 	<!-- invalid component type don't fallback to native event type -->
 	<C9 @click="exactType($event, {} as any)" />
+
+	<!-- native event with target on component -->
+	<C11 @click="exactType($event, {} as MouseEventWithTarget)" />
+	<C12 @click="exactType($event, {} as MouseEventWithTarget)" />
 </template>
 
 <script lang="ts" setup>
 import { defineComponent, FunctionalComponent, PropType } from 'vue';
 import { exactType } from '../../shared';
 import C5 from './union_type.vue';
 
+type MouseEventWithTarget = MouseEvent & {
+	currentTarget: HTMLDivElement,
+	target: Element
+};
+
 const C1 = defineComponent({ emits: { fooBar: (_num: number) => true, 'bar-baz': (_num: number) => true } });
 const C2 = defineComponent({ props: { onFooBar: {} as PropType<(num: number) => void> } });
 // const C6 = defineComponent({ props: { onFoo: {} as PropType<(_num: string) => void> }, emits: { foo: (_num: number) => true } });
 const C7 = defineComponent({ emits: { click: (_num: number) => true } });
 const C8 = defineComponent({ props: { onClick: {} as PropType<(_num: number) => void> } });
+const C11 = defineComponent({ emits: { click: (_event: MouseEvent) => true }, __typeEl: {} as HTMLDivElement });
+const C12 = defineComponent({ props: { onClick: {} as PropType<(_event: MouseEvent) => void> }, __typeEl: {} as HTMLDivElement });
 </script>
 
 <script lang="ts">