feat(language-core): type support of slot children (#5137)

Author: KazariEX

Diff for: packages/language-core/lib/codegen/globalTypes.ts

@@ -24,7 +24,7 @@ export function generateGlobalTypes({
 	checkUnknownEvents,
 	checkUnknownComponents,
 }: VueCompilerOptions) {
-	const fnPropsType = `(K extends { $props: infer Props } ? Props : any)${checkUnknownProps ? '' : ' & Record<string, unknown>'}`;
+	const fnPropsType = `(T extends { $props: infer Props } ? Props : {})${checkUnknownProps ? '' : ' & Record<string, unknown>'}`;
 	let text = ``;
 	if (target < 3.5) {
 		text += `
@@ -68,10 +68,31 @@ export function generateGlobalTypes({
 		N2 extends keyof __VLS_GlobalComponents ? N2 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : { [K in N0]: __VLS_GlobalComponents[N2] } :
 		N3 extends keyof __VLS_GlobalComponents ? N3 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : { [K in N0]: __VLS_GlobalComponents[N3] } :
 		${checkUnknownComponents ? '{}' : '{ [K in N0]: unknown }'};
-	type __VLS_FunctionalComponentProps<T, K> =
-		'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends { __ctx?: { props?: infer P } } ? NonNullable<P> : never
-		: T extends (props: infer P, ...args: any) => any ? P :
-		{};
+	type __VLS_FunctionalComponentCtx<T, K> = __VLS_PickNotAny<'__ctx' extends keyof __VLS_PickNotAny<K, {}>
+		? K extends { __ctx?: infer Ctx } ? NonNullable<Ctx> : never : any
+		, T extends (props: any, ctx: infer Ctx) => any ? Ctx : any
+	>;
+	type __VLS_FunctionalComponentProps<T, K> = '__ctx' extends keyof __VLS_PickNotAny<K, {}>
+		? K extends { __ctx?: { props?: infer P } } ? NonNullable<P> : never
+		: T extends (props: infer P, ...args: any) => any ? P
+		: {};
+	type __VLS_FunctionalComponent<T> = (props: ${fnPropsType}, ctx?: any) => __VLS_Element & {
+		__ctx?: {
+			attrs?: any,
+			slots?: T extends { ${getSlotsPropertyName(target)}: infer Slots } ? Slots : Record<string, any>,
+			emit?: T extends { $emit: infer Emit } ? Emit : {},
+			props?: ${fnPropsType},
+			expose?: (exposed: T) => void,
+		}
+	};
+	type __VLS_NormalizeSlotReturns<S, R = NonNullable<S> extends (...args: any) => infer K ? K : any> = R extends any[] ? {
+		[K in keyof R]: R[K] extends infer V
+			? V extends Element ? V
+			: V extends new (...args: any) => infer R ? ReturnType<__VLS_FunctionalComponent<R>>
+			: V extends (...args: any) => infer R ? R
+			: any
+			: never
+	} : R;
 	type __VLS_IsFunction<T, K> = K extends keyof T
 		? __VLS_IsAny<T[K]> extends false
 		? unknown extends T[K]
@@ -118,10 +139,6 @@ export function generateGlobalTypes({
 		NormalizedEmits = __VLS_NormalizeEmits<Emits> extends infer E ? string extends keyof E ? {} : E : never,
 	> = __VLS_SpreadMerge<NormalizedEmits, TypeEmits>;
 	type __VLS_PrettifyGlobal<T> = { [K in keyof T]: T[K]; } & {};
-	type __VLS_PickFunctionalComponentCtx<T, K> = NonNullable<__VLS_PickNotAny<
-		'__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_UseTemplateRef<T> = Readonly<import('${lib}').ShallowRef<T | null>>;
 
 	function __VLS_getVForSourceType<T extends number | string | any[] | Iterable<any>>(source: T): [
@@ -146,19 +163,10 @@ export function generateGlobalTypes({
 			: (arg1: unknown, arg2: unknown, arg3: unknown, arg4: unknown) => void;
 	function __VLS_makeOptional<T>(t: T): { [K in keyof T]?: T[K] };
 	function __VLS_asFunctionalComponent<T, K = T extends new (...args: any) => any ? InstanceType<T> : unknown>(t: T, instance?: K):
-		T extends new (...args: any) => any
-		? (props: ${fnPropsType}, ctx?: any) => __VLS_Element & {
-			__ctx?: {
-				attrs?: any;
-				slots?: K extends { ${getSlotsPropertyName(target)}: infer Slots } ? Slots : any;
-				emit?: K extends { $emit: infer Emit } ? Emit : any;
-				expose?(exposed: K): void;
-				props?: ${fnPropsType};
-			}
-		}
+		T extends new (...args: any) => any ? __VLS_FunctionalComponent<K>
 		: T extends () => any ? (props: {}, ctx?: any) => ReturnType<T>
 		: T extends (...args: any) => any ? T
-		: (_: {}${checkUnknownProps ? '' : ' & Record<string, unknown>'}, ctx?: any) => { __ctx?: { attrs?: any, expose?: any, slots?: any, emit?: any, props?: {}${checkUnknownProps ? '' : ' & Record<string, unknown>'} } };
+		: __VLS_FunctionalComponent<{}>;
 	function __VLS_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): 2 extends Parameters<T>['length'] ? [any] : [];
 	function __VLS_asFunctionalElement<T>(tag: T, endTag?: T): (attrs: T${checkUnknownComponents ? '' : ' & Record<string, unknown>'}) => void;
 	function __VLS_asFunctionalSlot<S>(slot: S): S extends () => infer R ? (props: {}) => R : NonNullable<S>;

Diff for: packages/language-core/lib/codegen/template/context.ts

@@ -208,6 +208,7 @@ export function createTemplateCodegenContext(options: Pick<TemplateCodegenOption
 		templateRefs,
 		currentComponent: undefined as {
 			ctxVar: string;
+			childTypes: string[];
 			used: boolean;
 		} | undefined,
 		singleRootElTypes: [] as string[],

Diff for: packages/language-core/lib/codegen/template/element.ts

@@ -41,9 +41,11 @@ export function* generateComponent(
 	const componentCtxVar = ctx.getInternalVariable();
 	const isComponentTag = node.tag.toLowerCase() === 'component';
 
+	ctx.currentComponent?.childTypes.push(`typeof ${componentVNodeVar}`);
 	ctx.currentComponent = {
 		ctxVar: componentCtxVar,
-		used: false
+		childTypes: [],
+		used: false,
 	};
 
 	let props = node.props;
@@ -282,7 +284,7 @@ export function* generateComponent(
 	yield* generateVSlot(options, ctx, node, slotDir);
 
 	if (ctx.currentComponent.used) {
-		yield `var ${componentCtxVar}!: __VLS_PickFunctionalComponentCtx<typeof ${componentOriginalVar}, typeof ${componentVNodeVar}>${endOfLine}`;
+		yield `var ${componentCtxVar}!: __VLS_FunctionalComponentCtx<typeof ${componentOriginalVar}, typeof ${componentVNodeVar}>${endOfLine}`;
 	}
 }
 
@@ -297,6 +299,8 @@ export function* generateElement(
 		: undefined;
 	const failedPropExps: FailedPropExpression[] = [];
 
+	ctx.currentComponent?.childTypes.push(`__VLS_NativeElements['${node.tag}']`);
+
 	yield `__VLS_asFunctionalElement(__VLS_elements`;
 	yield* generatePropertyAccess(
 		options,
@@ -355,7 +359,10 @@ export function* generateElement(
 
 	collectStyleScopedClassReferences(options, ctx, node);
 
+	const { currentComponent } = ctx;
+	ctx.currentComponent = undefined;
 	yield* generateElementChildren(options, ctx, node.children);
+	ctx.currentComponent = currentComponent;
 }
 
 function* generateFailedPropExps(

Diff for: packages/language-core/lib/codegen/template/vSlot.ts

@@ -53,17 +53,17 @@ export function* generateVSlot(
 		}
 		else {
 			// #932: reference for implicit default slot
+			const { start, end } = getElementInnerLoc(options, node);
 			yield* wrapWith(
-				node.children[0].loc.start.offset,
-				node.children.at(-1)!.loc.end.offset,
+				start,
+				end,
 				ctx.codeFeatures.navigation,
 				`default`
 			);
 		}
 		yield `: ${slotVar} } = ${ctx.currentComponent.ctxVar}.slots!${endOfLine}`;
 	}
 
-
 	if (slotDir?.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
 		const slotAst = createTsAst(options.ts, slotDir, `(${slotDir.exp.content}) => {}`);
 		collectVars(options.ts, slotAst, slotAst, slotBlockVars);
@@ -80,6 +80,20 @@ export function* generateVSlot(
 		ctx.removeLocalVariable(varName);
 	}
 
+	if (options.vueCompilerOptions.strictSlotChildren && node.children.length) {
+		const { start, end } = getElementInnerLoc(options, node);
+		yield `(): __VLS_NormalizeSlotReturns<typeof ${slotVar}> => (`;
+		yield* wrapWith(
+			start,
+			end,
+			ctx.codeFeatures.verification,
+			`{} as [`,
+			...ctx.currentComponent.childTypes.map(name => `${name}, `),
+			`]`
+		);
+		yield `)${endOfLine}`;
+	}
+
 	if (slotDir) {
 		let isStatic = true;
 		if (slotDir.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
@@ -170,3 +184,29 @@ function* generateSlotParameters(
 		];
 	}
 }
+
+function getElementInnerLoc(
+	options: TemplateCodegenOptions,
+	node: CompilerDOM.ElementNode
+) {
+	if (node.children.length) {
+		let start = node.children[0].loc.start.offset;
+		let end = node.children.at(-1)!.loc.end.offset;
+		while (options.template.content[start - 1] !== '>') {
+			start--;
+		}
+		while (options.template.content[end] !== '<') {
+			end++;
+		}
+		return {
+			start,
+			end,
+		};
+	}
+	else {
+		return {
+			start: node.loc.start.offset,
+			end: node.loc.end.offset,
+		};
+	}
+}

Diff for: packages/language-core/lib/types.ts

@@ -29,6 +29,7 @@ export interface VueCompilerOptions {
 	vitePressExtensions: string[];
 	petiteVueExtensions: string[];
 	jsxSlots: boolean;
+	strictSlotChildren: boolean;
 	strictVModel: boolean;
 	checkUnknownProps: boolean;
 	checkUnknownEvents: boolean;

Diff for: packages/language-core/lib/utils/ts.ts

@@ -267,6 +267,7 @@ export function getDefaultCompilerOptions(target = 99, lib = 'vue', strictTempla
 		vitePressExtensions: [],
 		petiteVueExtensions: [],
 		jsxSlots: false,
+		strictSlotChildren: strictTemplates,
 		strictVModel: strictTemplates,
 		checkUnknownProps: strictTemplates,
 		checkUnknownEvents: strictTemplates,

Diff for: packages/language-core/schemas/vue-tsconfig.schema.json

@@ -47,6 +47,11 @@
 					"default": false,
 					"markdownDescription": "Enables strict templates. When set to `true`, all `checkUnknown*` options will be enabled."
 				},
+				"strictSlotChildren": {
+					"type": "boolean",
+					"default": false,
+					"markdownDescription": "Strict type constraints of slot children. If not set, uses the 'strictTemplates' value."
+				},
 				"strictVModel": {
 					"type": "boolean",
 					"default": false,

Diff for: packages/language-server/tests/references.spec.ts

@@ -40,16 +40,16 @@ test('Default slot', async () => {
 		    },
 		    {
 		      "end": {
-		        "line": 8,
-		        "offset": 16,
+		        "line": 9,
+		        "offset": 4,
 		      },
 		      "file": "\${testWorkspacePath}/tsconfigProject/foo.vue",
 		      "isDefinition": false,
 		      "isWriteAccess": false,
-		      "lineText": "				<div></div>",
+		      "lineText": "			<Fixture>",
 		      "start": {
-		        "line": 8,
-		        "offset": 5,
+		        "line": 7,
+		        "offset": 13,
 		      },
 		    },
 		  ],

Diff for: test-workspace/tsc/passedFixtures/vue2/tsconfig.json

@@ -39,6 +39,7 @@
 		"../vue3/events",
 		"../vue3/no-script-block",
 		"../vue3/rootEl",
+		"../vue3/slot-children",
 		"../vue3/slots",
 		"../vue3/templateRef",
 		"../vue3/templateRef_native",

Diff for: test-workspace/tsc/passedFixtures/vue3/#4668/child.vue

@@ -2,7 +2,7 @@
 
 <script lang="ts" setup>
 defineSlots<{
-  action1: (props: { a: string }) => void
-  action2: (props: { a: string }) => void
+  action1: (props: { a: string }) => any
+  action2: (props: { a: string }) => any
 }>()
 </script>

Diff for: test-workspace/tsc/passedFixtures/vue3/#4668/main.vue

@@ -12,5 +12,5 @@
 import { exactType } from '../../shared';
 import Child from './child.vue'
 
-const n = 1 as const
+const n = 1
 </script>

Diff for: test-workspace/tsc/passedFixtures/vue3_strictTemplate/slot-children/child.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts" generic="T">
+defineProps<{
+	foo: T;
+}>();
+</script>

Diff for: test-workspace/tsc/passedFixtures/vue3_strictTemplate/slot-children/main.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import Child from './child.vue';
+import Parent from './parent.vue';
+
+const foo = {} as 'a' | 'b';
+</script>
+
+<template>
+	<Parent :foo>
+		<Child :foo="(`a` as const)" />
+		<Child :foo="(`b` as const)" />
+	</Parent>
+
+	<!-- @vue-expect-error -->
+	<Parent :foo>
+		<Child :foo="(`a` as const)" />
+		<Child :foo="(`c` as const)" />
+	</Parent>
+
+	<Parent :foo>
+		<a></a>
+	</Parent>
+
+	<!-- @vue-expect-error -->
+	<Parent :foo>
+		<img />
+	</Parent>
+</template>

Diff for: test-workspace/tsc/passedFixtures/vue3_strictTemplate/slot-children/parent.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts" generic="T">
+import Child from './child.vue';
+
+defineProps<{
+	foo: T;
+}>();
+defineSlots<{
+	default?: () => (typeof Child<T> | HTMLAnchorElement)[];
+}>();
+</script>