Add support for analyzing vue-class-component and vue-property-decorator

CHANGELOG.md

@@ -11,6 +11,7 @@
 - Linkify all vue/vue-router tags to their API doc. #2133.
 - Component Data - `type: 'boolean'` should trigger completion without `=""`. #2127.
 - Component Data doesn't work if it comes from devDependencies. #2132.
+- 🙌 Add support for analyzing vue-class-component and vue-property-decorator. Thanks to contribution from [@yoyo930021](https://github.com/yoyo930021). #864, #1105 and #1323.
 
 ### 0.26.1 | 2020-08-07 | [VSIX](https://marketplace.visualstudio.com/_apis/public/gallery/publishers/octref/vsextensions/vetur/0.26.1/vspackage)
 

server/src/modes/script/childComponents.ts

@@ -1,5 +1,11 @@
 import * as ts from 'typescript';
-import { getLastChild, buildDocumentation, getDefaultExportObjectLiteralExpr } from './componentInfo';
+import {
+  getLastChild,
+  buildDocumentation,
+  getDefaultExportNode,
+  getClassDecoratorArgumentType,
+  isClassType
+} from './componentInfo';
 import { T_TypeScript } from '../../services/dependencyService';
 import { kebabCase } from 'lodash';
 
@@ -11,7 +17,7 @@ interface InternalChildComponent {
     start: number;
     end: number;
   };
-  defaultExportExpr?: ts.Node;
+  defaultExportNode?: ts.Node;
 }
 
 export function getChildComponents(
@@ -20,7 +26,19 @@ export function getChildComponents(
   checker: ts.TypeChecker,
   tagCasing = 'kebab'
 ): InternalChildComponent[] | undefined {
-  const componentsSymbol = checker.getPropertyOfType(defaultExportType, 'components');
+  let componentsSymbol: ts.Symbol | undefined;
+
+  if (!isClassType(tsModule, defaultExportType)) {
+    componentsSymbol = checker.getPropertyOfType(defaultExportType, 'components');
+  } else {
+    // get decorator argument type when class
+    const classDecoratorArgumentType = getClassDecoratorArgumentType(tsModule, defaultExportType, checker);
+    if (!classDecoratorArgumentType) {
+      return undefined;
+    }
+    componentsSymbol = checker.getPropertyOfType(classDecoratorArgumentType, 'components');
+  }
+
   if (!componentsSymbol || !componentsSymbol.valueDeclaration) {
     return undefined;
   }
@@ -57,27 +75,25 @@ export function getChildComponents(
       }
 
       if (objectLiteralSymbol.flags & tsModule.SymbolFlags.Alias) {
-        const definitionObjectLiteralSymbol = checker.getAliasedSymbol(objectLiteralSymbol);
-        if (definitionObjectLiteralSymbol.valueDeclaration) {
-          const defaultExportExpr = getDefaultExportObjectLiteralExpr(
-            tsModule,
-            definitionObjectLiteralSymbol.valueDeclaration.getSourceFile()
-          );
-          if (!defaultExportExpr) {
-            return;
-          }
-
-          result.push({
-            name: componentName,
-            documentation: buildDocumentation(tsModule, definitionObjectLiteralSymbol, checker),
-            definition: {
-              path: definitionObjectLiteralSymbol.valueDeclaration.getSourceFile().fileName,
-              start: defaultExportExpr.getStart(undefined, true),
-              end: defaultExportExpr.getEnd()
-            },
-            defaultExportExpr
-          });
+        const definitionSymbol = checker.getAliasedSymbol(objectLiteralSymbol);
+        if (!definitionSymbol.valueDeclaration) {
+          return;
+        }
+        const sourceFile = definitionSymbol.valueDeclaration.getSourceFile();
+        const defaultExportNode = getDefaultExportNode(tsModule, sourceFile);
+        if (!defaultExportNode) {
+          return;
         }
+        result.push({
+          name: componentName,
+          documentation: buildDocumentation(tsModule, definitionSymbol, checker),
+          definition: {
+            path: sourceFile.fileName,
+            start: defaultExportNode.getStart(sourceFile, true),
+            end: defaultExportNode.getEnd()
+          },
+          defaultExportNode
+        });
       }
     });