feat(typescript-plugin): refine props completion logic to follow TS behavior

packages/language-server/lib/server.ts

@@ -102,9 +102,6 @@ export function startServer(ts: typeof import('typescript')) {
 				getComponentDirectives(...args) {
 					return sendTsServerRequest('_vue:getComponentDirectives', args);
 				},
-				getComponentEvents(...args) {
-					return sendTsServerRequest('_vue:getComponentEvents', args);
-				},
 				getComponentNames(...args) {
 					return sendTsServerRequest('_vue:getComponentNames', args);
 				},

packages/language-server/tests/completions.spec.ts

@@ -498,7 +498,13 @@ test('#4796', async () => {
 		{
 		  "documentation": {
 		    "kind": "markdown",
-		    "value": "The message to display",
+		    "value": "\`\`\`
+		(property) msg?: string
+		\`\`\`
+
+		The message to display
+
+		",
 		  },
 		  "insertTextFormat": 1,
 		  "kind": 5,

packages/language-service/lib/plugins/vue-missing-props-hints.ts

@@ -77,7 +77,7 @@ export function create(
 								}
 								componentProps.set(
 									checkTag,
-									(await getComponentProps(info.root.fileName, checkTag) ?? [])
+									(await getComponentProps(info.root.fileName, tagOffset) ?? [])
 										.filter(prop => prop.required)
 										.map(prop => prop.name),
 								);

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

@@ -41,7 +41,6 @@ export function create(
 		getComponentNames,
 		getElementAttrs,
 		getComponentProps,
-		getComponentEvents,
 		getComponentDirectives,
 		getComponentSlots,
 	}: import('@vue/typescript-plugin/lib/requests').Requests,
@@ -176,6 +175,7 @@ export function create(
 					} = await runWithVueData(
 						info.script.id,
 						info.root,
+						document.offsetAt(position),
 						() =>
 							baseServiceInstance.provideCompletionItems!(
 								document,
@@ -333,11 +333,16 @@ export function create(
 				},
 			};
 
-			async function runWithVueData<T>(sourceDocumentUri: URI, root: VueVirtualCode, fn: () => T) {
+			async function runWithVueData<T>(
+				sourceDocumentUri: URI,
+				root: VueVirtualCode,
+				position: number,
+				fn: () => T,
+			) {
 				// #4298: Precompute HTMLDocument before provideHtmlData to avoid parseHTMLDocument requesting component names from tsserver
 				await fn();
 
-				const { sync } = await provideHtmlData(sourceDocumentUri, root);
+				const { sync } = await provideHtmlData(sourceDocumentUri, root, position);
 				let lastSync = await sync();
 				let result = await fn();
 				while (lastSync.version !== (lastSync = await sync()).version) {
@@ -346,7 +351,7 @@ export function create(
 				return { result, ...lastSync };
 			}
 
-			async function provideHtmlData(sourceDocumentUri: URI, root: VueVirtualCode) {
+			async function provideHtmlData(sourceDocumentUri: URI, root: VueVirtualCode, position: number) {
 				await (initializing ??= initialize());
 
 				const casing = await checkCasing(context, sourceDocumentUri);
@@ -372,7 +377,6 @@ export function create(
 				const tagMap = new Map<string, {
 					attrs: string[];
 					propInfos: ComponentPropInfo[];
-					events: string[];
 					directives: string[];
 				}>();
 				const propMap = new Map<string, {
@@ -464,22 +468,20 @@ export function create(
 								tagInfo = {
 									attrs: [],
 									propInfos: [],
-									events: [],
 									directives: [],
 								};
 								tagMap.set(tag, tagInfo);
 								tasks.push((async () => {
 									tagMap.set(tag, {
 										attrs: await getElementAttrs(root.fileName, tag) ?? [],
-										propInfos: await getComponentProps(root.fileName, tag) ?? [],
-										events: await getComponentEvents(root.fileName, tag) ?? [],
+										propInfos: await getComponentProps(root.fileName, position) ?? [],
 										directives: await getComponentDirectives(root.fileName) ?? [],
 									});
 									version++;
 								})());
 							}
 
-							const { attrs, propInfos, events, directives } = tagInfo;
+							const { attrs, propInfos, directives } = tagInfo;
 
 							for (let i = 0; i < propInfos.length; i++) {
 								const prop = propInfos[i]!;
@@ -502,7 +504,7 @@ export function create(
 									...attrs.map<ComponentPropInfo>(attr => ({ name: attr })),
 								]
 							) {
-								const isGlobal = prop.isAttribute || !propNameSet.has(prop.name);
+								const isGlobal = !propNameSet.has(prop.name);
 								const propName = casing.attr === AttrNameCasing.Camel ? prop.name : hyphenateAttr(prop.name);
 								const isEvent = hyphenateAttr(propName).startsWith('on-');
 
@@ -541,7 +543,6 @@ export function create(
 									) {
 										attributes.push({
 											name,
-											valueSet: prop.values?.some(value => typeof value === 'string') ? '__deferred__' : undefined,
 										});
 										propMap.set(name, {
 											name: propName,
@@ -553,23 +554,6 @@ export function create(
 								}
 							}
 
-							for (const event of events) {
-								const eventName = casing.attr === AttrNameCasing.Camel ? event : hyphenateAttr(event);
-
-								for (
-									const name of [
-										'v-on:' + eventName,
-										'@' + eventName,
-									]
-								) {
-									attributes.push({ name });
-									propMap.set(name, {
-										name: eventName,
-										kind: 'event',
-									});
-								}
-							}
-
 							for (const directive of directives) {
 								const name = hyphenateAttr(directive);
 								attributes.push({
@@ -589,11 +573,6 @@ export function create(
 									models.push(prop.name.slice('onUpdate:'.length));
 								}
 							}
-							for (const event of events) {
-								if (event.startsWith('update:')) {
-									models.push(event.slice('update:'.length));
-								}
-							}
 
 							for (const model of models) {
 								const name = casing.attr === AttrNameCasing.Camel ? model : hyphenateAttr(model);

packages/typescript-plugin/index.ts

@@ -5,7 +5,6 @@ import { createVueLanguageServiceProxy } from './lib/common';
 import type { Requests } from './lib/requests';
 import { collectExtractProps } from './lib/requests/collectExtractProps';
 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';
@@ -140,20 +139,25 @@ export = createLanguageServicePlugin(
 				const { project } = getProject(fileName);
 				return createResponse(getComponentDirectives(ts, project.getLanguageService().getProgram()!, fileName));
 			});
-			session.addProtocolHandler('_vue:getComponentEvents', request => {
-				const [fileName, tag]: Parameters<Requests['getComponentEvents']> = request.arguments;
-				const { project } = getProject(fileName);
-				return createResponse(getComponentEvents(ts, project.getLanguageService().getProgram()!, fileName, tag));
-			});
 			session.addProtocolHandler('_vue:getComponentNames', request => {
 				const [fileName]: Parameters<Requests['getComponentNames']> = request.arguments;
 				const { project } = getProject(fileName);
 				return createResponse(getComponentNames(ts, project.getLanguageService().getProgram()!, fileName));
 			});
 			session.addProtocolHandler('_vue:getComponentProps', request => {
-				const [fileName, tag]: Parameters<Requests['getComponentProps']> = request.arguments;
-				const { project } = getProject(fileName);
-				return createResponse(getComponentProps(ts, project.getLanguageService().getProgram()!, fileName, tag));
+				const [fileName, position]: Parameters<Requests['getComponentProps']> = request.arguments;
+				const { project, language, sourceScript, virtualCode } = getProjectAndVirtualCode(fileName);
+				return createResponse(
+					getComponentProps(
+						ts,
+						language,
+						project.getLanguageService(),
+						sourceScript,
+						virtualCode,
+						position,
+						sourceScript.generated ? sourceScript.snapshot.getLength() : 0,
+					),
+				);
 			});
 			session.addProtocolHandler('_vue:getComponentSlots', request => {
 				const [fileName]: Parameters<Requests['getComponentSlots']> = request.arguments;