vue-hook-optimizer 0.0.10 → 0.0.12

package/README.md

@@ -1,8 +1,9 @@
 [![NPM version](https://img.shields.io/npm/v/vue-hook-optimizer?color=a1b858&label=)](https://www.npmjs.com/package/vue-hook-optimizer)
+<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&amp;label=VS%20Code%20Marketplace&logo=visual-studio-code" alt="Visual Studio Marketplace Version" /></a>
 
 [中文文档](./README_cn.md)
 
-This is a tool to analyze your `vue` code.
+This is a tool to analyze your `vue` code. Viste [hook.huali.cafe](https://hook.huali.cafe) or try the vscode extension [vue-hook-optimizer-ext](https://marketplace.visualstudio.com/items?itemName=zcf0508.vue-hook-optimizer-ext).
 
 ## Install And Run Playground
 
@@ -21,11 +22,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 +38,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,14 +86273,63 @@ 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, options = { isComputed: false }) {
+    if (this.nodes.has(label)) {
+      return;
+    }
+    if (!options.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, node2) {
+    this.nodes.set(label, {
+      label,
+      type: node2.type
+    });
+  }
+  map(graph) {
+    const nodes = new Set(Array.from(graph.nodes).map((node2) => {
+      return this.nodes.get(node2);
+    }).filter((node2) => !!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);
+      }).filter((node2) => !!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) {
+function processSetup(ast, parentScope, parentPath, _spread) {
+  const spread = _spread || [];
+  const nodeCollection = new NodeCollection();
   const graph = {
     nodes: /* @__PURE__ */ new Set(),
-    edges: /* @__PURE__ */ new Map()
+    edges: /* @__PURE__ */ new Map(),
+    spread: /* @__PURE__ */ new Map()
   };
   traverse2(ast, {
     VariableDeclaration(path2) {
@@ -86292,6 +86341,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 +86356,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,9 +86369,53 @@ 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());
             }
+            if (spread.includes(name)) {
+              if (declaration2.init?.type === "ObjectExpression") {
+                declaration2.init?.properties.forEach((prop) => {
+                  if ((prop.type === "ObjectProperty" || prop.type === "ObjectMethod") && prop.key.type === "Identifier") {
+                    const keyName = prop.key.name;
+                    graph.nodes.add(keyName);
+                    nodeCollection.addNode(keyName, prop);
+                    if (!graph.edges.get(keyName)) {
+                      graph.edges.set(keyName, /* @__PURE__ */ new Set());
+                    }
+                    if (graph.spread.has(name)) {
+                      graph.spread.get(name)?.add(keyName);
+                    } else {
+                      graph.spread.set(name, /* @__PURE__ */ new Set([keyName]));
+                    }
+                  } else if (prop.type === "SpreadElement") {
+                    console.warn("not support spread in spread");
+                  }
+                });
+              }
+              if (declaration2.init?.type === "CallExpression" && declaration2.init?.callee.type === "Identifier" && declaration2.init?.callee.name === "reactive") {
+                const arg = declaration2.init?.arguments[0];
+                if (arg.type === "ObjectExpression") {
+                  arg.properties.forEach((prop) => {
+                    if ((prop.type === "ObjectProperty" || prop.type === "ObjectMethod") && prop.key.type === "Identifier") {
+                      const keyName = prop.key.name;
+                      graph.nodes.add(keyName);
+                      nodeCollection.addNode(keyName, prop);
+                      if (!graph.edges.get(keyName)) {
+                        graph.edges.set(keyName, /* @__PURE__ */ new Set());
+                      }
+                      if (graph.spread.has(name)) {
+                        graph.spread.get(name)?.add(keyName);
+                      } else {
+                        graph.spread.set(name, /* @__PURE__ */ new Set([keyName]));
+                      }
+                    } else if (prop.type === "SpreadElement") {
+                      console.warn("not support spread in spread");
+                    }
+                  });
+                }
+              }
+            }
           }
         }
       });
@@ -86331,6 +86426,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());
           }
@@ -86348,6 +86444,14 @@ function processSetup(ast, parentScope, parentPath) {
             if (graph.nodes.has(path1.node.name) && path1.node.name !== name && (binding2?.scope.block.type === "Program" || parentScope === binding2?.scope)) {
               graph.edges.get(name)?.add(path1.node.name);
             }
+          },
+          MemberExpression(path1) {
+            if (path1.node.object.type === "Identifier" && spread.includes(path1.node.object.name)) {
+              const binding2 = path1.scope.getBinding(path1.node.object.name);
+              if (spread.includes(path1.node.object.name) && path1.node.property.type === "Identifier" && path1.node.property.name !== name && (binding2?.scope.block.type === "Program" || parentScope === binding2?.scope)) {
+                graph.edges.get(name)?.add(path1.node.property.name);
+              }
+            }
           }
         });
       }
@@ -86365,6 +86469,14 @@ function processSetup(ast, parentScope, parentPath) {
                     if (graph.nodes.has(path1.node.name) && path1.node.name !== name && (binding2?.scope.block.type === "Program" || parentScope === binding2?.scope)) {
                       graph.edges.get(name)?.add(path1.node.name);
                     }
+                  },
+                  MemberExpression(path1) {
+                    if (path1.node.object.type === "Identifier" && spread.includes(path1.node.object.name)) {
+                      const binding2 = path1.scope.getBinding(path1.node.object.name);
+                      if (spread.includes(path1.node.object.name) && path1.node.property.type === "Identifier" && path1.node.property.name !== name && (binding2?.scope.block.type === "Program" || parentScope === binding2?.scope)) {
+                        graph.edges.get(name)?.add(path1.node.property.name);
+                      }
+                    }
                   }
                 }, path2.scope, path2);
               }
@@ -86382,6 +86494,14 @@ function processSetup(ast, parentScope, parentPath) {
                     if (graph.nodes.has(path1.node.name) && path1.node.name !== name && (binding2?.scope.block.type === "Program" || parentScope === binding2?.scope)) {
                       graph.edges.get(name)?.add(path1.node.name);
                     }
+                  },
+                  MemberExpression(path1) {
+                    if (path1.node.object.type === "Identifier" && spread.includes(path1.node.object.name)) {
+                      const binding2 = path1.scope.getBinding(path1.node.object.name);
+                      if (spread.includes(path1.node.object.name) && path1.node.property.type === "Identifier" && path1.node.property.name !== name && (binding2?.scope.block.type === "Program" || parentScope === binding2?.scope)) {
+                        graph.edges.get(name)?.add(path1.node.property.name);
+                      }
+                    }
                   }
                 }, path2.scope, path2);
               }
@@ -86401,14 +86521,44 @@ function processSetup(ast, parentScope, parentPath) {
                 if (graph.nodes.has(path1.node.name) && path1.node.name !== name && (binding2?.scope.block.type === "Program" || parentScope === binding2?.scope)) {
                   graph.edges.get(name)?.add(path1.node.name);
                 }
+              },
+              MemberExpression(path1) {
+                if (path1.node.object.type === "Identifier" && spread.includes(path1.node.object.name)) {
+                  const binding2 = path1.scope.getBinding(path1.node.object.name);
+                  if (spread.includes(path1.node.object.name) && path1.node.property.type === "Identifier" && path1.node.property.name !== name && (binding2?.scope.block.type === "Program" || parentScope === binding2?.scope)) {
+                    graph.edges.get(name)?.add(path1.node.property.name);
+                  }
+                }
               }
             }, path2.scope, path2);
           }
         }
       }
+    },
+    ObjectMethod(path2) {
+      if (path2.node.key.type === "Identifier" && graph.nodes.has(path2.node.key.name)) {
+        const name = path2.node.key.name;
+        path2.traverse({
+          Identifier(path1) {
+            if (graph.nodes.has(path1.node.name) && path1.node.name !== name) {
+              graph.edges.get(name)?.add(path1.node.name);
+            }
+          },
+          MemberExpression(path1) {
+            if (path1.node.object.type === "Identifier" && spread.includes(path1.node.object.name)) {
+              if (spread.includes(path1.node.object.name) && path1.node.property.type === "Identifier" && path1.node.property.name !== name) {
+                graph.edges.get(name)?.add(path1.node.property.name);
+              }
+            }
+          }
+        });
+      }
     }
   }, parentScope, parentPath);
-  return graph;
+  return {
+    graph,
+    nodeCollection
+  };
 }
 function analyze2(content) {
   const ast = parse_1$1(content, {
@@ -86417,7 +86567,8 @@ function analyze2(content) {
       "typescript"
     ]
   });
-  return processSetup(ast);
+  const { graph, nodeCollection } = processSetup(ast);
+  return nodeCollection.map(graph);
 }
 
 // src/analyze/options.ts
