fix(language-core): correct inlay hints for v-bind with modifier (#4721)

vuejs · Aug 26, 2024 · 66920c8 · 66920c8
1 parent 333d73e
commit 66920c8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/packages/language-core/lib/codegen/template/elementProps.ts b/packages/language-core/lib/codegen/template/elementProps.ts
@@ -143,6 +143,7 @@ export function* generateElementProps(
 				...genereatePropExp(
 					options,
 					ctx,
+					prop,
 					prop.exp,
 					ctx.codeFeatures.all,
 					prop.arg?.loc.start.offset === prop.exp?.loc.start.offset,
@@ -266,6 +267,7 @@ export function* generateElementProps(
 function* genereatePropExp(
 	options: TemplateCodegenOptions,
 	ctx: TemplateCodegenContext,
+	prop: CompilerDOM.DirectiveNode,
 	exp: CompilerDOM.SimpleExpressionNode | undefined,
 	features: VueCodeInformation,
 	isShorthand: boolean,
@@ -299,11 +301,11 @@ function* genereatePropExp(
 				if (enableCodeFeatures) {
 					ctx.inlayHints.push({
 						blockName: 'template',
-						offset: exp.loc.end.offset,
+						offset: prop.loc.end.offset,
 						setting: 'vue.inlayHints.vBindShorthand',
 						label: `="${propVariableName}"`,
 						tooltip: [
-							`This is a shorthand for \`${exp.loc.source}="${propVariableName}"\`.`,
+							`This is a shorthand for \`${prop.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'),

diff --git a/packages/language-server/tests/inlayHints.spec.ts b/packages/language-server/tests/inlayHints.spec.ts
@@ -174,6 +174,22 @@ describe('Definitions', async () => {
 		`);
 	});
 
+	it('#4720', async () => {
+		expect(
+			await requestInlayHintsResult('fixture.vue', 'vue', `
+				<template>
+					<div :foo.attr></div>
+				</template>
+			`)
+		).toMatchInlineSnapshot(`
+			"
+							<template>
+								<div :foo.attr/* ="foo" */></div>
+							</template>
+						"
+		`);
+	});
+
 	const openedDocuments: TextDocument[] = [];
 
 	afterEach(async () => {