Merge pull request #2901 from rchl/fix/hover-attr

Fix attribute description not showing if its name matches html event

server/src/modes/template/tagProviders/htmlTags.ts

@@ -880,7 +880,7 @@ export function getHTML5TagProvider(): IHTMLTagProvider {
     collectAttributes: (tag: string, collector: AttributeCollector) => {
       collectAttributesDefault(tag, collector, HTML_TAGS, globalAttributes);
       eventHandlers.forEach(handler => {
-        collector(handler, 'event');
+        collector('@' + handler, 'event');
       });
     },
     priority: Priority.Platform,

server/src/modes/template/test/completion.test.ts

@@ -120,10 +120,10 @@ suite('HTML Completion', () => {
     html`<input style="style" |`.has('style');
     html`<input :cl|ass="$style.input"`.has('class').become('<input :class="$style.input"');
 
-    html`<input @|`.has('mousemove').become('<input @mousemove="$1"');
+    html`<input @|`.has('@mousemove').become('<input @mousemove="$1"');
 
     // can listen to same event by adding modifiers
-    html`<input @mousemove="mousemove" @|`.has('mousemove').become('<input @mousemove="mousemove" @mousemove="$1"');
+    html`<input @mousemove="mousemove" @|`.has('@mousemove').become('<input @mousemove="mousemove" @mousemove="$1"');
   });
 
   test('Complete Value', () => {

server/src/modes/test-util/completion-test-util.ts

@@ -38,11 +38,7 @@ export class CompletionAsserter {
   has(label: string) {
     const items = this.items;
     const matches = items.filter(completion => completion.label === label);
-    assert.equal(
-      matches.length,
-      1,
-      label + ' should only existing once: Actual: ' + items.map(c => c.label).join(', ')
-    );
+    assert.equal(matches.length, 1, label + ' should exist once: Actual: ' + items.map(c => c.label).join(', '));
     this.lastMatch = matches[0];
     return this;
   }

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

@@ -27,4 +27,18 @@ describe('Should show hover info with component data', () => {
       range: sameLineRange(3, 14, 22)
     });
   });
+
+  it('shows attribute description for attribute with same name as html event', async () => {
+    await testHover(docUri, position(4, 15), {
+      contents: ['Custom error'],
+      range: sameLineRange(4, 13, 18)
+    });
+  });
+
+  it('shows attribute description for html event handler', async () => {
+    await testHover(docUri, position(4, 26), {
+      contents: ['```ts\n(property) "error": ($event: any) => () => void\n```'],
+      range: sameLineRange(4, 26, 31)
+    });
+  });
 });

test/componentData/fixture/attributes.json

@@ -1,4 +1,7 @@
 {
+  "foo-tag/error": {
+    "description": "Custom error"
+  },
   "foo-tag/foo-attr": {
     "description": "An foo-attr description"
   },

test/componentData/fixture/hover/Element.vue

@@ -2,5 +2,14 @@
   <div>
     <foo-tag foo-attr="v" />
     <foo-tag :foo-attr="'v'" />
+    <foo-tag error="foo" @error="noop" />
   </div>
 </template>
+
+<script>
+export default {
+  methods: {
+    noop() {},
+  },
+}
+</script>

test/componentData/fixture/tags.json

@@ -1,6 +1,6 @@
 {
   "foo-tag": {
     "description": "A foo tag",
-    "attributes": ["foo-attr", "handle-foo"]
+    "attributes": ["error", "foo-attr", "handle-foo"]
   }
 }