vue-hook-optimizer 0.0.10 → 0.0.11

package/README.md

@@ -21,11 +21,11 @@ Open the browser and visit `http://localhost:3000/`.
 
 1. paste your `vue` code into the editor
 
-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.
+~~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.~~
 
 2. click `Analyze` button
 
-The tool will analyze the `setup block` and `template block`, and show the relations between the variables and the methods. This is a simple demo.
+The tool will analyze the code, and show the relations between the variables and the methods. This is a simple demo.
 
 ![demo](./images/demo1.png)
 
@@ -37,7 +37,7 @@ So I want to build a tool to help us analyze the code, and find the relations be
 
 ## Development Plan
 
-- [ ] add node type and more info
+- [ ] add ~~node type~~ (has added `var` and `fun` types) and more info
 - [ ] provide some suggestions for optimization
 - [x] support `options api`
 - [x] [vscode extension](./packages/vscode)

package/dist/index.d.mts

@@ -3,19 +3,51 @@ import * as vis_network from 'vis-network';
 
 declare function analyze$2(content: string): Set<string>;
 
+declare enum NodeType {
+    var = "var",
+    fun = "fun"
+}
+
 declare function analyze$1(content: string): {
-    nodes: Set<string>;
-    edges: Map<string, Set<string>>;
+    nodes: Set<{
+        label: string;
+        type: NodeType;
+    }>;
+    edges: Map<{
+        label: string;
+        type: NodeType;
+    }, Set<{
+        label: string;
+        type: NodeType;
+    }>>;
 };
 
 declare function analyze(content: string): {
-    nodes: Set<string>;
-    edges: Map<string, Set<string>>;
+    nodes: Set<{
+        label: string;
+        type: NodeType;
+    }>;
+    edges: Map<{
+        label: string;
+        type: NodeType;
+    }, Set<{
+        label: string;
+        type: NodeType;
+    }>>;
 };
 
 declare function getVisData(graph: {
-    nodes: Set<string>;
-    edges: Map<string, Set<string>>;
+    nodes: Set<{
+        label: string;
+        type: string;
+    }>;
+    edges: Map<{
+        label: string;
+        type: string;
+    }, Set<{
+        label: string;
+        type: string;
+    }>>;
 }, usedNodes: Set<string>): {
     nodes: vis_network.Node[];
     edges: vis_network.Edge[];

package/dist/index.d.ts

@@ -3,19 +3,51 @@ import * as vis_network from 'vis-network';
 
 declare function analyze$2(content: string): Set<string>;
 
+declare enum NodeType {
+    var = "var",
+    fun = "fun"
+}
+
 declare function analyze$1(content: string): {
-    nodes: Set<string>;
-    edges: Map<string, Set<string>>;
+    nodes: Set<{
+        label: string;
+        type: NodeType;
+    }>;
+    edges: Map<{
+        label: string;
+        type: NodeType;
+    }, Set<{
+        label: string;
+        type: NodeType;
+    }>>;
 };
 
 declare function analyze(content: string): {
-    nodes: Set<string>;
-    edges: Map<string, Set<string>>;
+    nodes: Set<{
+        label: string;
+        type: NodeType;
+    }>;
+    edges: Map<{
+        label: string;
+        type: NodeType;
+    }, Set<{
+        label: string;
+        type: NodeType;
+    }>>;
 };
 
 declare function getVisData(graph: {
-    nodes: Set<string>;
-    edges: Map<string, Set<string>>;
+    nodes: Set<{
+        label: string;
+        type: string;
+    }>;
+    edges: Map<{
+        label: string;
+        type: string;
+    }, Set<{
+        label: string;
+        type: string;
+    }>>;
 }, usedNodes: Set<string>): {
     nodes: vis_network.Node[];
     edges: vis_network.Edge[];

package/dist/index.js

@@ -86273,11 +86273,58 @@ function analyze(content) {
 
 // src/analyze/setupScript.ts
 var import_traverse2 = __toESM(require_lib13());
+
+// src/analyze/utils.ts
+var NodeCollection = class {
+  nodes = /* @__PURE__ */ new Map();
+  addNode(label, node2, isComputed = false) {
+    if (this.nodes.has(label)) {
+      return;
+    }
+    if (!isComputed && (node2.type === "VariableDeclarator" && [
+      "ArrowFunctionExpression",
+      "FunctionDeclaration"
+    ].includes(node2.init?.type || "") || node2.type === "FunctionDeclaration" || node2.type === "ObjectMethod")) {
+      this.nodes.set(label, {
+        label,
+        type: "fun" /* fun */
+      });
+    } else {
+      this.nodes.set(label, {
+        label,
+        type: "var" /* var */
+      });
+    }
+  }
+  addTypedNode(label, type) {
+    this.nodes.set(label, {
+      label,
+      type
+    });
+  }
+  map(graph) {
+    const nodes = new Set(Array.from(graph.nodes).map((node2) => {
+      return this.nodes.get(node2);
+    }));
+    const edges = new Map(Array.from(graph.edges).map(([from2, to]) => {
+      return [this.nodes.get(from2), new Set(Array.from(to).map((node2) => {
+        return this.nodes.get(node2);
+      }))];
+    }));
+    return {
+      nodes,
+      edges
+    };
+  }
+};
+
+// src/analyze/setupScript.ts
 var traverse2 = (
   //@ts-ignore
   import_traverse2.default.default?.default || import_traverse2.default.default || import_traverse2.default
 );
 function processSetup(ast, parentScope, parentPath) {
+  const nodeCollection = new NodeCollection();
   const graph = {
     nodes: /* @__PURE__ */ new Set(),
     edges: /* @__PURE__ */ new Map()
@@ -86292,6 +86339,7 @@ function processSetup(ast, parentScope, parentPath) {
               const binding2 = path2.scope.getBinding(name);
               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))) {
                 graph.nodes.add(name);
+                nodeCollection.addNode(name, declaration2);
                 if (!graph.edges.get(name)) {
                   graph.edges.set(name, /* @__PURE__ */ new Set());
                 }
@@ -86306,6 +86354,7 @@ function processSetup(ast, parentScope, parentPath) {
               const binding2 = path2.scope.getBinding(name);
               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))) {
                 graph.nodes.add(name);
+                nodeCollection.addNode(name, declaration2);
                 if (!graph.edges.get(name)) {
                   graph.edges.set(name, /* @__PURE__ */ new Set());
                 }
@@ -86318,6 +86367,7 @@ function processSetup(ast, parentScope, parentPath) {
           const binding2 = path2.scope.getBinding(name);
           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))) {
             graph.nodes.add(name);
+            nodeCollection.addNode(name, declaration2);
             if (!graph.edges.get(name)) {
               graph.edges.set(name, /* @__PURE__ */ new Set());
             }
@@ -86331,6 +86381,7 @@ function processSetup(ast, parentScope, parentPath) {
         const binding2 = path2.scope.getBinding(name);
         if (binding2 && (path2.parent.type === "Program" || parentPath?.type === "ObjectMethod" && parentPath.body === path2.parent)) {
           graph.nodes.add(name);
+          nodeCollection.addNode(name, path2.node);
           if (!graph.edges.get(name)) {
             graph.edges.set(name, /* @__PURE__ */ new Set());
           }
@@ -86408,7 +86459,10 @@ function processSetup(ast, parentScope, parentPath) {
       }
     }
   }, parentScope, parentPath);
-  return graph;
+  return {
+    graph,
+    nodeCollection
+  };
 }
 function analyze2(content) {
   const ast = parse_1$1(content, {
@@ -86417,7 +86471,8 @@ function analyze2(content) {
       "typescript"
     ]
   });
-  return processSetup(ast);
+  const { graph, nodeCollection } = processSetup(ast);
+  return nodeCollection.map(graph);
 }
 
 // src/analyze/options.ts
