Fix component data not shown in hover when template interpolation is on

server/src/modes/template/index.ts

@@ -9,7 +9,6 @@ import { HTMLMode } from './htmlMode';
 import { VueInterpolationMode } from './interpolationMode';
 import { IServiceHost } from '../../services/typescriptService/serviceHost';
 import { HTMLDocument, parseHTMLDocument } from './parser/htmlParser';
-import { inferVueVersion } from '../../utils/vueVersion';
 import { DependencyService, RuntimeLibrary } from '../../services/dependencyService';
 import { VCancellationToken } from '../../utils/cancellationToken';
 import { AutoImportSfcPlugin } from '../plugins/autoImportSfcPlugin';
@@ -70,8 +69,38 @@ export class VueHTMLMode implements LanguageMode {
     return this.vueInterpolationMode.doResolve(document, item);
   }
   doHover(document: TextDocument, position: Position): Hover {
+    // Return concatanated results from both vueInterpolationMode and htmlMode.
     const interpolationHover = this.vueInterpolationMode.doHover(document, position);
-    return interpolationHover.contents.length !== 0 ? interpolationHover : this.htmlMode.doHover(document, position);
+    let markdownContent = '';
+    if (interpolationHover.contents.length > 0) {
+      for (const content of interpolationHover.contents) {
+        if (typeof content === 'string') {
+          markdownContent += `${content}\n`;
+        } else {
+          markdownContent += `\`\`\`${content.language}\n${content.value}\n\`\`\`\n`;
+        }
+      }
+    }
+    const htmlResult = this.htmlMode.doHover(document, position);
+    if (htmlResult.contents && Array.isArray(htmlResult.contents)) {
+      for (const content of htmlResult.contents) {
+        if (typeof content === 'string') {
+          markdownContent += `${content}\n`;
+        } else {
+          markdownContent += `\`\`\`${content.language}\n${content.value}\n\`\`\`\n`;
+        }
+      }
+    } else if (typeof htmlResult.contents === 'string') {
+      markdownContent += `${htmlResult.contents}\n`;
+    } else if ('kind' in htmlResult.contents) {
+      markdownContent += `${htmlResult.contents.value}\n`;
+    } else {
+      markdownContent += `\`\`\`${htmlResult.contents.language}\n${htmlResult.contents.value}\n\`\`\`\n`;
+    }
+    return {
+      contents: { kind: 'markdown', value: markdownContent },
+      range: interpolationHover.range || htmlResult.range
+    };
   }
   findDocumentHighlight(document: TextDocument, position: Position) {
     return this.htmlMode.findDocumentHighlight(document, position);

test/componentData/features/hover/basic.test.ts

@@ -0,0 +1,30 @@
+import { testHover } from '../../../hoverHelper';
+import { position, sameLineRange } from '../../../util';
+import { getDocUri } from '../../path';
+
+describe('Should show hover info with component data', () => {
+  const docUri = getDocUri('hover/Element.vue');
+
+  it('shows element description', async () => {
+    await testHover(docUri, position(2, 5), {
+      contents: [
+        '```ts\n(property) __vlsComponentData<Record<string, any>>.props: Record<string, any>\n```\nA foo tag'
+      ],
+      range: sameLineRange(2, 5, 12)
+    });
+  });
+
+  it('shows attribute description for non-dynamic attribute', async () => {
+    await testHover(docUri, position(2, 15), {
+      contents: ['An foo-attr description'],
+      range: sameLineRange(2, 13, 21)
+    });
+  });
+
+  it('shows attribute description for dynamic attribute with template interpolation enabled', async () => {
+    await testHover(docUri, position(3, 15), {
+      contents: ['```ts\n(property) "foo-attr": string\n```\nAn foo-attr description'],
+      range: sameLineRange(3, 14, 22)
+    });
+  });
+});

test/componentData/fixture/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "vetur.experimental.templateInterpolationService": true
+}

test/componentData/fixture/attributes.json

@@ -1,6 +1,9 @@
 {
+  "foo-tag/foo-attr": {
+    "description": "An foo-attr description"
+  },
   "handle-foo": {
     "type": "event",
     "documentation": "You gotta handle foo"
   }
-}
+}

test/componentData/fixture/hover/Element.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <foo-tag foo-attr="v" />
+    <foo-tag :foo-attr="'v'" />
+  </div>
+</template>

test/componentData/fixture/package.json

@@ -8,7 +8,7 @@
     "element-ui": "^2.13.2"
   },
   "vetur": {
-    "tags": "./tags.json",
-    "attributes": "./attributes.json"
+    "attributes": "./attributes.json",
+    "tags": "./tags.json"
   }
 }

test/interpolation/features/hover/basic.test.ts

@@ -7,21 +7,21 @@ describe('Should do hover interpolation for <template>', () => {
 
   it('shows hover for msg in mustache', async () => {
     await testHover(docUri, position(2, 11), {
-      contents: ['\n```ts\n(property) msg: string\n```\n'],
+      contents: ['```ts\n(property) msg: string\n```'],
       range: sameLineRange(2, 10, 13)
     });
   });
 
   it('shows hover for v-for variable', async () => {
     await testHover(docUri, position(5, 20), {
-      contents: ['\n```ts\n(parameter) item: number\n```\n'],
+      contents: ['```ts\n(parameter) item: number\n```'],
       range: sameLineRange(5, 18, 22)
     });
   });
 
   it('shows hover for v-for variable on readonly array', async () => {
     await testHover(docUri, position(10, 20), {
-      contents: ['\n```ts\n(parameter) item: string\n```\n'],
+      contents: ['```ts\n(parameter) item: string\n```'],
       range: sameLineRange(10, 18, 22)
     });
   });