vue-hook-optimizer 0.0.10 → 0.0.11
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +3 -3
- package/dist/index.d.mts +38 -6
- package/dist/index.d.ts +38 -6
- package/dist/index.js +76 -10
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +76 -10
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
@@ -21,11 +21,11 @@ Open the browser and visit `http://localhost:3000/`.
|
|
21
21
|
|
22
22
|
1. paste your `vue` code into the editor
|
23
23
|
|
24
|
-
Up to now, it only supports the code with `<script setup>` syntax block.If your code use `options api`, it's not working at the moment
|
24
|
+
~~Up to now, it only supports the code with `<script setup>` syntax block.If your code use `options api`, it's not working at the moment.~~
|
25
25
|
|
26
26
|
2. click `Analyze` button
|
27
27
|
|
28
|
-
The tool will analyze the
|
28
|
+
The tool will analyze the code, and show the relations between the variables and the methods. This is a simple demo.
|
29
29
|
|
30
30
|
![demo](./images/demo1.png)
|
31
31
|
|
@@ -37,7 +37,7 @@ So I want to build a tool to help us analyze the code, and find the relations be
|
|
37
37
|
|
38
38
|
## Development Plan
|
39
39
|
|
40
|
-
- [ ] add node type and more info
|
40
|
+
- [ ] add ~~node type~~ (has added `var` and `fun` types) and more info
|
41
41
|
- [ ] provide some suggestions for optimization
|
42
42
|
- [x] support `options api`
|
43
43
|
- [x] [vscode extension](./packages/vscode)
|
package/dist/index.d.mts
CHANGED
@@ -3,19 +3,51 @@ import * as vis_network from 'vis-network';
|
|
3
3
|
|
4
4
|
declare function analyze$2(content: string): Set<string>;
|
5
5
|
|
6
|
+
declare enum NodeType {
|
7
|
+
var = "var",
|
8
|
+
fun = "fun"
|
9
|
+
}
|
10
|
+
|
6
11
|
declare function analyze$1(content: string): {
|
7
|
-
nodes: Set<
|
8
|
-
|
12
|
+
nodes: Set<{
|
13
|
+
label: string;
|
14
|
+
type: NodeType;
|
15
|
+
}>;
|
16
|
+
edges: Map<{
|
17
|
+
label: string;
|
18
|
+
type: NodeType;
|
19
|
+
}, Set<{
|
20
|
+
label: string;
|
21
|
+
type: NodeType;
|
22
|
+
}>>;
|
9
23
|
};
|
10
24
|
|
11
25
|
declare function analyze(content: string): {
|
12
|
-
nodes: Set<
|
13
|
-
|
26
|
+
nodes: Set<{
|
27
|
+
label: string;
|
28
|
+
type: NodeType;
|
29
|
+
}>;
|
30
|
+
edges: Map<{
|
31
|
+
label: string;
|
32
|
+
type: NodeType;
|
33
|
+
}, Set<{
|
34
|
+
label: string;
|
35
|
+
type: NodeType;
|
36
|
+
}>>;
|
14
37
|
};
|
15
38
|
|
16
39
|
declare function getVisData(graph: {
|
17
|
-
nodes: Set<
|
18
|
-
|
40
|
+
nodes: Set<{
|
41
|
+
label: string;
|
42
|
+
type: string;
|
43
|
+
}>;
|
44
|
+
edges: Map<{
|
45
|
+
label: string;
|
46
|
+
type: string;
|
47
|
+
}, Set<{
|
48
|
+
label: string;
|
49
|
+
type: string;
|
50
|
+
}>>;
|
19
51
|
}, usedNodes: Set<string>): {
|
20
52
|
nodes: vis_network.Node[];
|
21
53
|
edges: vis_network.Edge[];
|
package/dist/index.d.ts
CHANGED
@@ -3,19 +3,51 @@ import * as vis_network from 'vis-network';
|
|
3
3
|
|
4
4
|
declare function analyze$2(content: string): Set<string>;
|
5
5
|
|
6
|
+
declare enum NodeType {
|
7
|
+
var = "var",
|
8
|
+
fun = "fun"
|
9
|
+
}
|
10
|
+
|
6
11
|
declare function analyze$1(content: string): {
|
7
|
-
nodes: Set<
|
8
|
-
|
12
|
+
nodes: Set<{
|
13
|
+
label: string;
|
14
|
+
type: NodeType;
|
15
|
+
}>;
|
16
|
+
edges: Map<{
|
17
|
+
label: string;
|
18
|
+
type: NodeType;
|
19
|
+
}, Set<{
|
20
|
+
label: string;
|
21
|
+
type: NodeType;
|
22
|
+
}>>;
|
9
23
|
};
|
10
24
|
|
11
25
|
declare function analyze(content: string): {
|
12
|
-
nodes: Set<
|
13
|
-
|
26
|
+
nodes: Set<{
|
27
|
+
label: string;
|
28
|
+
type: NodeType;
|
29
|
+
}>;
|
30
|
+
edges: Map<{
|
31
|
+
label: string;
|
32
|
+
type: NodeType;
|
33
|
+
}, Set<{
|
34
|
+
label: string;
|
35
|
+
type: NodeType;
|
36
|
+
}>>;
|
14
37
|
};
|
15
38
|
|
16
39
|
declare function getVisData(graph: {
|
17
|
-
nodes: Set<
|
18
|
-
|
40
|
+
nodes: Set<{
|
41
|
+
label: string;
|
42
|
+
type: string;
|
43
|
+
}>;
|
44
|
+
edges: Map<{
|
45
|
+
label: string;
|
46
|
+
type: string;
|
47
|
+
}, Set<{
|
48
|
+
label: string;
|
49
|
+
type: string;
|
50
|
+
}>>;
|
19
51
|
}, usedNodes: Set<string>): {
|
20
52
|
nodes: vis_network.Node[];
|
21
53
|
edges: vis_network.Edge[];
|
package/dist/index.js
CHANGED
@@ -86273,11 +86273,58 @@ function analyze(content) {
|
|
86273
86273
|
|
86274
86274
|
// src/analyze/setupScript.ts
|
86275
86275
|
var import_traverse2 = __toESM(require_lib13());
|
86276
|
+
|
86277
|
+
// src/analyze/utils.ts
|
86278
|
+
var NodeCollection = class {
|
86279
|
+
nodes = /* @__PURE__ */ new Map();
|
86280
|
+
addNode(label, node2, isComputed = false) {
|
86281
|
+
if (this.nodes.has(label)) {
|
86282
|
+
return;
|
86283
|
+
}
|
86284
|
+
if (!isComputed && (node2.type === "VariableDeclarator" && [
|
86285
|
+
"ArrowFunctionExpression",
|
86286
|
+
"FunctionDeclaration"
|
86287
|
+
].includes(node2.init?.type || "") || node2.type === "FunctionDeclaration" || node2.type === "ObjectMethod")) {
|
86288
|
+
this.nodes.set(label, {
|
86289
|
+
label,
|
86290
|
+
type: "fun" /* fun */
|
86291
|
+
});
|
86292
|
+
} else {
|
86293
|
+
this.nodes.set(label, {
|
86294
|
+
label,
|
86295
|
+
type: "var" /* var */
|
86296
|
+
});
|
86297
|
+
}
|
86298
|
+
}
|
86299
|
+
addTypedNode(label, type) {
|
86300
|
+
this.nodes.set(label, {
|
86301
|
+
label,
|
86302
|
+
type
|
86303
|
+
});
|
86304
|
+
}
|
86305
|
+
map(graph) {
|
86306
|
+
const nodes = new Set(Array.from(graph.nodes).map((node2) => {
|
86307
|
+
return this.nodes.get(node2);
|
86308
|
+
}));
|
86309
|
+
const edges = new Map(Array.from(graph.edges).map(([from2, to]) => {
|
86310
|
+
return [this.nodes.get(from2), new Set(Array.from(to).map((node2) => {
|
86311
|
+
return this.nodes.get(node2);
|
86312
|
+
}))];
|
86313
|
+
}));
|
86314
|
+
return {
|
86315
|
+
nodes,
|
86316
|
+
edges
|
86317
|
+
};
|
86318
|
+
}
|
86319
|
+
};
|
86320
|
+
|
86321
|
+
// src/analyze/setupScript.ts
|
86276
86322
|
var traverse2 = (
|
86277
86323
|
//@ts-ignore
|
86278
86324
|
import_traverse2.default.default?.default || import_traverse2.default.default || import_traverse2.default
|
86279
86325
|
);
|
86280
86326
|
function processSetup(ast, parentScope, parentPath) {
|
86327
|
+
const nodeCollection = new NodeCollection();
|
86281
86328
|
const graph = {
|
86282
86329
|
nodes: /* @__PURE__ */ new Set(),
|
86283
86330
|
edges: /* @__PURE__ */ new Map()
|
@@ -86292,6 +86339,7 @@ function processSetup(ast, parentScope, parentPath) {
|
|
86292
86339
|
const binding2 = path2.scope.getBinding(name);
|
86293
86340
|
if (binding2 && (path2.parent.type === "Program" || parentPath?.type === "ObjectMethod" && parentPath.body === path2.parent) && !(declaration2.init?.type === "CallExpression" && declaration2.init?.callee.type === "Identifier" && ["defineProps", "defineEmits"].includes(declaration2.init?.callee.name))) {
|
86294
86341
|
graph.nodes.add(name);
|
86342
|
+
nodeCollection.addNode(name, declaration2);
|
86295
86343
|
if (!graph.edges.get(name)) {
|
86296
86344
|
graph.edges.set(name, /* @__PURE__ */ new Set());
|
86297
86345
|
}
|
@@ -86306,6 +86354,7 @@ function processSetup(ast, parentScope, parentPath) {
|
|
86306
86354
|
const binding2 = path2.scope.getBinding(name);
|
86307
86355
|
if (binding2 && (path2.parent.type === "Program" || parentPath?.type === "ObjectMethod" && parentPath.body === path2.parent) && !(declaration2.init?.type === "CallExpression" && declaration2.init?.callee.type === "Identifier" && ["defineProps", "defineEmits"].includes(declaration2.init?.callee.name))) {
|
86308
86356
|
graph.nodes.add(name);
|
86357
|
+
nodeCollection.addNode(name, declaration2);
|
86309
86358
|
if (!graph.edges.get(name)) {
|
86310
86359
|
graph.edges.set(name, /* @__PURE__ */ new Set());
|
86311
86360
|
}
|
@@ -86318,6 +86367,7 @@ function processSetup(ast, parentScope, parentPath) {
|
|
86318
86367
|
const binding2 = path2.scope.getBinding(name);
|
86319
86368
|
if (binding2 && (path2.parent.type === "Program" || parentPath?.type === "ObjectMethod" && parentPath.body === path2.parent) && !(declaration2.init?.type === "CallExpression" && declaration2.init?.callee.type === "Identifier" && ["defineProps", "defineEmits"].includes(declaration2.init?.callee.name))) {
|
86320
86369
|
graph.nodes.add(name);
|
86370
|
+
nodeCollection.addNode(name, declaration2);
|
86321
86371
|
if (!graph.edges.get(name)) {
|
86322
86372
|
graph.edges.set(name, /* @__PURE__ */ new Set());
|
86323
86373
|
}
|
@@ -86331,6 +86381,7 @@ function processSetup(ast, parentScope, parentPath) {
|
|
86331
86381
|
const binding2 = path2.scope.getBinding(name);
|
86332
86382
|
if (binding2 && (path2.parent.type === "Program" || parentPath?.type === "ObjectMethod" && parentPath.body === path2.parent)) {
|
86333
86383
|
graph.nodes.add(name);
|
86384
|
+
nodeCollection.addNode(name, path2.node);
|
86334
86385
|
if (!graph.edges.get(name)) {
|
86335
86386
|
graph.edges.set(name, /* @__PURE__ */ new Set());
|
86336
86387
|
}
|
@@ -86408,7 +86459,10 @@ function processSetup(ast, parentScope, parentPath) {
|
|
86408
86459
|
}
|
86409
86460
|
}
|
86410
86461
|
}, parentScope, parentPath);
|
86411
|
-
return
|
86462
|
+
return {
|
86463
|
+
graph,
|
86464
|
+
nodeCollection
|
86465
|
+
};
|
86412
86466
|
}
|
86413
86467
|
function analyze2(content) {
|
86414
86468
|
const ast = parse_1$1(content, {
|
@@ -86417,7 +86471,8 @@ function analyze2(content) {
|
|
86417
86471
|
"typescript"
|
86418
86472
|
]
|
86419
86473
|
});
|
86420
|
-
|
86474
|
+
const { graph, nodeCollection } = processSetup(ast);
|
86475
|
+
return nodeCollection.map(graph);
|
86421
86476
|
}
|
86422
86477
|
|
86423
86478
|
// src/analyze/options.ts
|
@@ -86433,6 +86488,7 @@ function analyze3(content) {
|
|
86433
86488
|
"typescript"
|
86434
86489
|
]
|
86435
86490
|
});
|
86491
|
+
const nodeCollection = new NodeCollection();
|
86436
86492
|
const graph = {
|
86437
86493
|
nodes: /* @__PURE__ */ new Set(),
|
86438
86494
|
edges: /* @__PURE__ */ new Map()
|
@@ -86449,6 +86505,7 @@ function analyze3(content) {
|
|
86449
86505
|
if (prop.key.type === "Identifier") {
|
86450
86506
|
const name = prop.key.name;
|
86451
86507
|
graph.nodes.add(name);
|
86508
|
+
nodeCollection.addNode(name, prop, true);
|
86452
86509
|
if (!graph.edges.get(name)) {
|
86453
86510
|
graph.edges.set(name, /* @__PURE__ */ new Set());
|
86454
86511
|
}
|
@@ -86465,6 +86522,7 @@ function analyze3(content) {
|
|
86465
86522
|
if (prop.key.type === "Identifier") {
|
86466
86523
|
const name = prop.key.name;
|
86467
86524
|
graph.nodes.add(name);
|
86525
|
+
nodeCollection.addNode(name, prop);
|
86468
86526
|
if (!graph.edges.get(name)) {
|
86469
86527
|
graph.edges.set(name, /* @__PURE__ */ new Set());
|
86470
86528
|
}
|
@@ -86480,8 +86538,11 @@ function analyze3(content) {
|
|
86480
86538
|
if (path1.node.key.type === "Identifier" && path1.node.key.name === "setup") {
|
86481
86539
|
const setupNode = path1.node;
|
86482
86540
|
const {
|
86483
|
-
|
86484
|
-
|
86541
|
+
graph: {
|
86542
|
+
nodes: tempNodes,
|
86543
|
+
edges: tempEdges
|
86544
|
+
},
|
86545
|
+
nodeCollection: tempNodeCollection
|
86485
86546
|
} = processSetup(setupNode, path1.scope, setupNode);
|
86486
86547
|
traverse3(setupNode, {
|
86487
86548
|
ReturnStatement(path22) {
|
@@ -86495,6 +86556,7 @@ function analyze3(content) {
|
|
86495
86556
|
const valName = path3.node.value.type === "Identifier" ? path3.node.value.name : "";
|
86496
86557
|
if (valName && tempNodes.has(valName)) {
|
86497
86558
|
graph.nodes.add(name);
|
86559
|
+
nodeCollection.addTypedNode(name, tempNodeCollection.nodes.get(valName).type);
|
86498
86560
|
if (!graph.edges.get(name)) {
|
86499
86561
|
graph.edges.set(name, /* @__PURE__ */ new Set());
|
86500
86562
|
tempEdges.get(valName)?.forEach((edge) => {
|
@@ -86523,6 +86585,7 @@ function analyze3(content) {
|
|
86523
86585
|
if (prop.key.type === "Identifier") {
|
86524
86586
|
const name = prop.key.name;
|
86525
86587
|
graph.nodes.add(name);
|
86588
|
+
nodeCollection.addNode(name, prop);
|
86526
86589
|
if (!graph.edges.get(name)) {
|
86527
86590
|
graph.edges.set(name, /* @__PURE__ */ new Set());
|
86528
86591
|
}
|
@@ -86601,7 +86664,7 @@ function analyze3(content) {
|
|
86601
86664
|
}
|
86602
86665
|
}
|
86603
86666
|
});
|
86604
|
-
return graph;
|
86667
|
+
return nodeCollection.map(graph);
|
86605
86668
|
}
|
86606
86669
|
|
86607
86670
|
// src/vis.ts
|
@@ -86610,16 +86673,19 @@ function getVisData(graph, usedNodes) {
|
|
86610
86673
|
const edges = [];
|
86611
86674
|
graph.nodes.forEach((node2) => {
|
86612
86675
|
nodes.push({
|
86613
|
-
id: node2,
|
86614
|
-
label: node2,
|
86615
|
-
|
86676
|
+
id: node2.label,
|
86677
|
+
label: node2.label,
|
86678
|
+
shape: node2.type === "var" ? "dot" : "diamond",
|
86679
|
+
group: usedNodes.has(node2.label) ? "used" : "normal"
|
86616
86680
|
});
|
86617
86681
|
});
|
86618
86682
|
graph.edges.forEach((edge, key) => {
|
86619
86683
|
edge.forEach((to) => {
|
86684
|
+
if (!to)
|
86685
|
+
return;
|
86620
86686
|
edges.push({
|
86621
|
-
from: key,
|
86622
|
-
to,
|
86687
|
+
from: key.label,
|
86688
|
+
to: to.label,
|
86623
86689
|
arrows: {
|
86624
86690
|
to: {
|
86625
86691
|
enabled: true,
|