@@ -86433,6 +86488,7 @@ function analyze3(content) {
       "typescript"
     ]
   });
+  const nodeCollection = new NodeCollection();
   const graph = {
     nodes: /* @__PURE__ */ new Set(),
     edges: /* @__PURE__ */ new Map()
@@ -86449,6 +86505,7 @@ function analyze3(content) {
                   if (prop.key.type === "Identifier") {
                     const name = prop.key.name;
                     graph.nodes.add(name);
+                    nodeCollection.addNode(name, prop, true);
                     if (!graph.edges.get(name)) {
                       graph.edges.set(name, /* @__PURE__ */ new Set());
                     }
@@ -86465,6 +86522,7 @@ function analyze3(content) {
                   if (prop.key.type === "Identifier") {
                     const name = prop.key.name;
                     graph.nodes.add(name);
+                    nodeCollection.addNode(name, prop);
                     if (!graph.edges.get(name)) {
                       graph.edges.set(name, /* @__PURE__ */ new Set());
                     }
@@ -86480,8 +86538,11 @@ function analyze3(content) {
           if (path1.node.key.type === "Identifier" && path1.node.key.name === "setup") {
             const setupNode = path1.node;
             const {
-              nodes: tempNodes,
-              edges: tempEdges
+              graph: {
+                nodes: tempNodes,
+                edges: tempEdges
+              },
+              nodeCollection: tempNodeCollection
             } = processSetup(setupNode, path1.scope, setupNode);
             traverse3(setupNode, {
               ReturnStatement(path22) {
@@ -86495,6 +86556,7 @@ function analyze3(content) {
                           const valName = path3.node.value.type === "Identifier" ? path3.node.value.name : "";
                           if (valName && tempNodes.has(valName)) {
                             graph.nodes.add(name);
+                            nodeCollection.addTypedNode(name, tempNodeCollection.nodes.get(valName).type);
                             if (!graph.edges.get(name)) {
                               graph.edges.set(name, /* @__PURE__ */ new Set());
                               tempEdges.get(valName)?.forEach((edge) => {
@@ -86523,6 +86585,7 @@ function analyze3(content) {
                         if (prop.key.type === "Identifier") {
                           const name = prop.key.name;
                           graph.nodes.add(name);
+                          nodeCollection.addNode(name, prop);
                           if (!graph.edges.get(name)) {
                             graph.edges.set(name, /* @__PURE__ */ new Set());
                           }
@@ -86601,7 +86664,7 @@ function analyze3(content) {
       }
     }
   });
-  return graph;
+  return nodeCollection.map(graph);
 }
 
 // src/vis.ts
@@ -86610,16 +86673,19 @@ function getVisData(graph, usedNodes) {
   const edges = [];
   graph.nodes.forEach((node2) => {
     nodes.push({
-      id: node2,
-      label: node2,
-      group: usedNodes.has(node2) ? "used" : "normal"
+      id: node2.label,
+      label: node2.label,
+      shape: node2.type === "var" ? "dot" : "diamond",
+      group: usedNodes.has(node2.label) ? "used" : "normal"
     });
   });
   graph.edges.forEach((edge, key) => {
     edge.forEach((to) => {
+      if (!to)
+        return;
       edges.push({
-        from: key,
-        to,
+        from: key.label,
+        to: to.label,
         arrows: {
           to: {
             enabled: true,