feat: find correct child components' definition inside template region

server/src/modes/script/childComponents.ts

@@ -1,4 +1,5 @@
 import * as ts from 'typescript';
+import { Range } from 'vscode-languageserver-types';
 import { getLastChild, buildDocumentation, getObjectLiteralExprFromExportExpr } from './componentInfo';
 import { T_TypeScript } from '../../services/dependencyService';
 
@@ -7,8 +8,7 @@ interface InternalChildComponent {
   documentation?: string;
   definition?: {
     path: string;
-    start: number;
-    end: number;
+    range: Range;
   };
   defaultExportExpr?: ts.Node;
 }
@@ -63,13 +63,20 @@ export function getChildComponents(
             return;
           }
 
+          const sourceFile = defaultExportExpr.getSourceFile();
+          const decalration = definitionObjectLiteralSymbol.valueDeclaration;
+          // the range of the definition, not of the defaultExportExpr,
+          // for the later one's start may be incorrect
+          const definitionRange = Range.create(
+            tsModule.getLineAndCharacterOfPosition(sourceFile, decalration.getStart()),
+            tsModule.getLineAndCharacterOfPosition(sourceFile, decalration.getEnd())
+          );
           result.push({
             name: componentName,
             documentation: buildDocumentation(tsModule, definitionObjectLiteralSymbol, checker),
             definition: {
               path: definitionObjectLiteralSymbol.valueDeclaration.getSourceFile().fileName,
-              start: defaultExportExpr.getStart(undefined, true),
-              end: defaultExportExpr.getEnd()
+              range: definitionRange
             },
             defaultExportExpr: getObjectLiteralExprFromExportExpr(tsModule, defaultExportExpr)
           });

server/src/modes/template/services/htmlDefinition.ts

@@ -23,12 +23,11 @@ export function findDefinition(
 
     if (vueFileInfo && vueFileInfo.componentInfo.childComponents) {
       for (const cc of vueFileInfo.componentInfo.childComponents) {
-        if (tag === cc.name) {
+        if (tag === cc.name.toLowerCase()) {
           if (cc.definition) {
             const loc: Location = {
               uri: URI.file(cc.definition.path).toString(),
-              // Todo: Resolve actual default export range
-              range: Range.create(0, 0, 0, 0)
+              range: cc.definition.range
             };
             return loc;
           }

server/src/services/vueInfoService.ts

@@ -1,4 +1,4 @@
-import { TextDocument } from 'vscode-languageserver';
+import { TextDocument, Range } from 'vscode-languageserver';
 import { getFileFsPath } from '../utils/paths';
 import { Definition } from 'vscode-languageserver-types';
 import { LanguageModes } from '../embeddedSupport/languageModes';
@@ -37,8 +37,7 @@ export interface ChildComponent {
   documentation?: string;
   definition?: {
     path: string;
-    start: number;
-    end: number;
+    range: Range;
   };
   info?: VueFileInfo;
 }

test/lsp/features/definition/basic.test.ts

@@ -12,22 +12,27 @@ describe('Should find definition', () => {
   });
 
   it('finds definition for this.msg', async () => {
-    await testDefinition(docUri, position(32, 23), sameLineLocation(docUri, 22, 6, 9));
+    await testDefinition(docUri, position(36, 23), sameLineLocation(docUri, 26, 6, 9));
   });
 
   it('finds definition for lodash', async () => {
     const lodashDtsUri = getDocUri('node_modules/@types/lodash/index.d.ts');
-    await testDefinition(docUri, position(16, 12), sameLineLocation(lodashDtsUri, 246, 12, 13));
+    await testDefinition(docUri, position(17, 12), sameLineLocation(lodashDtsUri, 246, 12, 13));
   });
 
   it('finds definition for Vue#data', async () => {
     const vueOptionsDtsUri = getDocUri('node_modules/vue/types/options.d.ts');
-    await testDefinition(docUri, position(20, 2), sameLineLocation(vueOptionsDtsUri, 73, 2, 6));
+    await testDefinition(docUri, position(24, 2), sameLineLocation(vueOptionsDtsUri, 73, 2, 6));
   });
 
   it('finds definition for imported Vue files', async () => {
-    const itemUri = getDocUri('definition/Basic.Item.vue');
-    await testDefinition(docUri, position(17, 7), location(itemUri, 5, 0, 7, 1));
+    const itemUri = getDocUri('client/definition/Basic.Item.vue');
+    await testDefinition(docUri, position(18, 7), location(itemUri, 5, 0, 7, 1));
+  });
+
+  it('finds definition for child component inside template region', async () => {
+    const itemUri = getDocUri('client/definition/Basic.Item.vue');
+    await testDefinition(docUri, position(12, 5), location(itemUri, 5, 0, 7, 1));
   });
 });
 

test/lsp/fixture/definition/Basic.vue

@@ -10,6 +10,7 @@
     <button @click="$store.commit('INCREMENT')">Increment</button>
     <button @click="$store.commit('DECREMENT')">Decrement</button>
     <button @click="$store.dispatch('incrementAsync')">Increment Async</button>
+    <Item />
   </div>
 </template>
 
@@ -18,6 +19,9 @@ import * as _ from 'lodash'
 import Item from './Basic.Item.vue'
 
 export default {
+  components: {
+    Item,
+  },
   data () {
     return {
       msg: 'Vetur means "Winter" in icelandic.'