feat(language-service): native completion experience for slot names (#5552)

Author: KazariEX

packages/language-core/lib/plugins/vue-tsx.ts

@@ -239,9 +239,10 @@ function createTsx(
 	});
 
 	return {
+		getLang,
 		getScriptRanges,
 		getScriptSetupRanges,
-		getLang,
+		getSetupSlotsAssignName,
 		getGeneratedScript,
 		getGeneratedTemplate,
 	};

packages/language-server/index.ts

@@ -117,6 +117,9 @@ connection.onInitialize(params => {
 			getComponentProps(...args) {
 				return sendTsServerRequest('_vue:getComponentProps', args);
 			},
+			getComponentSlots(...args) {
+				return sendTsServerRequest('_vue:getComponentSlots', args);
+			},
 			getElementAttrs(...args) {
 				return sendTsServerRequest('_vue:getElementAttrs', args);
 			},

packages/language-service/lib/plugins/vue-template.ts

@@ -349,6 +349,7 @@ export function create(
 
 				let version = 0;
 				let components: string[] | undefined;
+				let values: string[] | undefined;
 
 				const tasks: Promise<void>[] = [];
 				const tagMap = new Map<string, {
@@ -375,7 +376,14 @@ export function create(
 							return tags;
 						},
 						provideAttributes(tag) {
-							return htmlDataProvider.provideAttributes(tag);
+							let attrs = htmlDataProvider.provideAttributes(tag);
+							if (tag === 'slot') {
+								const nameAttr = attrs.find(attr => attr.name === 'name');
+								if (nameAttr) {
+									nameAttr.valueSet = 'slot';
+								}
+							}
+							return attrs;
 						},
 						provideValues(tag, attr) {
 							return htmlDataProvider.provideValues(tag, attr);
@@ -591,7 +599,20 @@ export function create(
 
 							return attributes;
 						},
-						provideValues: () => [],
+						provideValues: (tag, attr) => {
+							if (!values) {
+								values = [];
+								tasks.push((async () => {
+									if (tag === 'slot' && attr === 'name') {
+										values = await tsPluginClient?.getComponentSlots(root.fileName) ?? [];
+									}
+									version++;
+								})());
+							}
+							return values.map(value => ({
+								name: value,
+							}));
+						},
 					},
 				]);
 

packages/typescript-plugin/index.ts

@@ -7,6 +7,7 @@ import { getComponentDirectives } from './lib/requests/getComponentDirectives';
 import { getComponentEvents } from './lib/requests/getComponentEvents';
 import { getComponentNames } from './lib/requests/getComponentNames';
 import { getComponentProps } from './lib/requests/getComponentProps';
+import { getComponentSlots } from './lib/requests/getComponentSlots';
 import { getElementAttrs } from './lib/requests/getElementAttrs';
 import { getElementNames } from './lib/requests/getElementNames';
 import { getImportPathForFile } from './lib/requests/getImportPathForFile';
@@ -109,6 +110,16 @@ export = createLanguageServicePlugin(
 					response: getPropertiesAtLocation.apply(getRequestContext(args[0]), args),
 				};
 			});
+			session.addProtocolHandler('_vue:getComponentDirectives', ({ arguments: args }) => {
+				return {
+					response: getComponentDirectives.apply(getRequestContext(args[0]), args),
+				};
+			});
+			session.addProtocolHandler('_vue:getComponentEvents', ({ arguments: args }) => {
+				return {
+					response: getComponentEvents.apply(getRequestContext(args[0]), args),
+				};
+			});
 			session.addProtocolHandler('_vue:getComponentNames', ({ arguments: args }) => {
 				return {
 					response: getComponentNames.apply(getRequestContext(args[0]), args) ?? [],
@@ -119,14 +130,9 @@ export = createLanguageServicePlugin(
 					response: getComponentProps.apply(getRequestContext(args[0]), args),
 				};
 			});
-			session.addProtocolHandler('_vue:getComponentEvents', ({ arguments: args }) => {
-				return {
-					response: getComponentEvents.apply(getRequestContext(args[0]), args),
-				};
-			});
-			session.addProtocolHandler('_vue:getComponentDirectives', ({ arguments: args }) => {
+			session.addProtocolHandler('_vue:getComponentSlots', ({ arguments: args }) => {
 				return {
-					response: getComponentDirectives.apply(getRequestContext(args[0]), args),
+					response: getComponentSlots.apply(getRequestContext(args[0]), args),
 				};
 			});
 			session.addProtocolHandler('_vue:getElementAttrs', ({ arguments: args }) => {

packages/typescript-plugin/lib/requests/getComponentSlots.ts

@@ -0,0 +1,28 @@
+import { tsCodegen, VueVirtualCode } from '@vue/language-core';
+import type { RequestContext } from './types';
+import { getVariableType } from './utils';
+
+export function getComponentSlots(
+	this: RequestContext,
+	fileName: string,
+) {
+	const { typescript: ts, language, languageService, asScriptId } = this;
+	const volarFile = language.scripts.get(asScriptId(fileName));
+	if (!(volarFile?.generated?.root instanceof VueVirtualCode)) {
+		return;
+	}
+	const vueCode = volarFile.generated.root;
+
+	const codegen = tsCodegen.get(vueCode.sfc);
+	if (!codegen) {
+		return;
+	}
+
+	const assignName = codegen.getSetupSlotsAssignName() ?? `__VLS_slots`;
+	const slots = getVariableType(ts, languageService, vueCode, assignName);
+	if (!slots) {
+		return [];
+	}
+
+	return slots.type.getProperties().map(({ name }) => name);
+}

packages/typescript-plugin/lib/requests/index.ts

@@ -6,10 +6,11 @@ export type Requests = {
 	collectExtractProps: ToRequest<typeof import('./collectExtractProps.js')['collectExtractProps']>;
 	getImportPathForFile: ToRequest<typeof import('./getImportPathForFile.js')['getImportPathForFile']>;
 	getPropertiesAtLocation: ToRequest<typeof import('./getPropertiesAtLocation.js')['getPropertiesAtLocation']>;
+	getComponentDirectives: ToRequest<typeof import('./getComponentDirectives.js')['getComponentDirectives']>;
+	getComponentEvents: ToRequest<typeof import('./getComponentEvents.js')['getComponentEvents']>;
 	getComponentNames: ToRequest<typeof import('./getComponentNames.js')['getComponentNames']>;
 	getComponentProps: ToRequest<typeof import('./getComponentProps.js')['getComponentProps']>;
-	getComponentEvents: ToRequest<typeof import('./getComponentEvents.js')['getComponentEvents']>;
-	getComponentDirectives: ToRequest<typeof import('./getComponentDirectives.js')['getComponentDirectives']>;
+	getComponentSlots: ToRequest<typeof import('./getComponentSlots.js')['getComponentSlots']>;
 	getElementAttrs: ToRequest<typeof import('./getElementAttrs.js')['getElementAttrs']>;
 	getElementNames: ToRequest<typeof import('./getElementNames.js')['getElementNames']>;
 	getEncodedSemanticClassifications: ToRequest<(fileName: string, span: ts.TextSpan) => ts.Classifications>;