fix(language-core): intersect __VLS_slots with __VLS_ctx.$slots

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

@@ -98,6 +98,9 @@ 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_OmitStringIndex<T> = {
+		[K in keyof T as string extends K ? never : K]: T[K];
+	};
 	type __VLS_UseTemplateRef<T> = Readonly<import('${lib}').ShallowRef<T | null>>;
 
 	function __VLS_getVForSourceType(source: number): [number, number, number][];

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

@@ -107,14 +107,14 @@ export function createTemplateCodegenContext(options: Pick<TemplateCodegenOption
 	const accessExternalVariables = new Map<string, Set<number>>();
 	const slots: {
 		name: string;
-		loc?: number;
+		offset?: number;
 		tagRange: [number, number];
-		varName: string;
 		nodeLoc: any;
+		propsVar: string;
 	}[] = [];
 	const dynamicSlots: {
 		expVar: string;
-		varName: string;
+		propsVar: string;
 	}[] = [];
 	const blockConditions: string[] = [];
 	const scopedClasses: {

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

@@ -67,21 +67,22 @@ function* generateSlots(
 	options: TemplateCodegenOptions,
 	ctx: TemplateCodegenContext
 ): Generator<Code> {
+	const name = getSlotsPropertyName(options.vueCompilerOptions.target);
 	if (!options.hasDefineSlots) {
-		yield `var __VLS_slots!: `;
-		for (const { expVar, varName } of ctx.dynamicSlots) {
+		yield `var __VLS_slots!: __VLS_OmitStringIndex<typeof __VLS_ctx.${name}> & `;
+		for (const { expVar, propsVar } of ctx.dynamicSlots) {
 			ctx.hasSlot = true;
-			yield `Partial<Record<NonNullable<typeof ${expVar}>, (_: typeof ${varName}) => any>> &${newLine}`;
+			yield `Partial<Record<NonNullable<typeof ${expVar}>, (props: typeof ${propsVar}) => any>> &${newLine}`;
 		}
 		yield `{${newLine}`;
 		for (const slot of ctx.slots) {
 			ctx.hasSlot = true;
-			if (slot.name && slot.loc !== undefined) {
+			if (slot.name && slot.offset !== undefined) {
 				yield* generateObjectProperty(
 					options,
 					ctx,
 					slot.name,
-					slot.loc,
+					slot.offset,
 					ctx.codeFeatures.withoutHighlightAndCompletion,
 					slot.nodeLoc
 				);
@@ -94,7 +95,7 @@ function* generateSlots(
 					`default`
 				);
 			}
-			yield `?(_: typeof ${slot.varName}): any,${newLine}`;
+			yield `?(props: typeof ${slot.propsVar}): any,${newLine}`;
 		}
 		yield `}${endOfLine}`;
 	}

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

@@ -14,7 +14,7 @@ export function* generateSlotOutlet(
 	node: CompilerDOM.SlotOutletNode
 ): Generator<Code> {
 	const startTagOffset = node.loc.start.offset + options.template.content.slice(node.loc.start.offset).indexOf(node.tag);
-	const varSlot = ctx.getInternalVariable();
+	const propsVar = ctx.getInternalVariable();
 	const nameProp = node.props.find(prop => {
 		if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE) {
 			return prop.name === 'name';
@@ -43,7 +43,7 @@ export function* generateSlotOutlet(
 					? `'${nameProp.value.content}'`
 					: nameProp?.type === CompilerDOM.NodeTypes.DIRECTIVE && nameProp.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
 						? nameProp.exp.content
-						: `('default' as const)`
+						: `'default'`
 			),
 			`]`
 		);
@@ -59,7 +59,7 @@ export function* generateSlotOutlet(
 		yield `)${endOfLine}`;
 	}
 	else {
-		yield `var ${varSlot} = {${newLine}`;
+		yield `var ${propsVar} = {${newLine}`;
 		yield* generateElementProps(options, ctx, node, node.props.filter(prop => prop !== nameProp), options.vueCompilerOptions.strictTemplates, true);
 		yield `}${endOfLine}`;
 
@@ -69,10 +69,10 @@ export function* generateSlotOutlet(
 		) {
 			ctx.slots.push({
 				name: nameProp.value.content,
-				loc: nameProp.loc.start.offset + nameProp.loc.source.indexOf(nameProp.value.content, nameProp.name.length),
+				offset: nameProp.loc.start.offset + nameProp.loc.source.indexOf(nameProp.value.content, nameProp.name.length),
 				tagRange: [startTagOffset, startTagOffset + node.tag.length],
-				varName: varSlot,
 				nodeLoc: node.loc,
+				propsVar,
 			});
 		}
 		else if (
@@ -83,31 +83,29 @@ export function* generateSlotOutlet(
 			if (isShortHand) {
 				ctx.inlayHints.push(createVBindShorthandInlayHintInfo(nameProp.exp.loc, 'name'));
 			}
-			const slotExpVar = ctx.getInternalVariable();
-			yield `var ${slotExpVar} = `;
+			const expVar = ctx.getInternalVariable();
+			yield `var ${expVar} = __VLS_tryAsConstant(`;
 			yield* generateInterpolation(
 				options,
 				ctx,
 				'template',
 				ctx.codeFeatures.all,
 				nameProp.exp.content,
 				nameProp.exp.loc.start.offset,
-				nameProp.exp,
-				'(',
-				')'
+				nameProp.exp
 			);
-			yield ` as const${endOfLine}`;
+			yield `)${endOfLine}`;
 			ctx.dynamicSlots.push({
-				expVar: slotExpVar,
-				varName: varSlot,
+				expVar,
+				propsVar,
 			});
 		}
 		else {
 			ctx.slots.push({
 				name: 'default',
 				tagRange: [startTagOffset, startTagOffset + node.tag.length],
-				varName: varSlot,
 				nodeLoc: node.loc,
+				propsVar,
 			});
 		}
 	}

packages/tsc/tests/__snapshots__/dts.spec.ts.snap

@@ -11,8 +11,10 @@ declare const _default: <Row extends BaseRow>(__VLS_props: NonNullable<Awaited<t
     } & Partial<{}>> & (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps);
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
-    slots: {
-        default?(_: {
+    slots: __VLS_OmitStringIndex<Readonly<{
+        [name: string]: import("vue").Slot<any>;
+    }>> & {
+        default?(props: {
             row: Row;
         }): any;
     };
@@ -617,7 +619,8 @@ export {};
 `;
 
 exports[`vue-tsc-dts > Input: template-slots/component.vue, Output: template-slots/component.vue.d.ts 1`] = `
-"declare var __VLS_0: {};
+"declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_0: {};
 declare var __VLS_1: {
     num: number;
 };
@@ -628,13 +631,14 @@ declare var __VLS_3: {
     num: number;
     str: string;
 };
-declare var __VLS_slots: {
-    'no-bind'?(_: typeof __VLS_0): any;
-    default?(_: typeof __VLS_1): any;
-    'named-slot'?(_: typeof __VLS_2): any;
-    vbind?(_: typeof __VLS_3): any;
+declare var __VLS_slots: __VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    'no-bind'?(props: typeof __VLS_0): any;
+    default?(props: typeof __VLS_1): any;
+    'named-slot'?(props: typeof __VLS_2): any;
+    vbind?(props: typeof __VLS_3): any;
 };
 type __VLS_TemplateSlots = typeof __VLS_slots;
+declare const __VLS_self: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateSlots>;
 export default _default;
@@ -708,7 +712,8 @@ type __VLS_WithTemplateSlots<T, S> = T & {
 `;
 
 exports[`vue-tsc-dts > Input: template-slots/component-no-script.vue, Output: template-slots/component-no-script.vue.d.ts 1`] = `
-"declare var __VLS_0: {};
+"declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_0: {};
 declare var __VLS_1: {
     num: number;
 };
@@ -719,13 +724,14 @@ declare var __VLS_3: {
     num: number;
     str: string;
 };
-declare var __VLS_slots: {
-    'no-bind'?(_: typeof __VLS_0): any;
-    default?(_: typeof __VLS_1): any;
-    'named-slot'?(_: typeof __VLS_2): any;
-    vbind?(_: typeof __VLS_3): any;
+declare var __VLS_slots: __VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    'no-bind'?(props: typeof __VLS_0): any;
+    default?(props: typeof __VLS_1): any;
+    'named-slot'?(props: typeof __VLS_2): any;
+    vbind?(props: typeof __VLS_3): any;
 };
 type __VLS_TemplateSlots = typeof __VLS_slots;
+declare const __VLS_self: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateSlots>;
 export default _default;

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

@@ -1,5 +1,5 @@
 <template>
-	<!-- $slots type -->
+	<!-- component slots type -->
 	<Comp value="1">
 		<template #foo="bindings">{{ exactType(bindings, {} as string) }}</template>
 	</Comp>
@@ -26,7 +26,10 @@
 </template>
 
 <script lang="ts">
-export default { name: 'Self' };
+export default {
+	name: 'Self',
+	slots: Object as SlotsType<{ foo?: (_: any) => any }>,
+};
 
 declare const Comp: new <T>(props: { value: T; }) => {
 	$props: typeof props;
@@ -37,13 +40,15 @@ declare const Comp: new <T>(props: { value: T; }) => {
 </script>
 
 <script lang="ts" setup>
-import { ref, useSlots, VNode } from 'vue';
+import { ref, type SlotsType, useSlots, type VNode } from 'vue';
 import { exactType } from '../../shared';
 
 const baz = ref('baz' as const);
 
 const slots = useSlots();
-exactType(slots, {} as {
+exactType(slots, {} as Readonly<{
+	foo?(_: any): any;
+}> & {
 	bar?(_: { str: string; num: number; }): any;
 } & {
 	baz?(_: { str: string; num: number; }): any;