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

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

@@ -126,6 +126,9 @@ export function generateGlobalTypes({
 		'__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][];

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,34 +67,39 @@ function* generateSlots(
 	options: TemplateCodegenOptions,
 	ctx: TemplateCodegenContext
 ): Generator<Code> {
+	const name = getSlotsPropertyName(options.vueCompilerOptions.target);
 	if (!options.hasDefineSlots) {
-		yield `var __VLS_slots!: __VLS_PrettifyGlobal<{}`;
-		for (const { expVar, varName } of ctx.dynamicSlots) {
-			ctx.hasSlot = true;
-			yield `${newLine}& { [K in NonNullable<typeof ${expVar}>]?: (props: typeof ${varName}) => any }`;
-		}
-		for (const slot of ctx.slots) {
-			yield `${newLine}& { `;
-			ctx.hasSlot = true;
-			if (slot.name && slot.loc !== undefined) {
-				yield* generateObjectProperty(
-					options,
-					ctx,
-					slot.name,
-					slot.loc,
-					ctx.codeFeatures.withoutHighlightAndCompletion,
-					slot.nodeLoc
-				);
+		yield `var __VLS_slots!: __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.${name}>`;
+		if (ctx.dynamicSlots.length || ctx.slots.length) {
+			yield ` & Readonly<`;
+			for (const { expVar, propsVar } of ctx.dynamicSlots) {
+				ctx.hasSlot = true;
+				yield `${newLine}& { [K in NonNullable<typeof ${expVar}>]?: (props: typeof ${propsVar}) => any }`;
 			}
-			else {
-				yield* wrapWith(
-					slot.tagRange[0],
-					slot.tagRange[1],
-					ctx.codeFeatures.withoutHighlightAndCompletion,
-					`default`
-				);
+			for (const slot of ctx.slots) {
+				yield `${newLine}& { `;
+				ctx.hasSlot = true;
+				if (slot.name && slot.offset !== undefined) {
+					yield* generateObjectProperty(
+						options,
+						ctx,
+						slot.name,
+						slot.offset,
+						ctx.codeFeatures.withoutHighlightAndCompletion,
+						slot.nodeLoc
+					);
+				}
+				else {
+					yield* wrapWith(
+						slot.tagRange[0],
+						slot.tagRange[1],
+						ctx.codeFeatures.withoutHighlightAndCompletion,
+						`default`
+					);
+				}
+				yield `?: (props: typeof ${slot.propsVar}) => any }`;
 			}
-			yield `?: (props: typeof ${slot.varName}) => any }`;
+			yield `${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'`
 			),
 			`]`
 		);
@@ -66,7 +66,7 @@ export function* generateSlotOutlet(
 		yield `)${endOfLine}`;
 	}
 	else {
-		yield `var ${varSlot} = {${newLine}`;
+		yield `var ${propsVar} = {${newLine}`;
 		yield* generateElementProps(
 			options,
 			ctx,
@@ -83,10 +83,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 (
@@ -97,31 +97,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

@@ -12,7 +12,7 @@ declare const _default: <Row extends BaseRow>(__VLS_props: NonNullable<Awaited<t
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
-        default?: (props: {
+        readonly default?: (props: {
             row: Row;
         }) => any;
     };
@@ -594,7 +594,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;
 };
@@ -605,16 +606,17 @@ declare var __VLS_3: {
     num: number;
     str: string;
 };
-declare var __VLS_slots: __VLS_PrettifyGlobal<{} & {
+declare var __VLS_slots: __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & Readonly<{
     '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;
@@ -688,7 +690,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;
 };
@@ -699,16 +702,17 @@ declare var __VLS_3: {
     num: number;
     str: string;
 };
-declare var __VLS_slots: __VLS_PrettifyGlobal<{} & {
+declare var __VLS_slots: __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & Readonly<{
     '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,14 +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?: (props: any) => any;
 	bar?: (props: { str: string; num: number; }) => any;
 	baz?: (props: { str: string; num: number; }) => any;
-});
+}>);
 </script>