fix: should generate inlay hint for <component :is> and <slot :name>

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

@@ -13,6 +13,7 @@ import { generateInterpolation } from './interpolation';
 import { generatePropertyAccess } from './propertyAccess';
 import { generateStringLiteralKey } from './stringLiteralKey';
 import { generateTemplateChild } from './templateChild';
+import { generateVBindShorthandInlayHint } from './vBindShorthandInlayHint';
 
 const colonReg = /:/g;
 
@@ -50,6 +51,10 @@ export function* generateElement(
  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.arg.loc.start.offset === prop.exp.loc.start.offset) {
+ yield generateVBindShorthandInlayHint(prop.exp.loc, 'is');
+ }
+
  dynamicTagInfo = {
  exp: prop.exp.loc.source,
  offset: prop.exp.loc.start.offset,

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

@@ -10,6 +10,7 @@ import type { TemplateCodegenOptions } from './index';
 import { generateInterpolation } from './interpolation';
 import { generateObjectProperty } from './objectProperty';
 import { toString } from '@volar/language-core';
+import { generateVBindShorthandInlayHint } from './vBindShorthandInlayHint';
 
 export function* generateElementProps(
  options: TemplateCodegenOptions,
@@ -263,22 +264,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);
  }
  }
  }

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

@@ -6,6 +6,8 @@
 import { generateElementProps } from './elementProps';
 import type { TemplateCodegenOptions } from './index';
 import { generateInterpolation } from './interpolation';
+import { generateVBindShorthandInlayHint } from './vBindShorthandInlayHint';
+import { camelize } from '@vue/shared';
 
 export function* generateSlotOutlet(
  options: TemplateCodegenOptions,
@@ -44,7 +46,7 @@
  ? `'${nameProp.value.content}'`
  : nameProp?.type === CompilerDOM.NodeTypes.DIRECTIVE && nameProp.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
  ? nameProp.exp.content
- : `('default' as const)`
+ : `('default' as const)`,
  ),
  `]`,
  );

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

@@ -0,0 +1,21 @@
+import type * as CompilerDOM from '@vue/compiler-dom';
+import type { Code, VueCodeInformation } 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'),
+ },
+ } as VueCodeInformation,
+ ];
+};

packages/language-service/tests/inlayHint.ts

@@ -62,14 +62,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,

packages/language-service/tests/utils/createTester.ts

@@ -45,6 +45,7 @@ function createTester(rootUri: string) {
  'vue.inlayHints.missingProps': true,
  'vue.inlayHints.optionsWrapper': true,
  'vue.inlayHints.inlineHandlerLeading': true,
+ 'vue.inlayHints.vBindShorthand': true,
  };
  let currentVSCodeSettings: any;
  const language = createTypeScriptLanguage(

test-workspace/language-service/inlay-hint/v-bind-shorthand/entry.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+let foo = 0;
+let name = '';
+</script>
+
+<template>
+ <div :foo></div>
+ <!-- ^inlayHint: '="foo"' -->
+ <slot :foo></slot>
+ <!-- ^inlayHint: '="foo"' -->
+ <slot :name></slot>
+ <!-- ^inlayHint: '="name"' -->
+ <component :is></component>
+ <!-- ^inlayHint: '="is"' -->
+</template>