Skip to content

Commit ef42cf5

Browse files
CocaColfCocaColf
committed
add: add README and other docs
1 parent e83b933 commit ef42cf5

File tree

6 files changed

+282
-0
lines changed

6 files changed

+282
-0
lines changed

‎README.md

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
English | [中文](./docs/README_CN.md)
2+
3+
## coderfly
4+
5+
Find function-level association impacts of code changes.
6+
7+
## Background
8+
9+
When you modify the code of a large project, it may not be very clear whether it will have an impact on the functionality.Our self-test may not be enough, and we need to search a lot of related code to determine the impact of the change. Wouldn't it save a lot of time and improve the quality of self-testing if there was a tool that could identify your changes and automatically find out what you affected by the change? That's the problem this project is trying to solve.
10+
11+
It can analyze the changes of the function by the changes of the file.
12+
13+
![function change](./docs/pics/function_change.png)
14+
15+
Then we analyze the impact of this function from the whole project. From the picture blow(a part of the result), we can see that this function is called by `jumpToAppStore` and affects the click event bound to a dom node of `header.vue`.
16+
17+
![result](./docs/pics/impacts.png)
18+
19+
You can check [how it works](#how-it-works) from here.
20+
21+
## Install
22+
23+
This project is still under development and has not been published to the npm yet. So you can use the built files for now.
24+
25+
- `clone` this project
26+
- `yarn install`
27+
- `yarn build`
28+
29+
## Usage
30+
31+
**Using the API**
32+
33+
see the [API](#api) or [Example](#example).
34+
35+
**Using the command line**
36+
37+
> Not yet finished
38+
39+
- [ ] Using command line: `cci check <folder path>`
40+
41+
## API
42+
43+
### diff
44+
45+
Get the changes of the function by the changes of the file.
46+
47+
If you changed `test/a.js`, you can get the following result by diff.
48+
49+
```js
50+
{
51+
file: 'test/a.js',
52+
changed: ['getSum'],
53+
added: [],
54+
deleted: ['getData'],
55+
total: ['getSum', 'getData']
56+
}
57+
```
58+
59+
### getAllFiles
60+
61+
Get all files from source code, filter by default for non-`.vue`、`.js`、`.ts` files.
62+
63+
**Params**
64+
65+
- folderPath: string. It's source code folder path.
66+
67+
### getFuncTree
68+
69+
Analyze the project and build a 「file tree」.
70+
71+
**Params**
72+
73+
- files: string[]. All the files from folder path
74+
- options: Options
75+
76+
```ts
77+
interface Options {
78+
alias?: {
79+
[aliasName: string]: string // alias name and path
80+
};
81+
}
82+
```
83+
84+
### getImpacts**
85+
86+
Get the impact of changes.
87+
88+
**Params**
89+
90+
- treeData: FileInfoTree. It's file tree.
91+
- funcInfo: ImpactReason. It's the entry function that we get by diff.
92+
93+
```ts
94+
interface ImpactReason {
95+
filePath: string;
96+
name: string;
97+
}
98+
```
99+
100+
## Example
101+
102+
```js
103+
import { diff, getAllFiles, getFuncTree, getImpacts } from "coderfly";
104+
105+
// diff
106+
const functionDiffInfo = diff();
107+
108+
// get all files
109+
const files = getAllFiles(path.resolve(process.cwd(), targetDir));
110+
111+
// build file tree
112+
const tree = getFuncTree(files, {
113+
alias: {
114+
src: path.resolve(process.cwd(), './demo/vue')
115+
}
116+
});
117+
118+
// get impacts
119+
// here is just a example, in the real word the second argument needs constructed using the result of diff()
120+
let impacts = getImpacts(tree, {
121+
filePath: 'src/utils/a.js',
122+
name: 'getSum'
123+
});
124+
125+
console.log(impacts);
126+
```
127+
128+
## Support
129+
130+
- [x] JavaScript
131+
- [x] Vue2
132+
- [ ] Vue3
133+
- [ ] TypeScript
134+
135+
## how it works
136+
137+
![how it works](./docs/pics/how_it_works_en.png)
138+
139+
## License
140+
141+
MIT License

‎docs/README_CN.md

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
[English](../README.md) | 中文
2+
3+
## coderfly
4+
5+
函数级别的代码改动关联影响分析
6+
7+
## 背景
8+
9+
当我们修改一个大型项目的代码时，也许不是很清楚它是否会对其他模块产生影响。我们的自测可能会出现漏测，而且需要搜索许多相关代码来判断改动影响。如果有个工具，它可以识别你的修改，自动的给你找出你这个修改影响了哪些地方，是不是可以节省很多时间同时也提高自测质量呢？这就是这个项目想要解决的问题。
10+
11+
它可以通过文件的改动，分析函数的变化情况。
12+
13+
![函数变更](./pics/function_change.png)
14+
15+
然后从整个项目中分析出该函数的影响面，从下图（结果的部分截取）中可以看出这个函数被 jumpToAppStore 所调用，影响了 header.vue 中的某个 dom 节点绑定的 click 事件。
16+
17+
![结果](./pics/impacts.png)
18+
19+
你可以从这里查看[#如何工作的](它是如何工作)的。
20+
21+
## 安装
22+
23+
该项目还在开发中，暂时未发布到 npm 平台，因此无法使用 npm 进行安装。可以先使用打包后的文件。
24+
25+
- `clone` 本项目
26+
- `yarn install`
27+
- `yarn build`
28+
29+
## 使用
30+
31+
**使用 API**
32+
33+
可以参考 [#api](API) 或者[#示例](示例代码)
34+
35+
**使用命令行**
36+
37+
> 当前还未实现
38+
39+
- [ ] 使用命令行 `cci check <folder path>`
40+
41+
## API
42+
43+
### diff
44+
45+
根据本地文件变动，输出函数修改情况。
46+
47+
假如修改了 `test/a.js`，通过 diff 可以获得下面的结果
48+
49+
```js
50+
{
51+
file: 'test/a.js',
52+
changed: ['getSum'],
53+
added: [],
54+
deleted: ['getData'],
55+
total: ['getSum', 'getData']
56+
}
57+
```
58+
59+
### getAllFiles
60+
61+
获取项目所有文件，默认过滤非 `.vue`、`.js`、`.ts` 文件
62+
63+
**Params**
64+
65+
- folderPath: string，源码文件夹路径
66+
67+
### getFuncTree
68+
69+
分析项目文件，构建「文件树」
70+
71+
**Params**
72+
73+
- files: string[], 所有源码文件
74+
- options: Options, 配置
75+
76+
```ts
77+
interface Options {
78+
alias?: {
79+
[aliasName: string]: string // alias name and path
80+
};
81+
}
82+
```
83+
84+
### getImpacts
85+
86+
分析改动影响
87+
88+
**Params**
89+
90+
- treeData: FileInfoTree, 文件树数据
91+
- funcInfo: ImpactReason, 被搜索的入口函数
92+
93+
```ts
94+
interface ImpactReason {
95+
filePath: string;
96+
name: string;
97+
}
98+
```
99+
100+
## 示例
101+
102+
```js
103+
import { diff, getAllFiles, getFuncTree, getImpacts } from "coderfly";
104+
105+
// diff
106+
const functionDiffInfo = diff();
107+
108+
// 获取所有文件信息
109+
const files = getAllFiles(path.resolve(process.cwd(), targetDir));
110+
111+
// 构建文件树
112+
const tree = getFuncTree(files, {
113+
alias: {
114+
src: path.resolve(process.cwd(), './demo/vue')
115+
}
116+
});
117+
118+
// 输出改动影响
119+
// 这里使用一个示例来说明，真实情况下需要使用 diff() 的返回结果来构造 getImpacts 的第二个参数
120+
let impacts = getImpacts(tree, {
121+
filePath: 'src/utils/a.js',
122+
name: 'getSum'
123+
});
124+
125+
console.log(impacts);
126+
```
127+
128+
## 支持
129+
130+
- JavaScript
131+
- Vue2
132+
- [ ] Vue3
133+
- [ ] TypeScript
134+
135+
## 如何工作的
136+
137+
![如何工作的](./pics/how_it_works_cn.png)
138+
139+
## 协议
140+
141+
MIT License

‎docs/pics/function_change.png

3.66 KB
Loading

‎docs/pics/how_it_works_cn.png

31.4 KB
Loading

‎docs/pics/how_it_works_en.png

35.2 KB
Loading

‎docs/pics/impacts.png

40.5 KB
Loading

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy