feat: support typescript tech stack parse

CocaColf · CocaColf · commit 5debea38a455 · 2022-04-29T10:58:04.000+08:00
diff --git a/README.md b/README.md
@@ -42,12 +42,13 @@ Options:
 
 Configuration file:
 
-You can also write configuration file named `.coderflyrc`, mainly to simplify alias. Note: **It must be written in json form**.
+You can also write configuration file named `.coderflyrc.js`, mainly to simplify alias. 
 
 ```js
-// .coderflyrc
-{
-    "src": "./test",
+// .coderflyrc.js
+const path = require('path');
+module.exports = {
+    'src': path.resolve(process.cwd(), 'test'),
     // ...
 }
 ```
@@ -158,8 +159,8 @@ console.log(impacts);
 
 - [x] JavaScript
 - [x] Vue2
+- [x] TypeScript
 - [ ] Vue3
-- [ ] TypeScript
 
 ## how it works
 
diff --git a/bin/coderfly.js b/bin/coderfly.js
@@ -6,7 +6,7 @@ const ora = require('ora');
 const { diff, getAllFiles, getFuncTree, getImpacts } = require('../dist/index.js');
 const pkg = require('../package.json');
 const { CONFIG_FILENAME, TREE_FILE, REPORT_FILE } = require('../dist/const.js');
-const { parseAliasFromConfig, lookFileOrFolderUp } = require('../dist/utils/handle_config');
+const { lookFileOrFolderUp } = require('../dist/utils/handle_config');
 
 const newsBoy = ora();
 
@@ -32,8 +32,7 @@ program
                 let configFile = path.resolve(configFolder, CONFIG_FILENAME);
 
                 try {
-                    let config = JSON.parse(fs.readFileSync(configFile));
-                    alias = parseAliasFromConfig(config);
+                    alias = require(configFile);
                 } catch (error){
                     // do nothing
                 }
diff --git a/docs/README_CN.md b/docs/README_CN.md
@@ -40,12 +40,13 @@
 
 配置文件：
 
-你也可以编写 `.coderflyrc` 配置文件，这样更方便 alias 的书写。注意：**这个文件要编写为 json 形式**。
+你也可以编写 `.coderflyrc.js` 配置文件，这样更方便 alias 的书写。
 
 ```js
-// .coderflyrc
-{
-    "src": "./test",
+// .coderflyrc.js
+const path = require('path');
+module.exports = {
+    'src': path.resolve(process.cwd(), 'test'),
     // ...
 }
 ```
@@ -157,10 +158,10 @@ console.log(impacts);
 
 ## 支持
 
-- JavaScript
-- Vue2
+- [x] JavaScript
+- [x] Vue2
+- [x] TypeScript
 - [ ] Vue3
-- [ ] TypeScript
 
 ## 如何工作的
 
diff --git a/package.json b/package.json
@@ -31,6 +31,10 @@
   },
   "dependencies": {
     "@babel/parser": "^7.17.8",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-typescript": "^7.16.7",
     "@types/lodash-es": "^4.17.6",
     "commander": "^9.1.0",
     "enhanced-resolve": "^5.9.2",
diff --git a/src/const.ts b/src/const.ts
@@ -8,6 +8,6 @@ export const MUSTACHE_TAG_REG  = /\{\{((?:.|\n)+?)\}\}/g;
 
 export const TEXT_NODE_TYPES = [2, 3];
 
-export const CONFIG_FILENAME = '.coderflyrc';
+export const CONFIG_FILENAME = '.coderflyrc.js';
 export const TREE_FILE = path.resolve(process.cwd(), './file_tree.json');
 export const REPORT_FILE = path.resolve(process.cwd(), './impact_report.json');
diff --git a/src/impact.ts b/src/impact.ts
@@ -66,16 +66,16 @@ function findWhoCallMe (treeData: FileInfoTree, funcInfo: ImpactReason, reportIn
     const funcName = funcInfo.name;
     const curPaths = funcInfo.paths;
 
-    // these found functions are used to find the impact of template
-    const templateImpactSearchFunc: NameAndPath = {
-        [funcName]: curFilePath
-    };
-
     // because the mixin function is mixed into each file,it wil be found multiple times
     // so we need a set
     const set = new Set();
 
     for (const fileInfo in treeData) {
+        // these found functions are used to find the impact of template
+        const templateImpactSearchFunc: NameAndPath = {
+            [funcName]: curFilePath
+        };
+
         const allFuncsInfo = treeData[fileInfo].allFuncsInfo;
         const templateKeyInfo = treeData[fileInfo].templateKeyInfo;
 
@@ -101,6 +101,10 @@ function findWhoCallMe (treeData: FileInfoTree, funcInfo: ImpactReason, reportIn
 
                 templateImpactSearchFunc[func.name] = func.filePath;
             }
+
+            if (func.name === funcName && func.filePath === curFilePath) {
+                templateImpactSearchFunc[funcName] = curFilePath;
+            }
         });
 
         // find if the function in the paths is used in the template
diff --git a/src/utils/function_change/diff.ts b/src/utils/function_change/diff.ts
@@ -2,7 +2,8 @@ import * as fs from 'fs';
 import * as path from 'path';
 import { commandSync } from 'execa';
 import lineByLine from 'n-readlines';
-import { parse, visit } from 'recast';
+import { visit } from 'recast';
+import { parse } from '@babel/parser';
 import { parseComponent } from 'vue-template-compiler';
 import { DiffFunctionInfo, FunctionInfo } from '../../type';
 
@@ -70,7 +71,13 @@ function getFunctionBlock (filePath: string) {
 
     try {
         ast = parse(code, {
-            parser: require('recast/parsers/babel'),
+            plugins: [
+                'decorators-legacy',
+                'typescript',
+                'classProperties',
+                'objectRestSpread'
+            ],
+            sourceType: 'unambiguous'
         });
     } catch (error) {
         console.log(error);
diff --git a/src/utils/handle_file_utils.ts b/src/utils/handle_file_utils.ts
@@ -1,6 +1,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import { parse, visit } from 'recast';
+import { visit } from 'recast';
+import { parse } from '@babel/parser';
 import { parseComponent, compile } from 'vue-template-compiler';
 import lineByLine from 'n-readlines';
 import { ALLOW_EXT, IS_TOP_SCOPE, UN_KNOWN } from '../const.js';
@@ -187,8 +188,15 @@ function getFileAst (filePath: string): FileAstInfo {
 
     try {
         jsAst = parse(fileCtx, {
-            parser: require('recast/parsers/babel')
+            plugins: [
+                'decorators-legacy',
+                'typescript',
+                'classProperties',
+                'objectRestSpread'
+            ],
+            sourceType: 'unambiguous'
         });
+
         templateAst = compile(templateCtx);
     } catch (error) {
         console.log(`ast解析错误：${filePath}`);
@@ -239,8 +247,14 @@ function getAllFunctions (jsAst: any, filePath: string, vueScriptStartLine: numb
 
         // handle: function test () {}
         visitFunctionDeclaration(node) {
-            let name = node.value.id.name;
+            let name = '';
             let position!: string;
+
+            if (!node.value.id) {
+                name = '[Anonymous]'
+            } else {
+                name = node.value.id.name;
+            }
             
             // this means this function is called directly in the js file,not in a function block
             if (name === '') {
diff --git a/yarn.lock b/yarn.lock
