vue-hook-optimizer 0.0.9 → 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

@@ -48,8 +48,8 @@ var require_virtual_types = __commonJS({
     exports.Statement = Statement;
     var Expression = ["Expression"];
     exports.Expression = Expression;
-    var Scope2 = ["Scopable", "Pattern"];
-    exports.Scope = Scope2;
+    var Scope3 = ["Scopable", "Pattern"];
+    exports.Scope = Scope3;
     var Referenced = null;
     exports.Referenced = Referenced;
     var BlockScoped = null;
@@ -18062,7 +18062,7 @@ var require_scope = __commonJS({
       }
     };
     var uid = 0;
-    var Scope2 = class _Scope {
+    var Scope3 = class _Scope {
       constructor(path2) {
         this.uid = void 0;
         this.path = void 0;
@@ -18697,9 +18697,9 @@ var require_scope = __commonJS({
         } while (scope = scope.parent);
       }
     };
-    exports.default = Scope2;
-    Scope2.globals = Object.keys(_globals.builtin);
-    Scope2.contextVariables = ["arguments", "undefined", "Infinity", "NaN"];
+    exports.default = Scope3;
+    Scope3.globals = Object.keys(_globals.builtin);
+    Scope3.contextVariables = ["arguments", "undefined", "Infinity", "NaN"];
   }
 });
 
@@ -29011,7 +29011,7 @@ var require_lib9 = __commonJS({
     var CLASS_ELEMENT_INSTANCE_GETTER2 = CLASS_ELEMENT_KIND_GETTER2;
     var CLASS_ELEMENT_INSTANCE_SETTER2 = CLASS_ELEMENT_KIND_SETTER2;
     var CLASS_ELEMENT_OTHER2 = 0;
-    var Scope2 = class {
+    var Scope3 = class {
       constructor(flags) {
         this.var = /* @__PURE__ */ new Set();
         this.lexical = /* @__PURE__ */ new Set();
@@ -29067,7 +29067,7 @@ var require_lib9 = __commonJS({
         return this.treatFunctionsAsVarInScope(this.currentScope());
       }
       createScope(flags) {
-        return new Scope2(flags);
+        return new Scope3(flags);
       }
       enter(flags) {
         this.scopeStack.push(this.createScope(flags));
@@ -29162,7 +29162,7 @@ var require_lib9 = __commonJS({
         }
       }
     };
-    var FlowScope2 = class extends Scope2 {
+    var FlowScope2 = class extends Scope3 {
       constructor(...args) {
         super(...args);
         this.declareFunctions = /* @__PURE__ */ new Set();
@@ -34668,7 +34668,7 @@ var require_lib9 = __commonJS({
         }
       }
     };
-    var TypeScriptScope2 = class extends Scope2 {
+    var TypeScriptScope2 = class extends Scope3 {
       constructor(...args) {
         super(...args);
         this.types = /* @__PURE__ */ new Set();
@@ -86273,17 +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 analyze2(content) {
-  const ast = parse_1$1(content, {
-    sourceType: "module",
-    plugins: [
-      "typescript"
-    ]
-  });
+function processSetup(ast, parentScope, parentPath) {
+  const nodeCollection = new NodeCollection();
   const graph = {
     nodes: /* @__PURE__ */ new Set(),
     edges: /* @__PURE__ */ new Map()
@@ -86296,8 +86337,9 @@ function analyze2(content) {
             if (element?.type === "Identifier") {
               const name = element.name;
               const binding2 = path2.scope.getBinding(name);
-              if (binding2 && path2.parent.type === "Program" && !(declaration2.init?.type === "CallExpression" && declaration2.init?.callee.type === "Identifier" && ["defineProps", "defineEmits"].includes(declaration2.init?.callee.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());
                 }
@@ -86310,8 +86352,9 @@ function analyze2(content) {
             if (property.type === "ObjectProperty" && property.value.type === "Identifier") {
               const name = property.value.name;
               const binding2 = path2.scope.getBinding(name);
-              if (binding2 && path2.parent.type === "Program" && !(declaration2.init?.type === "CallExpression" && declaration2.init?.callee.type === "Identifier" && ["defineProps", "defineEmits"].includes(declaration2.init?.callee.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());
                 }
@@ -86322,8 +86365,9 @@ function analyze2(content) {
         if (declaration2.id?.type === "Identifier") {
           const name = declaration2.id.name;
           const binding2 = path2.scope.getBinding(name);
-          if (binding2 && path2.parent.type === "Program" && !(declaration2.init?.type === "CallExpression" && declaration2.init?.callee.type === "Identifier" && ["defineProps", "defineEmits"].includes(declaration2.init?.callee.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());
             }
@@ -86335,15 +86379,16 @@ function analyze2(content) {
       const name = path2.node.id?.name;
       if (name) {
         const binding2 = path2.scope.getBinding(name);
-        if (binding2 && path2.parent.type === "Program") {
+        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());
           }
         }
       }
     }
-  });
+  }, parentScope, parentPath);
   traverse2(ast, {
     FunctionDeclaration(path2) {
       const name = path2.node.id?.name;
@@ -86351,7 +86396,7 @@ function analyze2(content) {
         path2.traverse({
           Identifier(path1) {
             const binding2 = path1.scope.getBinding(path1.node.name);
-            if (graph.nodes.has(path1.node.name) && path1.node.name !== name && binding2?.scope.block.type === "Program") {
+            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);
             }
           }
@@ -86368,7 +86413,7 @@ function analyze2(content) {
                 traverse2(path2.node.init, {
                   Identifier(path1) {
                     const binding2 = path1.scope.getBinding(path1.node.name);
-                    if (graph.nodes.has(path1.node.name) && path1.node.name !== name && binding2?.scope.block.type === "Program") {
+                    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);
                     }
                   }
@@ -86385,7 +86430,7 @@ function analyze2(content) {
                 traverse2(path2.node.init, {
                   Identifier(path1) {
                     const binding2 = path1.scope.getBinding(path1.node.name);
-                    if (graph.nodes.has(path1.node.name) && path1.node.name !== name && binding2?.scope.block.type === "Program") {
+                    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);
                     }
                   }
@@ -86404,7 +86449,7 @@ function analyze2(content) {
             traverse2(path2.node.init, {
               Identifier(path1) {
                 const binding2 = path1.scope.getBinding(path1.node.name);
-                if (graph.nodes.has(path1.node.name) && path1.node.name !== name && binding2?.scope.block.type === "Program") {
+                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);
                 }
               }
@@ -86413,8 +86458,21 @@ function analyze2(content) {
         }
       }
     }
+  }, parentScope, parentPath);
+  return {
+    graph,
+    nodeCollection
+  };
+}
+function analyze2(content) {
+  const ast = parse_1$1(content, {
+    sourceType: "module",
+    plugins: [
+      "typescript"
+    ]
   });
-  return graph;
+  const { graph, nodeCollection } = processSetup(ast);
+  return nodeCollection.map(graph);
 }
 
 // src/analyze/options.ts
@@ -86430,6 +86488,7 @@ function analyze3(content) {
       "typescript"
     ]
   });
+  const nodeCollection = new NodeCollection();
   const graph = {
     nodes: /* @__PURE__ */ new Set(),
     edges: /* @__PURE__ */ new Map()
@@ -86446,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());
                     }
@@ -86462,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());
                     }
@@ -86476,68 +86537,13 @@ 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 tempNodes = /* @__PURE__ */ new Set();
-            const tempEdges = /* @__PURE__ */ new Map();
-            traverse3(setupNode, {
-              VariableDeclaration(path22) {
-                path22.node.declarations.forEach((declaration2) => {
-                  if (declaration2.id?.type === "Identifier") {
-                    const name = declaration2.id.name;
-                    if (path22.parent == setupNode.body) {
-                      tempNodes.add(name);
-                      if (!tempEdges.get(name)) {
-                        tempEdges.set(name, /* @__PURE__ */ new Set());
-                      }
-                    }
-                  }
-                });
-              },
-              FunctionDeclaration(path22) {
-                const name = path22.node.id?.name;
-                if (name) {
-                  if (path22.parent == setupNode.body) {
-                    tempNodes.add(name);
-                    if (!tempEdges.get(name)) {
-                      tempEdges.set(name, /* @__PURE__ */ new Set());
-                    }
-                  }
-                }
-              }
-            }, path1.scope, path1);
-            traverse3(setupNode, {
-              FunctionDeclaration(path3) {
-                const name = path3.node.id?.name;
-                if (name && tempNodes.has(name)) {
-                  path3.traverse({
-                    Identifier(path4) {
-                      if (tempNodes.has(path4.node.name) && path4.node.name !== name) {
-                        tempEdges.get(name)?.add(path4.node.name);
-                      }
-                    }
-                  });
-                }
+            const {
+              graph: {
+                nodes: tempNodes,
+                edges: tempEdges
               },
-              VariableDeclarator(path3) {
-                if (path3.node.init) {
-                  if ([
-                    "CallExpression",
-                    "ArrowFunctionExpression",
-                    "FunctionDeclaration"
-                  ].includes(path3.node.init.type) && path3.node.id.type === "Identifier") {
-                    const name = path3.node.id?.name;
-                    if (name && tempNodes.has(name)) {
-                      path3.traverse({
-                        Identifier(path4) {
-                          if (tempNodes.has(path4.node.name) && path4.node.name !== name) {
-                            tempEdges.get(name)?.add(path4.node.name);
-                          }
-                        }
-                      });
-                    }
-                  }
-                }
-              }
-            }, path1.scope, path1);
+              nodeCollection: tempNodeCollection
+            } = processSetup(setupNode, path1.scope, setupNode);
             traverse3(setupNode, {
               ReturnStatement(path22) {
                 if (path22.node.argument?.type === "ObjectExpression") {
@@ -86550,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) => {
@@ -86578,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());
                           }
@@ -86656,7 +86664,7 @@ function analyze3(content) {
       }
     }
   });
-  return graph;
+  return nodeCollection.map(graph);
 }
 
 // src/vis.ts
@@ -86665,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,