@@ -86433,6 +86584,7 @@ function analyze3(content) {
       "typescript"
     ]
   });
+  const nodeCollection = new NodeCollection();
   const graph = {
     nodes: /* @__PURE__ */ new Set(),
     edges: /* @__PURE__ */ new Map()
@@ -86449,6 +86601,9 @@ function analyze3(content) {
                   if (prop.key.type === "Identifier") {
                     const name = prop.key.name;
                     graph.nodes.add(name);
+                    nodeCollection.addNode(name, prop, {
+                      isComputed: true
+                    });
                     if (!graph.edges.get(name)) {
                       graph.edges.set(name, /* @__PURE__ */ new Set());
                     }
@@ -86465,6 +86620,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());
                     }
@@ -86479,10 +86635,31 @@ function analyze3(content) {
         if (path2.node.declaration.type === "ObjectExpression" && path1.parent === path2.node.declaration || path2.node.declaration.type === "CallExpression" && path1.parent === path2.node.declaration.arguments[0]) {
           if (path1.node.key.type === "Identifier" && path1.node.key.name === "setup") {
             const setupNode = path1.node;
+            const spread = [];
+            traverse3(setupNode, {
+              ReturnStatement(path22) {
+                if (path22.node.argument?.type === "ObjectExpression") {
+                  const returnNode = path22.node.argument;
+                  traverse3(returnNode, {
+                    SpreadElement(path3) {
+                      if (path3.node.argument.type === "CallExpression" && path3.node.argument.callee.type === "Identifier" && path3.node.argument.callee.name === "toRefs" && path3.node.argument.arguments[0].type === "Identifier") {
+                        spread.push(path3.node.argument.arguments[0].name);
+                      } else if (path3.node.argument.type === "Identifier") {
+                        spread.push(path3.node.argument.name);
+                      }
+                    }
+                  }, path22.scope, path22);
+                }
+              }
+            }, path1.scope, path1);
             const {
-              nodes: tempNodes,
-              edges: tempEdges
-            } = processSetup(setupNode, path1.scope, setupNode);
+              graph: {
+                nodes: tempNodes,
+                edges: tempEdges,
+                spread: tempSpread
+              },
+              nodeCollection: tempNodeCollection
+            } = processSetup(setupNode, path1.scope, setupNode, spread);
             traverse3(setupNode, {
               ReturnStatement(path22) {
                 if (path22.node.argument?.type === "ObjectExpression") {
@@ -86495,6 +86672,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));
                             if (!graph.edges.get(name)) {
                               graph.edges.set(name, /* @__PURE__ */ new Set());
                               tempEdges.get(valName)?.forEach((edge) => {
@@ -86504,6 +86682,31 @@ function analyze3(content) {
                           }
                         }
                       }
+                    },
+                    SpreadElement(path3) {
+                      if (path3.node.argument.type === "CallExpression" && path3.node.argument.callee.type === "Identifier" && path3.node.argument.callee.name === "toRefs" && path3.node.argument.arguments[0].type === "Identifier" && tempSpread.get(path3.node.argument.arguments[0].name)) {
+                        tempSpread.get(path3.node.argument.arguments[0].name)?.forEach((name) => {
+                          graph.nodes.add(name);
+                          nodeCollection.addTypedNode(name, tempNodeCollection.nodes.get(name));
+                          if (!graph.edges.get(name)) {
+                            graph.edges.set(name, /* @__PURE__ */ new Set());
+                            tempEdges.get(name)?.forEach((edge) => {
+                              graph.edges.get(name)?.add(edge);
+                            });
+                          }
+                        });
+                      } else if (path3.node.argument.type === "Identifier" && tempSpread.get(path3.node.argument.name)) {
+                        tempSpread.get(path3.node.argument.name)?.forEach((name) => {
+                          graph.nodes.add(name);
+                          nodeCollection.addTypedNode(name, tempNodeCollection.nodes.get(name));
+                          if (!graph.edges.get(name)) {
+                            graph.edges.set(name, /* @__PURE__ */ new Set());
+                            tempEdges.get(name)?.forEach((edge) => {
+                              graph.edges.get(name)?.add(edge);
+                            });
+                          }
+                        });
+                      }
                     }
                   }, path22.scope, path22);
                 } else {
@@ -86523,6 +86726,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 +86805,7 @@ function analyze3(content) {
       }
     }
   });
-  return graph;
+  return nodeCollection.map(graph);
 }
 
 // src/vis.ts
@@ -86610,16 +86814,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,