fix: inlay hints for <component :is> and <slot :name>

Co-authored-by: so1ve <i@mk1.io>
vuejs · johnsoncodehk · Oct 23, 2024 · Aug 7, 2024 · Aug 7, 2024 · Aug 7, 2024
commit 05f4d58bfeff5d87cbef603cc1605fbb1ffaaf7b
diff --git a/packages/language-core/lib/codegen/template/element.ts b/packages/language-core/lib/codegen/template/element.ts
@@ -14,6 +14,7 @@ import { generateInterpolation } from './interpolation';
 import { generatePropertyAccess } from './propertyAccess';
 import { generateTemplateChild } from './templateChild';
 import { generateObjectProperty } from './objectProperty';
+import { generateVBindShorthandInlayHint } from './vBindShorthand';
 
 const colonReg = /:/g;
 
@@ -46,18 +47,25 @@ export function* generateComponent(
 
 	let props = node.props;
 	let dynamicTagInfo: {
-		exp: string;
+		exp: CompilerDOM.ElementNode | CompilerDOM.ExpressionNode;
+		tag: string;
 		offset: number;
-		astHolder: any;
+		isComponentIsShorthand?: boolean;
 	} | undefined;
 
 	if (isComponentTag) {
 		for (const prop of node.props) {
-			if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE && prop.name === 'bind' && prop.arg?.loc.source === 'is' && prop.exp) {
+			if (
+				prop.type === CompilerDOM.NodeTypes.DIRECTIVE
+				&& prop.name === 'bind'
+				&& prop.arg?.loc.source === 'is'
+				&& prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+			) {
 				dynamicTagInfo = {
-					exp: prop.exp.loc.source,
+					exp: prop.exp,
+					tag: prop.exp.content,
 					offset: prop.exp.loc.start.offset,
-					astHolder: prop.exp.loc,
+					isComponentIsShorthand: prop.arg.loc.end.offset === prop.exp.loc.end.offset
 				};
 				props = props.filter(p => p !== prop);
 				break;
@@ -67,8 +75,8 @@ export function* generateComponent(
 	else if (node.tag.includes('.')) {
 		// namespace tag
 		dynamicTagInfo = {
-			exp: node.tag,
-			astHolder: node.loc,
+			exp: node,
+			tag: node.tag,
 			offset: startTagOffset,
 		};
 	}
@@ -108,12 +116,16 @@ export function* generateComponent(
 		yield* generateInterpolation(
 			options,
 			ctx,
+			dynamicTagInfo.tag,
 			dynamicTagInfo.exp,
-			dynamicTagInfo.astHolder,
 			dynamicTagInfo.offset,
 			ctx.codeFeatures.all,
 			'(',
-			')'
+			')',
+			dynamicTagInfo.isComponentIsShorthand ? [[
+				generateVBindShorthandInlayHint(dynamicTagInfo.exp.loc, 'is'),
+				dynamicTagInfo.exp.loc.end.offset
+			]] : undefined
 		);
 		yield endOfLine;
 	}

diff --git a/packages/language-core/lib/codegen/template/elementProps.ts b/packages/language-core/lib/codegen/template/elementProps.ts
@@ -11,6 +11,7 @@ import { generateEventArg, generateEventExpression } from './elementEvents';
 import type { TemplateCodegenOptions } from './index';
 import { generateInterpolation } from './interpolation';
 import { generateObjectProperty } from './objectProperty';
+import { generateVBindShorthandInlayHint } from './vBindShorthand';
 
 export function* generateElementProps(
 	options: TemplateCodegenOptions,
@@ -297,22 +298,7 @@ function* genereatePropExp(
 					features
 				);
 				if (inlayHints) {
-					yield [
-						'',
-						'template',
-						exp.loc.end.offset,
-						{
-							__hint: {
-								setting: 'vue.inlayHints.vBindShorthand',
-								label: `="${propVariableName}"`,
-								tooltip: [
-									`This is a shorthand for \`${exp.loc.source}="${propVariableName}"\`.`,
-									'To hide this hint, set `vue.inlayHints.vBindShorthand` to `false` in IDE settings.',
-									'[More info](https://github.com/vuejs/core/pull/9451)',
-								].join('\n\n'),
-							},
-						} as VueCodeInformation,
-					];
+					yield generateVBindShorthandInlayHint(exp.loc, propVariableName);
 				}
 			}
 		}

diff --git a/packages/language-core/lib/codegen/template/slotOutlet.ts b/packages/language-core/lib/codegen/template/slotOutlet.ts
@@ -6,6 +6,7 @@ import { generateElementChildren } from './elementChildren';
 import { generateElementProps } from './elementProps';
 import type { TemplateCodegenOptions } from './index';
 import { generateInterpolation } from './interpolation';
+import { generateVBindShorthandInlayHint } from './vBindShorthand';
 
 export function* generateSlotOutlet(
 	options: TemplateCodegenOptions,
@@ -80,6 +81,7 @@ export function* generateSlotOutlet(
 			nameProp?.type === CompilerDOM.NodeTypes.DIRECTIVE
 			&& nameProp.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
 		) {
+			const isShortHand = nameProp.arg?.loc.start.offset === nameProp.exp.loc.start.offset;
 			const slotExpVar = ctx.getInternalVariable();
 			yield `var ${slotExpVar} = `;
 			yield* generateInterpolation(
@@ -90,7 +92,11 @@ export function* generateSlotOutlet(
 				nameProp.exp.loc.start.offset,
 				ctx.codeFeatures.all,
 				'(',
-				')'
+				')',
+				isShortHand ? [[
+					generateVBindShorthandInlayHint(nameProp.exp.loc, 'name'),
+					nameProp.exp.loc.end.offset
+				]] : undefined
 			);
 			yield ` as const${endOfLine}`;
 			ctx.dynamicSlots.push({

diff --git a/packages/language-core/lib/codegen/template/vBindShorthand.ts b/packages/language-core/lib/codegen/template/vBindShorthand.ts
@@ -0,0 +1,21 @@
+import type * as CompilerDOM from '@vue/compiler-dom';
+import type { Code } from "../../types";
+
+export function generateVBindShorthandInlayHint(loc: CompilerDOM.SourceLocation, variableName: string): Code {
+	return [
+		'',
+		'template',
+		loc.end.offset,
+		{
+			__hint: {
+				setting: 'vue.inlayHints.vBindShorthand',
+				label: `="${variableName}"`,
+				tooltip: [
+					`This is a shorthand for \`${loc.source}="${variableName}"\`.`,
+					'To hide this hint, set `vue.inlayHints.vBindShorthand` to `false` in IDE settings.',
+					'[More info](https://github.com/vuejs/core/pull/9451)',
+				].join('\n\n'),
+			},
+		},
+	];
+};
diff --git a/packages/language-service/tests/inlayHint.ts b/packages/language-service/tests/inlayHint.ts
@@ -63,14 +63,14 @@ function readFiles(dir: string) {
 	return filesText;
 }
 
-const inlayHintReg = /(\^*)inlayHint:\s*"(.+)"/g;
+const inlayHintReg = /(\^*)inlayHint:\s*(['"])(.+)\2/g;
 
 function findActions(text: string) {
 
 	return [...text.matchAll(inlayHintReg)].map(flag => {
 
 		const offset = flag.index!;
-		const label = flag[2];
+		const label = flag[3];
 
 		return {
 			offset,

diff --git a/packages/language-service/tests/utils/createTester.ts b/packages/language-service/tests/utils/createTester.ts
@@ -42,6 +42,7 @@ function createTester(rootUri: URI) {
 		'vue.inlayHints.missingProps': true,
 		'vue.inlayHints.optionsWrapper': true,
 		'vue.inlayHints.inlineHandlerLeading': true,
+		'vue.inlayHints.vBindShorthand': true,
 	};
 	let currentVSCodeSettings: any;
 	const language = createLanguage(

diff --git a/test-workspace/language-service/inlay-hint/v-bind-shorthand/entry.vue b/test-workspace/language-service/inlay-hint/v-bind-shorthand/entry.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+let foo = 0;
+let name = '';
+let is = () => {};
+</script>
+
+<template>
+  <div :foo></div>
+  <!--     ^inlayHint: '="foo"' -->
+  <slot :foo></slot>
+  <!--      ^inlayHint: '="foo"' -->
+  <slot :name></slot>
+  <!--       ^inlayHint: '="name"' -->
+  <component :is></component>
+  <!--          ^inlayHint: '="is"' -->
+</template>