Merge pull request #6 from jackkoppa/fix/alias-import-resolution

fix (#5): Reference computed Vue CLI Webpack config, when available, for import aliases

package.json

@@ -34,6 +34,7 @@
   "devDependencies": {
     "@types/jest": "^24.0.18",
     "@types/node": "^12.7.5",
+    "@types/webpack": "^4.41.1",
     "@typescript-eslint/eslint-plugin": "^2.3.0",
     "@typescript-eslint/parser": "^2.3.0",
     "@zeplin/cli": "^0.3.1",

src/index.ts

@@ -1,22 +1,36 @@
 import { ConnectPlugin, ComponentConfig, ComponentData, PrismLang } from "@zeplin/cli"
 import { paramCase } from "param-case";
 import { pascalCase } from "pascal-case";
-import { parse, ComponentDoc } from 'vue-docgen-api'
 import path from "path";
+import { parse, ComponentDoc, DocGenOptions } from 'vue-docgen-api'
+import { Configuration } from 'webpack'
+
 
 export default class implements ConnectPlugin {
     supportedFileExtensions = [".vue"]
 
+    docgenOptions: DocGenOptions = {}
+
     supports(context: ComponentConfig): boolean {
        const fileExtension = path.extname(context.path);
 
        return this.supportedFileExtensions.includes(fileExtension);
     }
 
+    init(): Promise<void> {
+      const webpackConfig = this.attemptToRetrieveVueCliProjectWebpackConfig()
+      if (webpackConfig && webpackConfig.resolve && webpackConfig.resolve.alias) {
+        this.docgenOptions = {
+          alias: webpackConfig.resolve.alias
+        }
+      }
+      return Promise.resolve()
+    }
+
     async process(context: ComponentConfig): Promise<ComponentData> {
        const lang = PrismLang.HTML
-       
-       const componentInfo = await parse(context.path)
+
+       const componentInfo = await parse(context.path, this.docgenOptions)
 
        const { description, displayName } = componentInfo
 
@@ -31,10 +45,31 @@ export default class implements ConnectPlugin {
        return { description, snippet, lang };
     }
 
+    /** 
+     * Note: If we eventually want to support aliases from non-Vue CLI projects,
+     * we'll likely want to add a test for this and other methods to retrieve those aliases
+     * For now, it's not worth the effort to setup & maintain an entire dummy Vue CLI project,
+     * with the relevant vue.config.js
+     */
+    attemptToRetrieveVueCliProjectWebpackConfig(): Configuration {
+      let webpackConfig
+      try {
+        // Documentation on how @vue/cli resolves the Webpack config for this file: 
+        // https://cli.vuejs.org/guide/webpack.html#using-resolved-config-as-a-file
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const vueCliWebpackConfig = require('@vue/cli-service/webpack.config.js')
+
+        webpackConfig = vueCliWebpackConfig
+      } catch {
+        console.log('Did not resolve webpack config for Vue CLI project; proceeding without aliases for parsing components')
+      }
+      return webpackConfig
+    } 
+
     getPropLines(componentInfo: ComponentDoc): string[] {
       return componentInfo.props && componentInfo.props.map(prop => 
         `${paramCase(prop.name)}="${prop.type && prop.type.name || 'unknown'}"`
-    ) || []
+      ) || []
     }
 
     getSlotLines(componentInfo: ComponentDoc): string[] {