vue-hook-optimizer 0.0.13 → 0.0.15

package/README.md

@@ -16,7 +16,6 @@ pnpm run play
 
 Open the browser and visit `http://localhost:3000/`.
 
-![playground](./images/playground1.png)
 
 ## How To Use
 
@@ -28,7 +27,7 @@ Open the browser and visit `http://localhost:3000/`.
 
 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)
+![playground](./images/playground1.png)
 
 ## Motive
 
@@ -39,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~~ (has added `var` and `fun` types) and more info
-- [ ] provide some suggestions for optimization
+- [x] provide some suggestions for optimization
 - [x] support `options api`
 - [x] [vscode extension](./packages/vscode)
 

package/dist/index.d.mts

@@ -1,56 +1,38 @@
 export { parse } from '@vue/compiler-sfc';
 import * as vis_network from 'vis-network';
 
-declare function analyze$2(content: string): Set<string>;
-
+type TypedNode = {
+    label: string;
+    type: NodeType;
+};
 declare enum NodeType {
     var = "var",
     fun = "fun"
 }
 
+declare function analyze$2(content: string): Set<string>;
+
 declare function analyze$1(content: string): {
-    nodes: Set<{
-        label: string;
-        type: NodeType;
-    }>;
-    edges: Map<{
-        label: string;
-        type: NodeType;
-    }, Set<{
-        label: string;
-        type: NodeType;
-    }>>;
+    nodes: Set<TypedNode>;
+    edges: Map<TypedNode, Set<TypedNode>>;
 };
 
 declare function analyze(content: string): {
-    nodes: Set<{
-        label: string;
-        type: NodeType;
-    }>;
-    edges: Map<{
-        label: string;
-        type: NodeType;
-    }, Set<{
-        label: string;
-        type: NodeType;
-    }>>;
+    nodes: Set<TypedNode>;
+    edges: Map<TypedNode, Set<TypedNode>>;
 };
 
+declare function gen(graph: {
+    nodes: Set<TypedNode>;
+    edges: Map<TypedNode, Set<TypedNode>>;
+}, usedNodes: Set<string>): string[];
+
 declare function getVisData(graph: {
-    nodes: Set<{
-        label: string;
-        type: string;
-    }>;
-    edges: Map<{
-        label: string;
-        type: string;
-    }, Set<{
-        label: string;
-        type: string;
-    }>>;
+    nodes: Set<TypedNode>;
+    edges: Map<TypedNode, Set<TypedNode>>;
 }, usedNodes: Set<string>): {
     nodes: vis_network.Node[];
     edges: vis_network.Edge[];
 };
 
-export { analyze as analyzeOptions, analyze$1 as analyzeSetupScript, analyze$2 as analyzeTemplate, getVisData };
+export { NodeType, TypedNode, analyze as analyzeOptions, analyze$1 as analyzeSetupScript, analyze$2 as analyzeTemplate, gen, getVisData };

package/dist/index.d.ts

@@ -1,56 +1,38 @@
 export { parse } from '@vue/compiler-sfc';
 import * as vis_network from 'vis-network';
 
-declare function analyze$2(content: string): Set<string>;
-
+type TypedNode = {
+    label: string;
+    type: NodeType;
+};
 declare enum NodeType {
     var = "var",
     fun = "fun"
 }
 
+declare function analyze$2(content: string): Set<string>;
+
 declare function analyze$1(content: string): {
-    nodes: Set<{
-        label: string;
-        type: NodeType;
-    }>;
-    edges: Map<{
-        label: string;
-        type: NodeType;
-    }, Set<{
-        label: string;
-        type: NodeType;
-    }>>;
+    nodes: Set<TypedNode>;
+    edges: Map<TypedNode, Set<TypedNode>>;
 };
 
 declare function analyze(content: string): {
-    nodes: Set<{
-        label: string;
-        type: NodeType;
-    }>;
-    edges: Map<{
-        label: string;
-        type: NodeType;
-    }, Set<{
-        label: string;
-        type: NodeType;
-    }>>;
+    nodes: Set<TypedNode>;
+    edges: Map<TypedNode, Set<TypedNode>>;
 };
 
