Fix #2143

Author: octref

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### 0.27.0
 
+- Improve cross-file completion when declaring simple props with `props: ['foo']`. #2143.
 - Completing child component should trigger props with `:` by default. #2140.
 - Space should trigger completion only in HTML mode. #2139.
 - Self-closing `<PascalCase>` component should get highlighted like JSX/TSX. #2136

server/src/modes/script/componentInfo.ts

@@ -113,7 +113,10 @@ function getProps(tsModule: T_TypeScript, defaultExportType: ts.Type, checker: t
       .filter(expr => expr.kind === tsModule.SyntaxKind.StringLiteral)
       .map(expr => {
         return {
-          name: (expr as ts.StringLiteral).text
+          name: (expr as ts.StringLiteral).text,
+          documentation: `\`\`\`js\n${formatJSLikeDocumentation(
+            propsDeclaration.parent.getFullText().trim()
+          )}\n\`\`\`\n`
         };
       });
   }

test/lsp/features/completion/template.test.ts

@@ -82,5 +82,22 @@ describe('Should autocomplete for <template>', () => {
     it('completes child when child `export default {}` ends with `;`', async () => {
       await testCompletion(parent1775Uri, position(1, 13), [':attr']);
     });
+
+    const parent2143Uri = getDocUri('completion/template/childComponent/Parent2143.vue');
+    it("completes child with some documentation when using simple props declaration `props: ['foo']`", async () => {
+      await testCompletion(parent2143Uri, position(1, 9), [
+        {
+          label: ':foo',
+          documentationFragment: `props: ['foo']`
+        }
+      ]);
+
+      await testCompletion(parent2143Uri, position(1, 9), [
+        {
+          label: ':foo',
+          documentationFragment: `my props documentation`
+        }
+      ]);
+    });
   });
 });

test/lsp/fixture/completion/template/childComponent/Child2143.vue

@@ -0,0 +1,12 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+  /**
+   * my props documentation
+   */
+  props: ['foo']
+}
+</script>

test/lsp/fixture/completion/template/childComponent/Parent2143.vue

@@ -0,0 +1,13 @@
+<template>
+  <child ></child>
+</template>
+
+<script>
+import Child from './Child2143.vue'
+
+export default {
+  components: {
+    Child
+  }
+}
+</script>