vue-hook-optimizer 0.0.77 → 0.0.79
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +2016 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +109 -0
- package/dist/index.d.ts +82 -71
- package/dist/index.js +1874 -2442
- package/dist/index.js.map +1 -1
- package/package.json +11 -23
- package/README.md +0 -59
- package/dist/index.d.mts +0 -98
- package/dist/index.mjs +0 -2500
- package/dist/index.mjs.map +0 -1
- package/license +0 -1
package/package.json
CHANGED
@@ -1,6 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "vue-hook-optimizer",
|
3
|
-
"
|
3
|
+
"type": "module",
|
4
|
+
"version": "0.0.79",
|
4
5
|
"description": "a tool that helps refactor and optimize hook abstractions in Vue components",
|
5
6
|
"author": "zcf0508 <zcf0508@live.com>",
|
6
7
|
"license": "MIT",
|
@@ -17,12 +18,12 @@
|
|
17
18
|
"exports": {
|
18
19
|
".": {
|
19
20
|
"types": "./dist/index.d.ts",
|
20
|
-
"import": "./dist/index.
|
21
|
-
"require": "./dist/index.
|
21
|
+
"import": "./dist/index.js",
|
22
|
+
"require": "./dist/index.cjs"
|
22
23
|
}
|
23
24
|
},
|
24
|
-
"main": "./dist/index.
|
25
|
-
"module": "./dist/index.
|
25
|
+
"main": "./dist/index.cjs",
|
26
|
+
"module": "./dist/index.js",
|
26
27
|
"types": "./dist/index.d.ts",
|
27
28
|
"typesVersions": {
|
28
29
|
"*": {
|
@@ -43,41 +44,28 @@
|
|
43
44
|
"@vue/compiler-sfc": "^3.4.1"
|
44
45
|
},
|
45
46
|
"devDependencies": {
|
46
|
-
"@antfu/eslint-config": "^4.10.0",
|
47
47
|
"@babel/preset-typescript": "^7.24.1",
|
48
48
|
"@types/babel__core": "^7.20.5",
|
49
49
|
"@types/babel__traverse": "^7.20.5",
|
50
50
|
"@types/lodash-es": "^4.17.12",
|
51
51
|
"@types/node": "^20.12.7",
|
52
52
|
"@types/uuid": "^9.0.8",
|
53
|
-
"@vitest/coverage-istanbul": "^
|
54
|
-
"bumpp": "^9.4.1",
|
53
|
+
"@vitest/coverage-istanbul": "^3.2.4",
|
55
54
|
"cross-env": "^7.0.3",
|
56
|
-
"eslint": "^9.22.0",
|
57
|
-
"eslint-plugin-security": "^3.0.1",
|
58
55
|
"fast-glob": "^3.3.2",
|
59
56
|
"lodash-es": "^4.17.21",
|
60
57
|
"nodemon": "^3.1.0",
|
61
58
|
"ts-node": "^10.9.2",
|
62
|
-
"
|
59
|
+
"tsdown": "^0.14.2",
|
63
60
|
"typescript": "^5.4.5",
|
64
61
|
"vis-network": "^9.1.9",
|
65
|
-
"vitest": "^
|
66
|
-
"eslint-plugin-vue-hook-optimizer": "0.0.77"
|
62
|
+
"vitest": "^3.2.4"
|
67
63
|
},
|
68
64
|
"scripts": {
|
69
65
|
"dev": "nodemon",
|
70
|
-
"
|
71
|
-
"build": "tsup",
|
72
|
-
"build:ext": "npm -C packages/vscode run build",
|
73
|
-
"build:eslint": "npm -C packages/eslint run build",
|
74
|
-
"build:mcp": "npm -C packages/mcp run build",
|
75
|
-
"build:all": "npm run build && npm run build:eslint && npm run build:mcp && npm run build:ext",
|
76
|
-
"play": "npm -C packages/playground run dev",
|
77
|
-
"lint": "eslint .",
|
66
|
+
"build": "tsdown",
|
78
67
|
"test": "vitest",
|
79
68
|
"coverage": "vitest run --coverage",
|
80
|
-
"typecheck": "tsc --noEmit"
|
81
|
-
"release": "bumpp -r"
|
69
|
+
"typecheck": "tsc --noEmit"
|
82
70
|
}
|
83
71
|
}
|
package/README.md
DELETED
@@ -1,59 +0,0 @@
|
|
1
|
-
[](https://www.npmjs.com/package/vue-hook-optimizer)
|
2
|
-
<a href="https://marketplace.visualstudio.com/items?itemName=zcf0508.vue-hook-optimizer-ext" target="__blank"><img src="https://img.shields.io/visual-studio-marketplace/v/zcf0508.vue-hook-optimizer-ext.svg?color=eee&label=VS%20Code%20Marketplace&logo=visual-studio-code" alt="Visual Studio Marketplace Version" /></a>
|
3
|
-
|
4
|
-
[中文文档](./README_cn.md)
|
5
|
-
|
6
|
-
This is a tool to analyze your components code. It supports `Vue` and `React`. Viste [playground](vue-hook-optimizer.vercel.app/) or try the vscode extension [vue-hook-optimizer-ext](https://marketplace.visualstudio.com/items?itemName=zcf0508.vue-hook-optimizer-ext).
|
7
|
-
|
8
|
-
## Install And Run Playground
|
9
|
-
|
10
|
-
```bash
|
11
|
-
# clone the repo then install the dependencies
|
12
|
-
pnpm install
|
13
|
-
# run the playground
|
14
|
-
pnpm run play
|
15
|
-
```
|
16
|
-
|
17
|
-
Open the browser and visit `http://localhost:3000/`.
|
18
|
-
|
19
|
-
## How To Use
|
20
|
-
|
21
|
-
1. paste your component code into the editor
|
22
|
-
|
23
|
-
2. click `Analyze` button
|
24
|
-
|
25
|
-
The tool will analyze the code, and show the relations between the variables and the methods. This is a simple demo.
|
26
|
-
|
27
|
-

|
28
|
-
|
29
|
-
## Motive
|
30
|
-
|
31
|
-
Sometime we have to refactor the code, maybe there are thousands of lines of code in one file.
|
32
|
-
And it is too complex and hard to understand.
|
33
|
-
|
34
|
-
So I want to build a tool to help us analyze the code, and find the relations between the variables and the methods.
|
35
|
-
We can find out some variables are isolated, and some methods are over-association, and then we can refactor them.
|
36
|
-
|
37
|
-
## Development Plan
|
38
|
-
|
39
|
-
- [x] add more info, including the variable type, comment, whether has been used in template or hook methods
|
40
|
-
- [x] provide some suggestions for optimization
|
41
|
-
- [x] support `options api`
|
42
|
-
- [x] [vscode extension](./packages/vscode)
|
43
|
-
- [x] support `React`
|
44
|
-
- [x] eslint rules
|
45
|
-
- [x] mcp server
|
46
|
-
|
47
|
-
## Contribution
|
48
|
-
|
49
|
-
Any contributions are welcome.
|
50
|
-
|
51
|
-
## Sponsor Me
|
52
|
-
|
53
|
-
If you like this tool, please consider to sponsor me. I will keep working on this tool and add more features.
|
54
|
-
|
55
|
-

|
56
|
-
|
57
|
-
## License
|
58
|
-
|
59
|
-
MIT
|
package/dist/index.d.mts
DELETED
@@ -1,98 +0,0 @@
|
|
1
|
-
import { SFCStyleBlock } from '@vue/compiler-sfc';
|
2
|
-
export { parse } from '@vue/compiler-sfc';
|
3
|
-
import { Edge, Node } from 'vis-network';
|
4
|
-
|
5
|
-
interface TypedNode {
|
6
|
-
label: string;
|
7
|
-
type: NodeType;
|
8
|
-
info?: Partial<{
|
9
|
-
line: number;
|
10
|
-
column: number;
|
11
|
-
comment: string;
|
12
|
-
used: Set<string>;
|
13
|
-
}>;
|
14
|
-
}
|
15
|
-
declare enum NodeType {
|
16
|
-
var = "var",
|
17
|
-
fun = "fun"
|
18
|
-
}
|
19
|
-
type RelationType = 'get' | 'set' | 'call';
|
20
|
-
|
21
|
-
declare function analyze$4(content: string, lineOffset?: number, jsx?: boolean): {
|
22
|
-
graph: {
|
23
|
-
nodes: Set<TypedNode>;
|
24
|
-
edges: Map<TypedNode, Set<{
|
25
|
-
node: TypedNode;
|
26
|
-
type: RelationType;
|
27
|
-
}>>;
|
28
|
-
};
|
29
|
-
nodesUsedInTemplate: Set<string>;
|
30
|
-
};
|
31
|
-
|
32
|
-
declare function analyze$3(content: string, lineOffset?: number, jsx?: boolean): {
|
33
|
-
nodes: Set<TypedNode>;
|
34
|
-
edges: Map<TypedNode, Set<{
|
35
|
-
node: TypedNode;
|
36
|
-
type: RelationType;
|
37
|
-
}>>;
|
38
|
-
};
|
39
|
-
|
40
|
-
declare function analyze$2(styles: SFCStyleBlock[]): Set<string>;
|
41
|
-
|
42
|
-
declare function analyze$1(content: string): Set<string>;
|
43
|
-
|
44
|
-
declare function analyze(content: string, type?: "vue" | "react", lineOffset?: number, addInfo?: boolean): {
|
45
|
-
graph: {
|
46
|
-
nodes: Set<TypedNode>;
|
47
|
-
edges: Map<TypedNode, Set<{
|
48
|
-
node: TypedNode;
|
49
|
-
type: RelationType;
|
50
|
-
}>>;
|
51
|
-
};
|
52
|
-
nodesUsedInTemplate: Set<string>;
|
53
|
-
};
|
54
|
-
|
55
|
-
interface MermaidOptions {
|
56
|
-
direction?: 'TB' | 'BT' | 'LR' | 'RL';
|
57
|
-
}
|
58
|
-
declare function getMermaidText(graph: {
|
59
|
-
nodes: Set<TypedNode>;
|
60
|
-
edges: Map<TypedNode, Set<{
|
61
|
-
node: TypedNode;
|
62
|
-
type: RelationType;
|
63
|
-
}>>;
|
64
|
-
}, nodesUsedInTemplate: Set<string>, nodesUsedInStyle?: Set<string>, options?: MermaidOptions): string;
|
65
|
-
|
66
|
-
declare enum SuggestionType {
|
67
|
-
info = "info",
|
68
|
-
warning = "warning",
|
69
|
-
error = "error"
|
70
|
-
}
|
71
|
-
interface Suggestion {
|
72
|
-
type: SuggestionType;
|
73
|
-
message: string;
|
74
|
-
nodeInfo?: TypedNode | Array<TypedNode>;
|
75
|
-
}
|
76
|
-
declare function gen(graph: {
|
77
|
-
nodes: Set<TypedNode>;
|
78
|
-
edges: Map<TypedNode, Set<{
|
79
|
-
node: TypedNode;
|
80
|
-
type: RelationType;
|
81
|
-
}>>;
|
82
|
-
}, nodesUsedInTemplate: Set<string>, nodesUsedInStyle?: Set<string>): Suggestion[];
|
83
|
-
|
84
|
-
type CustomNode = Node & {
|
85
|
-
info: TypedNode['info'];
|
86
|
-
};
|
87
|
-
declare function getVisData(graph: {
|
88
|
-
nodes: Set<TypedNode>;
|
89
|
-
edges: Map<TypedNode, Set<{
|
90
|
-
node: TypedNode;
|
91
|
-
type: RelationType;
|
92
|
-
}>>;
|
93
|
-
}, nodesUsedInTemplate: Set<string>, nodesUsedInStyle?: Set<string>): {
|
94
|
-
nodes: CustomNode[];
|
95
|
-
edges: Edge[];
|
96
|
-
};
|
97
|
-
|
98
|
-
export { NodeType, type RelationType, type Suggestion, SuggestionType, type TypedNode, analyze$4 as analyzeOptions, analyze$3 as analyzeSetupScript, analyze$2 as analyzeStyle, analyze$1 as analyzeTemplate, analyze as analyzeTsx, gen, getMermaidText, getVisData };
|