+declare function gen(graph: {
+    nodes: Set<TypedNode>;
+    edges: Map<TypedNode, Set<TypedNode>>;
+}, usedNodes: Set<string>): string[];
+
 declare function getVisData(graph: {
-    nodes: Set<{
-        label: string;
-        type: string;
-    }>;
-    edges: Map<{
-        label: string;
-        type: string;
-    }, Set<{
-        label: string;
-        type: string;
-    }>>;
+    nodes: Set<TypedNode>;
+    edges: Map<TypedNode, Set<TypedNode>>;
 }, usedNodes: Set<string>): {
     nodes: vis_network.Node[];
     edges: vis_network.Edge[];
 };
 
-export { analyze as analyzeOptions, analyze$1 as analyzeSetupScript, analyze$2 as analyzeTemplate, getVisData };
+export { NodeType, TypedNode, analyze as analyzeOptions, analyze$1 as analyzeSetupScript, analyze$2 as analyzeTemplate, gen, getVisData };

package/dist/index.js

@@ -19802,12 +19802,12 @@ var require_gen_mapping_umd = __commonJS({
         };
         exports2.fromMap = (input2) => {
           const map2 = new traceMapping.TraceMap(input2);
-          const gen = new GenMapping({ file: map2.file, sourceRoot: map2.sourceRoot });
-          putAll(gen._names, map2.names);
-          putAll(gen._sources, map2.sources);
-          gen._sourcesContent = map2.sourcesContent || map2.sources.map(() => null);
-          gen._mappings = traceMapping.decodedMappings(map2);
-          return gen;
+          const gen2 = new GenMapping({ file: map2.file, sourceRoot: map2.sourceRoot });
+          putAll(gen2._names, map2.names);
+          putAll(gen2._sources, map2.sources);
+          gen2._sourcesContent = map2.sourcesContent || map2.sources.map(() => null);
+          gen2._mappings = traceMapping.decodedMappings(map2);
+          return gen2;
         };
         addSegmentInternal = (skipable, map2, genLine, genColumn, source, sourceLine, sourceColumn, name, content) => {
           const { _mappings: mappings, _sources: sources, _sourcesContent: sourcesContent, _names: names } = map2;
@@ -25138,8 +25138,8 @@ var require_lib6 = __commonJS({
     };
     exports.CodeGenerator = CodeGenerator;
     function generate2(ast, opts, code) {
-      const gen = new Generator(ast, opts, code);
-      return gen.generate();
+      const gen2 = new Generator(ast, opts, code);
+      return gen2.generate();
     }
   }
 });
