Merge pull request #2056 from yoyo930021/fix-props-when-pascal-case-name

Handle same tag name. Fix #2049
vuejs · Jul 31, 2020 · 7ddc969 · 7ddc969
2 parents e69e14b + 507fa45
commit 7ddc969
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 - Remove leading empty line in diagnostic errors. #2067.
 - `"vetur.completion.tagCasing": "initial"` causes double tag completion. #2053
 - 🙌 Fix initializationOptions: Cannot read property 'config' of undefined. Thanks to contribution from [Dawid Pakuła](https://github.com/zulus). #1897 and #1341.
+- 🙌 Component props auto-completion doesn't work when using PascalCase. Thanks to contribution from [@yoyo930021](@yoyo930021). #1841 and #2056.
 - 🙌 When passing incorrect first arg to vti, show help message. Thanks to contribution from [Rafal Tynski](@rafalt). #1841.
 - 🙌 Use CodeAction over command. Thanks to contribution from [Matt Bierner](@mjbvz). #1704.
 
@@ -18,7 +19,7 @@
 - 🙌 Cusom tags IntelliSense for local `tags.json`/`attributes.json`. [Usage Docs](https://vuejs.github.io/vetur/framework.html#workspace-custom-tags). Thanks to contribution from [Carlos Rodrigues](https://github.com/pikax). #1364 and #2018.
 - 🙌 Detect tags from @nuxt/components. Thanks to contribution from [pooya parsa](https://github.com/pi0). #1921.
 - 🙌 Fix VTI crash by passing correct PID to language server. Thanks to contribution from [Daniil Yastremskiy](@TheBeastOfCaerbannog). #1699 and #1805.
-- 🙌 Fix template interpolation hover info of v-for readonly array item. Thanks to contribution from [@yoyo930021](https://github.com/yoyo930021). #1788.
+- 🙌 Fix template interpolation hover info of v-for readonly array item. Thanks to contribution from [@yoyo930021](@yoyo930021). #1788.
 - 🙌 Improve performance while using template interpolation service. Thanks to contribution from [@IWANABETHATGUY](https://github.com/IWANABETHATGUY). #1839.
 
 ### 0.24.0 | 2020-03-04 | [VSIX](https://marketplace.visualstudio.com/_apis/public/gallery/publishers/octref/vsextensions/vetur/0.24.0/vspackage)

diff --git a/server/src/modes/template/services/htmlCompletion.ts b/server/src/modes/template/services/htmlCompletion.ts
@@ -143,10 +143,9 @@ export function doComplete(
     const value = isFollowedBy(text, nameEnd, ScannerState.AfterAttributeName, TokenType.DelimiterAssign)
       ? ''
       : '="$1"';
-    const tag = currentTag.toLowerCase();
     tagProviders.forEach(provider => {
       const priority = provider.priority;
-      provider.collectAttributes(tag, (attribute, type, documentation) => {
+      provider.collectAttributes(currentTag, (attribute, type, documentation) => {
         if ((type === 'event' && filterPrefix !== '@') || (type !== 'event' && filterPrefix === '@')) {
           return;
         }
@@ -229,10 +228,9 @@ export function doComplete(
       range = getReplaceRange(valueStart, valueEnd);
       addQuotes = true;
     }
-    const tag = currentTag.toLowerCase();
     const attribute = currentAttributeName.toLowerCase();
     tagProviders.forEach(provider => {
-      provider.collectValues(tag, attribute, value => {
+      provider.collectValues(currentTag, attribute, value => {
         const insertText = addQuotes ? '"' + value + '"' : value;
         result.items.push({
           label: value,

diff --git a/server/src/modes/template/services/htmlHover.ts b/server/src/modes/template/services/htmlHover.ts
@@ -41,7 +41,6 @@ export function doHover(
   }
 
   function getAttributeHover(tag: string, attribute: string, range: Range): Hover {
-    tag = tag.toLowerCase();
     let hover: Hover = NULL_HOVER;
     for (const provider of tagProviders) {
       provider.collectAttributes(tag, (attr, type, documentation) => {

diff --git a/server/src/modes/template/tagProviders/common.ts b/server/src/modes/template/tagProviders/common.ts
@@ -1,4 +1,5 @@
 import { MarkupContent } from 'vscode-languageserver-types';
+import { kebabCase } from 'lodash';
 
 interface TagCollector {
   (tag: string, documentation: string | MarkupContent): void;
@@ -50,6 +51,10 @@ export interface IValueSets {
   [tag: string]: string[];
 }
 
+export function getSameTagInSet<T>(tagSet: Record<string, T>, tag: string): T | undefined {
+  return tagSet[tag] ?? tagSet[tag.toLowerCase()] ?? tagSet[kebabCase(tag)];
+}
+
 export function collectTagsDefault(collector: TagCollector, tagSet: ITagSet): void {
   for (const tag in tagSet) {
     collector(tag, tagSet[tag].label);
@@ -63,14 +68,7 @@ export function collectAttributesDefault(
   globalAttributes: StandaloneAttribute[]
 ): void {
   if (tag) {
-    let tags = tagSet[tag];
-    if (!tags) {
-      for (const t in tagSet) {
-        if (t.toLowerCase() === tag) {
-          tags = tagSet[t];
-        }
-      }
-    }
+    const tags = getSameTagInSet(tagSet, tag);
 
     if (tags) {
       const attributes = tags.attributes;
@@ -110,7 +108,7 @@ export function collectValuesDefault(
     }
   }
   if (tag) {
-    const tags = tagSet[tag];
+    const tags = getSameTagInSet(tagSet, tag);
     if (tags) {
       const attributes = tags.attributes;
       if (attributes) {

diff --git a/server/src/modes/template/tagProviders/externalTagProviders.ts b/server/src/modes/template/tagProviders/externalTagProviders.ts
@@ -1,8 +1,9 @@
 import * as ts from 'typescript';
 import * as fs from 'fs';
 import * as path from 'path';
+import { kebabCase } from 'lodash';
 
-import { IHTMLTagProvider, Priority } from './common';
+import { IHTMLTagProvider, Priority, getSameTagInSet } from './common';
 
 import * as elementTags from 'element-helper-json/element-tags.json';
 import * as elementAttributes from 'element-helper-json/element-attributes.json';
@@ -77,7 +78,12 @@ export function getDependencyTagProvider(workspacePath: string, depPkgJson: any)
 
 export function getExternalTagProvider(id: string, tags: any, attributes: any): IHTMLTagProvider {
   function findAttributeDetail(tag: string, attr: string) {
-    return attributes[attr] || attributes[tag + '/' + attr];
+    return (
+      attributes[attr] ||
+      attributes[`${tag}/${attr}`] ||
+      attributes[`${tag.toLowerCase}/${attr}`] ||
+      attributes[`${kebabCase(tag)}/${attr}`]
+    );
   }
 
   return {
@@ -89,10 +95,7 @@ export function getExternalTagProvider(id: string, tags: any, attributes: any):
       }
     },
     collectAttributes(tag, collector) {
-      if (!tags[tag]) {
-        return;
-      }
-      const attrs = tags[tag].attributes;
+      const attrs = getSameTagInSet<any>(tags, tag)?.attributes;
       if (!attrs) {
         return;
       }
@@ -102,10 +105,7 @@ export function getExternalTagProvider(id: string, tags: any, attributes: any):
       }
     },
     collectValues(tag, attr, collector) {
-      if (!tags[tag]) {
-        return;
-      }
-      const attrs = tags[tag].attributes;
+      const attrs = getSameTagInSet<any>(tags, tag)?.attributes;
       if (!attrs || attrs.indexOf(attr) < 0) {
         return;
       }

diff --git a/test/interpolation/features/completion/basic.test.ts b/test/interpolation/features/completion/basic.test.ts
@@ -67,7 +67,7 @@ describe('Should autocomplete interpolation for <template>', () => {
     });
 
     it(`completes child component tag`, async () => {
-      await testCompletion(parentTemplateDocUri, position(4, 5), [
+      await testCompletion(parentTemplateDocUri, position(6, 5), [
         {
           label: 'basic',
           kind: CompletionItemKind.Property,
@@ -92,6 +92,26 @@ describe('Should autocomplete interpolation for <template>', () => {
       ]);
     });
 
+    it(`completes child component's props when kebab case component name`, async () => {
+      await testCompletion(parentTemplateDocUri, position(4, 15), [
+        {
+          label: 'bar',
+          kind: CompletionItemKind.Value,
+          documentation: new MarkdownString('My bar').appendCodeblock(`bar: String`, 'js')
+        }
+      ]);
+    });
+
+    it(`completes child component's props when camel case component name`, async () => {
+      await testCompletion(parentTemplateDocUri, position(5, 14), [
+        {
+          label: 'bar',
+          kind: CompletionItemKind.Value,
+          documentation: new MarkdownString('My bar').appendCodeblock(`bar: String`, 'js')
+        }
+      ]);
+    });
+
     it('completes inside v-if=""', async () => {
       await testCompletion(parentTemplateDocUri, position(3, 17), defaultList);
     });

diff --git a/test/interpolation/fixture/completion/Parent.vue b/test/interpolation/fixture/completion/Parent.vue
@@ -2,16 +2,20 @@
   <div>
     <basic :></basic>
     <basic v-if="" @click="" :foo=""></basic>
+    <test-comp  />
+    <TestComp  />
     <
   </div>
 </template>
 
 <script>
 import Basic from './Basic.vue'
+import TestComp from './TestComp.vue'
 
 export default {
   components: {
-    Basic
+    Basic,
+    TestComp
   },
   props: {
     /**

diff --git a/test/interpolation/fixture/completion/TestComp.vue b/test/interpolation/fixture/completion/TestComp.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>{{ bar }}</div>
+</template>
+
+<script>
+export default {
+  name: 'TestComp',
+  props: {
+    /**
+     * My bar
+     */
+    bar: String
+  },
+  data () {
+    return {
+      count: 0
+    }
+  }
+}
+</script>