feat(language-service): JSDoc display support when typing props on component template (#4796)

Author: joy-yu

extensions/vscode/src/common.ts

@@ -264,7 +264,7 @@ async function doActivate(context: vscode.ExtensionContext, createLc: CreateLang
 	]) {
 		try {
 			const res = await fetch(url);
-			onJson(await res.json());
+			onJson(await res.json() as any);
 			succeed = true;
 			break;
 		} catch { }

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

@@ -210,13 +210,14 @@ export function* generateElementProps(
 					...ctx.codeFeatures.withoutHighlightAndCompletion,
 				};
 			if (!options.vueCompilerOptions.strictTemplates) {
+				const verification = codeInfo.verification;
 				codeInfo.verification = {
 					shouldReport(_source, code) {
 						if (String(code) === '2353' || String(code) === '2561') {
 							return false;
 						}
-						return typeof codeInfo.verification === 'object'
-							? codeInfo.verification.shouldReport?.(_source, code) ?? true
+						return typeof verification === 'object'
+							? verification.shouldReport?.(_source, code) ?? true
 							: true;
 					},
 				};
@@ -301,6 +302,12 @@ function* generatePropExp(
 	isShorthand: boolean,
 	enableCodeFeatures: boolean
 ): Generator<Code> {
+	if (isShorthand && features.completion) {
+		features = {
+			...features,
+			completion: undefined,
+		};
+	}
 	if (exp && exp.constType !== CompilerDOM.ConstantTypes.CAN_STRINGIFY) { // style='z-index: 2' will compile to {'z-index':'2'}
 		if (!isShorthand) { // vue 3.4+
 			yield* generateInterpolation(

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

@@ -387,6 +387,53 @@ describe('Completions', async () => {
 		`, ':-foo-bar');
 	});
 
+	it('#4796', async () => {
+		expect(
+			(await requestCompletionItem('tsconfigProject/fixture.vue', 'vue', `
+				<template>
+					<HelloWorld :msg| />
+				</template>
+
+				<script lang="ts" setup>
+				import { defineComponent } from 'vue';
+
+				const HelloWorld = defineComponent({
+					props: {
+						/**
+						 * The message to display
+						 */
+						msg: String
+					}
+				})
+				</script>
+			`, ':msg'))
+		).toMatchInlineSnapshot(`
+			{
+			  "documentation": {
+			    "kind": "markdown",
+			    "value": "The message to display",
+			  },
+			  "insertTextFormat": 2,
+			  "kind": 5,
+			  "label": ":msg",
+			  "sortText": "
:msg",
+			  "textEdit": {
+			    "newText": ":msg="$1"",
+			    "range": {
+			      "end": {
+			        "character": 21,
+			        "line": 2,
+			      },
+			      "start": {
+			        "character": 17,
+			        "line": 2,
+			      },
+			    },
+			  },
+			}
+		`);
+	});
+
 	const openedDocuments: TextDocument[] = [];
 
 	afterEach(async () => {

packages/language-service/lib/ideFeatures/nameCasing.ts

@@ -86,7 +86,7 @@ export async function convertAttrName(
 	for (const [tagName, { attrs }] of tags) {
 		const componentName = components.find(component => component === tagName || hyphenateTag(component) === tagName);
 		if (componentName) {
-			const props = await tsPluginClient?.getComponentProps(rootCode.fileName, componentName) ?? [];
+			const props = (await tsPluginClient?.getComponentProps(rootCode.fileName, componentName) ?? []).map(prop => prop.name);
 			for (const [attrName, { offsets }] of attrs) {
 				const propName = props.find(prop => prop === attrName || hyphenateAttr(prop) === attrName);
 				if (propName) {