@@ -46322,14 +46322,65 @@ var require_lib13 = __commonJS({
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  NodeType: () => NodeType,
   analyzeOptions: () => analyze3,
   analyzeSetupScript: () => analyze2,
   analyzeTemplate: () => analyze,
+  gen: () => gen,
   getVisData: () => getVisData,
   parse: () => parse$7
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/analyze/utils.ts
+var NodeType = /* @__PURE__ */ ((NodeType3) => {
+  NodeType3["var"] = "var";
+  NodeType3["fun"] = "fun";
+  return NodeType3;
+})(NodeType || {});
+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
+    };
+  }
+};
+
 // node_modules/.pnpm/@vue+compiler-sfc@3.3.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js
 function makeMap(str2, expectsLowerCase) {
   const map2 = /* @__PURE__ */ Object.create(null);
@@ -86273,52 +86324,6 @@ 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
@@ -86808,6 +86813,101 @@ function analyze3(content) {
   return nodeCollection.map(graph);
 }
 
+// src/suggest/split.ts
+function dfs(graph, node2, targets, visited, component) {
+  component.add(node2);
+  visited.add(node2);
+  targets.forEach((target) => {
+    if (!visited.has(target)) {
+      dfs(graph, target, graph.get(target) || /* @__PURE__ */ new Set(), visited, component);
+    }
+  });
+}
+function haveIntersection(setA, setB) {
+  for (let item of setA) {
+    if (setB.has(item)) {
+      return true;
+    }
+  }
+  return false;
+}
+function mergeSets(arr) {
+  let result2 = [...arr];
+  for (let i = 0; i < result2.length; i++) {
+    for (let j = i + 1; j < result2.length; j++) {
+      if (haveIntersection(result2[i], result2[j])) {
+        const newSet = /* @__PURE__ */ new Set([...result2[i], ...result2[j]]);
+        result2.splice(j, 1);
+        result2.splice(i, 1);
+        result2 = [...result2, newSet];
+        return mergeSets(result2);
+      }
+    }
+  }
+  return result2;
+}
+function splitGraph(graph) {
+  const components = [];
+  const sorted = Array.from(graph).sort((a, b) => b[1].size - a[1].size);
+  new Map(sorted).forEach((targets, node2) => {
+    const visited = /* @__PURE__ */ new Set();
+    if (!visited.has(node2)) {
+      let component = /* @__PURE__ */ new Set();
+      dfs(graph, node2, targets, visited, component);
+      components.push(component);
+    }
+  });
+  return mergeSets(components).map((component) => {
+    const subGraph = /* @__PURE__ */ new Map();
+    component.forEach((node2) => {
+      const targets = graph.get(node2);
+      if (targets) {
+        subGraph.set(node2, targets);
+      }
+    });
+    return subGraph;
+  });
+}
+
+// src/suggest/filter.ts
+function noIndegreeFilter(graph) {
+  const nodes = Array.from(graph.keys());
+  const indegree = /* @__PURE__ */ new Map();
+  nodes.forEach((node2) => {
+    indegree.set(node2, 0);
+  });
+  graph.forEach((targets, node2) => {
+    targets.forEach((target) => {
+      indegree.set(target, (indegree.get(target) || 0) + 1);
+    });
+  });
+  return nodes.filter((node2) => indegree.get(node2) === 0);
+}
+
+// src/suggest/index.ts
+function gen(graph, usedNodes) {
+  const suggestions = [];
+  const splitedGraph = splitGraph(graph.edges);
+  splitedGraph.forEach((g) => {
+    const nodes = Array.from(g.keys());
+    if (splitedGraph.length > 1) {
+      if (nodes.length > 2 && nodes.some((node2) => !usedNodes.has(node2.label))) {
+        suggestions.push(`Nodes [${nodes.length > 10 ? nodes.slice(0, 10).map((node2) => node2.label).join(",") + "...(" + nodes.length + ")" : nodes.map((node2) => node2.label).join(",")}] are isolated, perhaps you can refactor them to an isolated file.`);
+      }
+    }
+    if (nodes.every((node2) => !usedNodes.has(node2.label))) {
+      suggestions.push(`Node${nodes.length > 1 ? "s" : ""} [${nodes.length > 10 ? nodes.slice(0, 10).map((node2) => node2.label).join(",") + "..." : nodes.map((node2) => node2.label).join(",")}] ${nodes.length > 1 ? "are" : "is"} not used, perhaps you can remove ${nodes.length > 1 ? "them" : "it"}.`);
+    }
+  });
+  const noIndegreeNodes = noIndegreeFilter(graph.edges);
+  noIndegreeNodes.forEach((node2) => {
+    if (!usedNodes.has(node2.label)) {
+      suggestions.push(`Node [${node2.label}] is not used, perhaps you can remove it.`);
+    }
+  });
+  return suggestions;
+}
+
 // src/vis.ts
 function getVisData(graph, usedNodes) {
   const nodes = [];
@@ -86843,9 +86943,11 @@ function getVisData(graph, usedNodes) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  NodeType,
   analyzeOptions,
   analyzeSetupScript,
   analyzeTemplate,
+  gen,
   getVisData,
   parse
 });