vue-hook-optimizer 0.0.55 → 0.0.57

package/dist/index.d.mts

@@ -1,7 +1,8 @@
+import { SFCStyleBlock } from '@vue/compiler-sfc';
 export { parse } from '@vue/compiler-sfc';
 import { Edge, Node } from 'vis-network';
 
-declare function analyze$3(content: string): Set<string>;
+declare function analyze$4(content: string): Set<string>;
 
 interface TypedNode {
     label: string;
@@ -18,12 +19,12 @@ declare enum NodeType {
     fun = "fun"
 }
 
-declare function analyze$2(content: string, lineOffset?: number, jsx?: boolean): {
+declare function analyze$3(content: string, lineOffset?: number, jsx?: boolean): {
     nodes: Set<TypedNode>;
     edges: Map<TypedNode, Set<TypedNode>>;
 };
 
-declare function analyze$1(content: string, lineOffset?: number, jsx?: boolean): {
+declare function analyze$2(content: string, lineOffset?: number, jsx?: boolean): {
     graph: {
         nodes: Set<TypedNode>;
         edges: Map<TypedNode, Set<TypedNode>>;
@@ -31,7 +32,7 @@ declare function analyze$1(content: string, lineOffset?: number, jsx?: boolean):
     nodesUsedInTemplate: Set<string>;
 };
 
-declare function analyze(content: string, type?: "vue" | "react", lineOffset?: number, addInfo?: boolean): {
+declare function analyze$1(content: string, type?: "vue" | "react", lineOffset?: number, addInfo?: boolean): {
     graph: {
         nodes: Set<TypedNode>;
         edges: Map<TypedNode, Set<TypedNode>>;
@@ -39,6 +40,8 @@ declare function analyze(content: string, type?: "vue" | "react", lineOffset?: n
     nodesUsedInTemplate: Set<string>;
 };
 
+declare function analyze(styles: SFCStyleBlock[]): Set<string>;
+
 declare enum SuggestionType {
     info = "info",
     warning = "warning",
@@ -52,7 +55,7 @@ interface Suggestion {
 declare function gen(graph: {
     nodes: Set<TypedNode>;
     edges: Map<TypedNode, Set<TypedNode>>;
-}, usedNodes: Set<string>): Suggestion[];
+}, nodesUsedInTemplate: Set<string>, nodesUsedInStyle?: Set<string>): Suggestion[];
 
 type CustomNode = Node & {
     info: TypedNode['info'];
@@ -60,9 +63,9 @@ type CustomNode = Node & {
 declare function getVisData(graph: {
     nodes: Set<TypedNode>;
     edges: Map<TypedNode, Set<TypedNode>>;
-}, usedNodes: Set<string>): {
+}, nodesUsedInTemplate: Set<string>, nodesUsedInStyle?: Set<string>): {
     nodes: CustomNode[];
     edges: Edge[];
 };
 
-export { NodeType, type Suggestion, SuggestionType, type TypedNode, analyze$1 as analyzeOptions, analyze$2 as analyzeSetupScript, analyze$3 as analyzeTemplate, analyze as analyzeTsx, gen, getVisData };
+export { NodeType, type Suggestion, SuggestionType, type TypedNode, analyze$2 as analyzeOptions, analyze$3 as analyzeSetupScript, analyze as analyzeStyle, analyze$4 as analyzeTemplate, analyze$1 as analyzeTsx, gen, getVisData };

package/dist/index.d.ts

@@ -1,7 +1,8 @@
+import { SFCStyleBlock } from '@vue/compiler-sfc';
 export { parse } from '@vue/compiler-sfc';
 import { Edge, Node } from 'vis-network';
 
-declare function analyze$3(content: string): Set<string>;
+declare function analyze$4(content: string): Set<string>;
 
 interface TypedNode {
     label: string;
@@ -18,12 +19,12 @@ declare enum NodeType {
     fun = "fun"
 }
 
-declare function analyze$2(content: string, lineOffset?: number, jsx?: boolean): {
+declare function analyze$3(content: string, lineOffset?: number, jsx?: boolean): {
     nodes: Set<TypedNode>;
     edges: Map<TypedNode, Set<TypedNode>>;
 };
 
-declare function analyze$1(content: string, lineOffset?: number, jsx?: boolean): {
+declare function analyze$2(content: string, lineOffset?: number, jsx?: boolean): {
     graph: {
         nodes: Set<TypedNode>;
         edges: Map<TypedNode, Set<TypedNode>>;
@@ -31,7 +32,7 @@ declare function analyze$1(content: string, lineOffset?: number, jsx?: boolean):
     nodesUsedInTemplate: Set<string>;
 };
 
-declare function analyze(content: string, type?: "vue" | "react", lineOffset?: number, addInfo?: boolean): {
+declare function analyze$1(content: string, type?: "vue" | "react", lineOffset?: number, addInfo?: boolean): {
     graph: {
         nodes: Set<TypedNode>;
         edges: Map<TypedNode, Set<TypedNode>>;
@@ -39,6 +40,8 @@ declare function analyze(content: string, type?: "vue" | "react", lineOffset?: n
     nodesUsedInTemplate: Set<string>;
 };
 
+declare function analyze(styles: SFCStyleBlock[]): Set<string>;
+
 declare enum SuggestionType {
     info = "info",
     warning = "warning",
@@ -52,7 +55,7 @@ interface Suggestion {
 declare function gen(graph: {
     nodes: Set<TypedNode>;
     edges: Map<TypedNode, Set<TypedNode>>;
-}, usedNodes: Set<string>): Suggestion[];
+}, nodesUsedInTemplate: Set<string>, nodesUsedInStyle?: Set<string>): Suggestion[];
 
 type CustomNode = Node & {
     info: TypedNode['info'];
@@ -60,9 +63,9 @@ type CustomNode = Node & {
 declare function getVisData(graph: {
     nodes: Set<TypedNode>;
     edges: Map<TypedNode, Set<TypedNode>>;
-}, usedNodes: Set<string>): {
+}, nodesUsedInTemplate: Set<string>, nodesUsedInStyle?: Set<string>): {
     nodes: CustomNode[];
     edges: Edge[];
 };
 
-export { NodeType, type Suggestion, SuggestionType, type TypedNode, analyze$1 as analyzeOptions, analyze$2 as analyzeSetupScript, analyze$3 as analyzeTemplate, analyze as analyzeTsx, gen, getVisData };
+export { NodeType, type Suggestion, SuggestionType, type TypedNode, analyze$2 as analyzeOptions, analyze$3 as analyzeSetupScript, analyze as analyzeStyle, analyze$4 as analyzeTemplate, analyze$1 as analyzeTsx, gen, getVisData };

package/dist/index.js

@@ -34,6 +34,7 @@ __export(src_exports, {
   SuggestionType: () => SuggestionType,
   analyzeOptions: () => analyze3,
   analyzeSetupScript: () => analyze2,
+  analyzeStyle: () => analyze5,
   analyzeTemplate: () => analyze,
   analyzeTsx: () => analyze4,
   gen: () => gen,
@@ -72,7 +73,9 @@ function analyze(content) {
       if (path.node.key.type === "Identifier" && path.node.key.name === "ref") {
         if (path.node.value.type === "StringLiteral") {
           const name = path.node.value.value;
-          name && nodes.add(name);
+          if (name) {
+            nodes.add(name);
+          }
         }
       }
     },
@@ -81,7 +84,9 @@ function analyze(content) {
       if (path.node.callee.type === "Identifier" && path.node.callee.name === "_resolveComponent") {
         if (path.node.arguments[0].type === "StringLiteral") {
           const name = path.node.arguments[0].value;
-          name && nodes.add(name);
+          if (name) {
+            nodes.add(name);
+          }
         }
       }
     }
@@ -181,7 +186,7 @@ function getComment(node) {
       return;
     }
     if (_comment.value.trim().startsWith("*")) {
-      comment += `${_comment.value.trim().replace(/^[\s]*\*+[\s]*\**/gm, "").trim()}
+      comment += `${_comment.value.trim().replace(/^\s*\*+\s*\**/gm, "").trim()}
 `;
     }
   });
@@ -190,7 +195,7 @@ function getComment(node) {
       return;
     }
     if (_comment.value.trim().startsWith("*")) {
-      comment += `${_comment.value.trim().replace(/^[\s]*\*+[\s]*\**/gm, "").trim()}
+      comment += `${_comment.value.trim().replace(/^\s*\*+\s*\**/gm, "").trim()}
 `;
     } else {
       comment += `${_comment.value.trim()}
@@ -1883,6 +1888,67 @@ function analyze4(content, type = "vue", lineOffset = 0, addInfo = true) {
   };
 }
 
+// src/analyze/style.ts
+function lexBinding(content, start) {
+  let state = 0 /* inParens */;
+  let parenDepth = 0;
+  for (let i = start; i < content.length; i++) {
+    const char = content.charAt(i);
+    switch (state) {
+      case 0 /* inParens */:
+        if (char === "'") {
+          state = 1 /* inSingleQuoteString */;
+        } else if (char === '"') {
+          state = 2 /* inDoubleQuoteString */;
+        } else if (char === "(") {
+          parenDepth++;
+        } else if (char === ")") {
+          if (parenDepth > 0) {
+            parenDepth--;
+          } else {
+            return i;
+          }
+        }
+        break;
+      case 1 /* inSingleQuoteString */:
+        if (char === "'") {
+          state = 0 /* inParens */;
+        }
+        break;
+      case 2 /* inDoubleQuoteString */:
+        if (char === '"') {
+          state = 0 /* inParens */;
+        }
+        break;
+    }
+  }
+  return null;
+}
+function normalizeExpression(exp) {
+  exp = exp.trim();
+  if (exp[0] === "'" && exp[exp.length - 1] === "'" || exp[0] === '"' && exp[exp.length - 1] === '"') {
+    return exp.slice(1, -1);
+  }
+  return exp;
+}
+var vBindRE = /v-bind\s*\(/g;
+function analyze5(styles) {
+  const nodes = /* @__PURE__ */ new Set();
+  styles.forEach((style) => {
+    let match;
+    const content = style.content.replace(/\/\*([\s\S]*?)\*\/|\/\/.*/g, "");
+    while (match = vBindRE.exec(content)) {
+      const start = match.index + match[0].length;
+      const end = lexBinding(content, start);
+      if (end !== null) {
+        const variable = normalizeExpression(content.slice(start, end));
+        nodes.add(variable);
+      }
+    }
+  });
+  return nodes;
+}
+
 // src/suggest/split.ts
 function dfs(graph, node, targets, visited, component) {
   component.add(node);
@@ -1957,7 +2023,7 @@ function findLinearPaths(graph) {
   const linearPaths = [];
   const visitedNodes = /* @__PURE__ */ new Set();
   for (const [node, edges] of graph.entries()) {
-    if (edges.size === 1 && !visitedNodes.has(node) && node.type === "fun" /* fun */) {
+    if (edges.size === 1 && !visitedNodes.has(node)) {
       const path = [node];
       let nextNode = Array.from(edges)[0];
       visitedNodes.add(node);
@@ -2057,7 +2123,8 @@ var SuggestionType = /* @__PURE__ */ ((SuggestionType2) => {
   SuggestionType2["error"] = "error";
   return SuggestionType2;
 })(SuggestionType || {});
-function gen(graph, usedNodes) {
+function gen(graph, nodesUsedInTemplate, nodesUsedInStyle = /* @__PURE__ */ new Set()) {
+  const usedNodes = /* @__PURE__ */ new Set([...nodesUsedInTemplate, ...nodesUsedInStyle]);
   const suggestions = [];
   const splitedGraph = splitGraph(graph.edges);
   splitedGraph.forEach((g) => {
@@ -2121,7 +2188,8 @@ function gen(graph, usedNodes) {
 }
 
 // src/vis.ts
-function getVisData(graph, usedNodes) {
+function getVisData(graph, nodesUsedInTemplate, nodesUsedInStyle = /* @__PURE__ */ new Set()) {
+  const usedNodes = /* @__PURE__ */ new Set([...nodesUsedInTemplate, ...nodesUsedInStyle]);
   const nodes = [];
   const edges = [];
   graph.nodes.forEach((node) => {
@@ -2132,7 +2200,12 @@ function getVisData(graph, usedNodes) {
       group: usedNodes.has(node.label) || node.info?.used?.size ? "used" : "normal",
       title: `${node.info?.used?.size ? `used by ${Array.from(node.info?.used || [])?.map((i) => `\`${i}\``).join(",")}
 
-` : ""}${usedNodes.has(node.label) ? "used in template\n\n" : ""}${node.info?.comment || ""}`.trim() || void 0,
+` : ""}${usedNodes.has(node.label) ? `used in ${[
+        nodesUsedInStyle.has(node.label) ? "style" : "",
+        nodesUsedInTemplate.has(node.label) ? "template" : ""
+      ].filter(Boolean).join(" and ")}
+
+` : ""}${node.info?.comment || ""}`.trim() || void 0,
       info: node.info
     });
   });
@@ -2164,6 +2237,7 @@ function getVisData(graph, usedNodes) {
   SuggestionType,
   analyzeOptions,
   analyzeSetupScript,
+  analyzeStyle,
   analyzeTemplate,
   analyzeTsx,
   gen,