king-design-analyzer 1.0.0

package/dist/chunk-5IF32MBB.js

@@ -0,0 +1,603 @@
+'use strict';
+
+var fs = require('fs/promises');
+var fsSync = require('fs');
+var path = require('path');
+var compilerSfc = require('@vue/compiler-sfc');
+var ts = require('typescript');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var fs__namespace = /*#__PURE__*/_interopNamespace(fs);
+var fsSync__namespace = /*#__PURE__*/_interopNamespace(fsSync);
+var path__namespace = /*#__PURE__*/_interopNamespace(path);
+var ts__namespace = /*#__PURE__*/_interopNamespace(ts);
+
+// src/analysis/componentRegistry.ts
+var ComponentRegistry = class {
+  constructor() {
+    this.components = /* @__PURE__ */ new Map();
+    this.loaded = false;
+    this.watcher = null;
+    // Hardcoded path to metadata in this specific workspace environment
+    this.metadataPath = path__namespace.join(process.cwd(), "components");
+  }
+  async load() {
+    if (this.loaded) return;
+    await this.reload();
+    this.loaded = true;
+    this.startWatching();
+  }
+  /**
+   * 重新加载所有组件元数据
+   */
+  async reload() {
+    const newComponents = /* @__PURE__ */ new Map();
+    try {
+      const files = await fs__namespace.readdir(this.metadataPath);
+      for (const file of files) {
+        if (!file.endsWith(".json")) continue;
+        const content = await fs__namespace.readFile(path__namespace.join(this.metadataPath, file), "utf-8");
+        const data = JSON.parse(content);
+        newComponents.set(data.name, data);
+        if (data.subComponents) {
+          for (const sub of data.subComponents) {
+            newComponents.set(sub.name, sub);
+          }
+        }
+      }
+      this.components = newComponents;
+      console.log(`[ComponentRegistry] ${this.loaded ? "Reloaded" : "Loaded"} ${this.components.size} components.`);
+    } catch (error) {
+      console.error("[ComponentRegistry] Failed to load metadata:", error);
+    }
+  }
+  /**
+   * 开始监听文件变化
+   */
+  startWatching() {
+    if (this.watcher) return;
+    try {
+      let reloadTimeout = null;
+      this.watcher = fsSync__namespace.watch(this.metadataPath, (eventType, filename) => {
+        if (!filename?.endsWith(".json")) return;
+        console.log(`[ComponentRegistry] Detected change: ${filename} (${eventType})`);
+        if (reloadTimeout) {
+          clearTimeout(reloadTimeout);
+        }
+        reloadTimeout = setTimeout(() => {
+          this.reload();
+        }, 500);
+      });
+      console.log(`[ComponentRegistry] Hot reload enabled for: ${this.metadataPath}`);
+    } catch (error) {
+      console.warn("[ComponentRegistry] Could not enable hot reload:", error);
+    }
+  }
+  /**
+   * 停止监听
+   */
+  stopWatching() {
+    if (this.watcher) {
+      this.watcher.close();
+      this.watcher = null;
+      console.log("[ComponentRegistry] Hot reload disabled.");
+    }
+  }
+  getComponent(name) {
+    return this.components.get(name);
+  }
+  getAllComponentNames() {
+    return Array.from(this.components.keys());
+  }
+  isKnownComponent(name) {
+    return this.components.has(name);
+  }
+};
+var componentRegistry = new ComponentRegistry();
+async function analyzeCodeWithAST(code) {
+  await componentRegistry.load();
+  const violations = [];
+  const { descriptor, errors } = compilerSfc.parse(code);
+  if (errors.length > 0) {
+    return violations;
+  }
+  const scriptContent = descriptor.scriptSetup?.content || descriptor.script?.content || "";
+  if (scriptContent) {
+    const sourceFile = ts__namespace.createSourceFile(
+      "temp.ts",
+      scriptContent,
+      ts__namespace.ScriptTarget.Latest,
+      true
+    );
+    ts__namespace.forEachChild(sourceFile, (node) => {
+      if (ts__namespace.isImportDeclaration(node)) {
+        checkImport(node, violations, sourceFile);
+      }
+    });
+  }
+  if (descriptor.template?.ast) {
+    checkTemplate(descriptor.template.ast, violations, null);
+  }
+  if (/<Dropdown[\s\S]*?<template\s+(#menu|v-slot:menu)>/i.test(code)) {
+    violations.push({
+      rule: "DropdownMenu \u4E0D\u80FD\u653E\u5728 #menu \u63D2\u69FD\u4E2D",
+      match: "<template #menu>...<DropdownMenu>",
+      suggestion: "\u8BF7\u79FB\u9664 <template #menu>\uFF0C\u5C06 DropdownMenu \u76F4\u63A5\u4F5C\u4E3A Dropdown \u7684\u7B2C\u4E8C\u4E2A\u5B50\u5143\u7D20"
+    });
+  }
+  if (scriptContent && descriptor.template?.content) {
+    const scriptBindings = extractScriptBindings(scriptContent);
+    checkTemplateVariables(descriptor.template.content, scriptBindings, violations);
+  }
+  return violations;
+}
+function extractScriptBindings(scriptContent) {
+  const bindings = /* @__PURE__ */ new Set();
+  const vueBuiltins = [
+    "ref",
+    "reactive",
+    "computed",
+    "watch",
+    "watchEffect",
+    "onMounted",
+    "onUnmounted",
+    "onBeforeMount",
+    "onBeforeUnmount",
+    "defineProps",
+    "defineEmits",
+    "defineExpose",
+    "withDefaults",
+    "toRef",
+    "toRefs",
+    "nextTick",
+    "inject",
+    "provide",
+    "readonly",
+    "shallowRef",
+    "shallowReactive",
+    "triggerRef",
+    "customRef",
+    "h",
+    "createVNode",
+    "resolveComponent",
+    "getCurrentInstance"
+  ];
+  vueBuiltins.forEach((b) => bindings.add(b));
+  [
+    "console",
+    "window",
+    "document",
+    "Math",
+    "JSON",
+    "Date",
+    "Array",
+    "Object",
+    "String",
+    "Number",
+    "Boolean",
+    "Promise",
+    "Error",
+    "RegExp",
+    "Map",
+    "Set",
+    "parseInt",
+    "parseFloat",
+    "isNaN",
+    "isFinite",
+    "setTimeout",
+    "setInterval",
+    "clearTimeout",
+    "clearInterval",
+    "fetch",
+    "undefined",
+    "null",
+    "true",
+    "false"
+  ].forEach((b) => bindings.add(b));
+  try {
+    let visit2 = function(node) {
+      if (ts__namespace.isVariableDeclaration(node) && ts__namespace.isIdentifier(node.name)) {
+        bindings.add(node.name.text);
+      }
+      if (ts__namespace.isFunctionDeclaration(node) && node.name) {
+        bindings.add(node.name.text);
+      }
+      if (ts__namespace.isImportDeclaration(node)) {
+        const namedBindings = node.importClause?.namedBindings;
+        if (namedBindings && ts__namespace.isNamedImports(namedBindings)) {
+          namedBindings.elements.forEach((element) => {
+            bindings.add(element.name.text);
+          });
+        }
+        if (node.importClause?.name) {
+          bindings.add(node.importClause.name.text);
+        }
+      }
+      if (ts__namespace.isCallExpression(node)) {
+        const expr = node.expression;
+        if (ts__namespace.isIdentifier(expr) && expr.text === "defineProps") {
+        }
+      }
+      ts__namespace.forEachChild(node, visit2);
+    };
+    var visit = visit2;
+    const sourceFile = ts__namespace.createSourceFile(
+      "temp.ts",
+      scriptContent,
+      ts__namespace.ScriptTarget.Latest,
+      true
+    );
+    visit2(sourceFile);
+  } catch {
+  }
+  return bindings;
+}
+function checkTemplateVariables(templateContent, bindings, violations) {
+  const interpolationRegex = /\{\{\s*([^}]+)\s*\}\}/g;
+  let match;
+  while ((match = interpolationRegex.exec(templateContent)) !== null) {
+    const expression = match[1].trim();
+    const identifiers = extractIdentifiersFromExpression(expression);
+    for (const id of identifiers) {
+      if (!bindings.has(id) && !isTemplateBuiltin(id)) {
+        violations.push({
+          rule: `\u6A21\u677F\u5F15\u7528\u4E86\u672A\u5B9A\u4E49\u7684\u53D8\u91CF: ${id}`,
+          match: `{{ ${expression} }}`,
+          suggestion: `\u8BF7\u786E\u4FDD\u5728 <script setup> \u4E2D\u5B9A\u4E49\u53D8\u91CF ${id}\uFF0C\u6216\u68C0\u67E5\u62FC\u5199\u662F\u5426\u6B63\u786E`
+        });
+      }
+    }
+  }
+  const bindRegex = /(?::|v-bind:)[\w.-]+="([^"]+)"/g;
+  while ((match = bindRegex.exec(templateContent)) !== null) {
+    const expression = match[1].trim();
+    const identifiers = extractIdentifiersFromExpression(expression);
+    for (const id of identifiers) {
+      if (!bindings.has(id) && !isTemplateBuiltin(id)) {
+        violations.push({
+          rule: `\u7ED1\u5B9A\u5C5E\u6027\u5F15\u7528\u4E86\u672A\u5B9A\u4E49\u7684\u53D8\u91CF: ${id}`,
+          match: match[0],
+          suggestion: `\u8BF7\u786E\u4FDD\u5728 <script setup> \u4E2D\u5B9A\u4E49\u53D8\u91CF ${id}`
+        });
+      }
+    }
+  }
+  const eventRegex = /(?:@|v-on:)[\w.-]+="([^"]+)"/g;
+  while ((match = eventRegex.exec(templateContent)) !== null) {
+    const expression = match[1].trim();
+    if (expression.includes("(") || expression.includes("=")) continue;
+    const identifiers = extractIdentifiersFromExpression(expression);
+    for (const id of identifiers) {
+      if (!bindings.has(id) && !isTemplateBuiltin(id)) {
+        violations.push({
+          rule: `\u4E8B\u4EF6\u5904\u7406\u5668\u5F15\u7528\u4E86\u672A\u5B9A\u4E49\u7684\u51FD\u6570: ${id}`,
+          match: match[0],
+          suggestion: `\u8BF7\u786E\u4FDD\u5728 <script setup> \u4E2D\u5B9A\u4E49\u51FD\u6570 ${id}`
+        });
+      }
+    }
+  }
+}
+function extractIdentifiersFromExpression(expression) {
+  expression = expression.replace(/'[^']*'/g, "").replace(/"[^"]*"/g, "").replace(/`[^`]*`/g, "");
+  const identifiers = [];
+  const idRegex = /\b([a-zA-Z_$][a-zA-Z0-9_$]*)\b/g;
+  let match;
+  while ((match = idRegex.exec(expression)) !== null) {
+    const id = match[1];
+    if (!isJsKeyword(id)) {
+      identifiers.push(id);
+    }
+  }
+  return identifiers;
+}
+function isTemplateBuiltin(id) {
+  const builtins = [
+    "$event",
+    "$refs",
+    "$slots",
+    "$attrs",
+    "$emit",
+    "$route",
+    "$router",
+    "$t",
+    "$i18n",
+    "item",
+    "index",
+    "key",
+    "value"
+  ];
+  return builtins.includes(id);
+}
+function isJsKeyword(id) {
+  const keywords = [
+    "if",
+    "else",
+    "for",
+    "while",
+    "do",
+    "switch",
+    "case",
+    "break",
+    "continue",
+    "return",
+    "try",
+    "catch",
+    "finally",
+    "throw",
+    "new",
+    "delete",
+    "typeof",
+    "instanceof",
+    "void",
+    "in",
+    "of",
+    "this",
+    "class",
+    "extends",
+    "super",
+    "import",
+    "export",
+    "default",
+    "const",
+    "let",
+    "var",
+    "function",
+    "async",
+    "await",
+    "yield",
+    "true",
+    "false",
+    "null",
+    "undefined",
+    "NaN",
+    "Infinity"
+  ];
+  return keywords.includes(id);
+}
+function checkImport(node, violations, sourceFile) {
+  const moduleSpecifier = node.moduleSpecifier.getText(sourceFile).replace(/['"]/g, "");
+  if (moduleSpecifier === "@king-design/vue" || moduleSpecifier === "@ksyun-internal/versatile") {
+    const namedBindings = node.importClause?.namedBindings;
+    if (namedBindings && ts__namespace.isNamedImports(namedBindings)) {
+      namedBindings.elements.forEach((element) => {
+        const originalName = element.propertyName ? element.propertyName.text : element.name.text;
+        const localName = element.name.text;
+        const isAlias = !!element.propertyName;
+        if (isAlias) {
+          violations.push({
+            rule: `\u7981\u6B62\u5BF9\u7EC4\u4EF6 ${originalName} \u4F7F\u7528\u522B\u540D\u5BFC\u5165`,
+            match: `${originalName} as ${localName}`,
+            suggestion: `\u76F4\u63A5\u4F7F\u7528\u539F\u540D: import { ${originalName} } from '${moduleSpecifier}'`
+          });
+        }
+        if (componentRegistry.isKnownComponent(originalName)) {
+          const metadata = componentRegistry.getComponent(originalName);
+          const expectedPackageMatch = metadata?.importStatement?.match(/from\s+['"]([^'"]+)['"]/);
+          if (expectedPackageMatch) {
+            const expectedPackage = expectedPackageMatch[1];
+            if (expectedPackage !== moduleSpecifier) {
+              violations.push({
+                rule: `\u7EC4\u4EF6 ${originalName} \u5BFC\u5165\u6E90\u9519\u8BEF`,
+                match: `import { ... } from '${moduleSpecifier}'`,
+                suggestion: `\u5E94\u4ECE '${expectedPackage}' \u5BFC\u5165`
+              });
+            }
+          }
+        } else {
+          violations.push({
+            rule: "\u5F15\u7528\u4E86\u4E0D\u5B58\u5728\u7684\u7EC4\u4EF6/\u5BFC\u51FA",
+            match: originalName,
+            suggestion: `\u8BF7\u786E\u8BA4 ${originalName} \u662F\u5426\u5B58\u5728\u4E8E ${moduleSpecifier}\u3002\u5EFA\u8BAE\u67E5\u770B\u6587\u6863\u3002`
+          });
+        }
+      });
+    }
+  }
+}
+var NESTING_RULES = {
+  "DropdownItem": ["DropdownMenu"],
+  "DropdownMenu": ["Dropdown"],
+  "TableColumn": ["Table"],
+  "FormItem": ["Form"],
+  "Tab": ["Tabs"],
+  "Step": ["Steps"],
+  "MenuItem": ["Menu", "SubMenu"],
+  "SubMenu": ["Menu"],
+  "BreadcrumbItem": ["Breadcrumb"],
+  "CollapseItem": ["Collapse"],
+  "CarouselItem": ["Carousel"],
+  "DescriptionItem": ["Descriptions"]
+};
+function checkTemplate(node, violations, parentTagName) {
+  if (node.type === 1) {
+    const tagName = node.tag;
+    if (componentRegistry.isKnownComponent(tagName)) {
+      const metadata = componentRegistry.getComponent(tagName);
+      const requiredParents = metadata?.requiredParent ? [metadata.requiredParent] : NESTING_RULES[tagName];
+      if (requiredParents && requiredParents.length > 0) {
+        if (parentTagName && !requiredParents.includes(parentTagName)) {
+          const isInSlotTemplate = parentTagName === "template";
+          if (!isInSlotTemplate) {
+            violations.push({
+              rule: `${tagName} \u5FC5\u987B\u653E\u5728 ${requiredParents.join(" \u6216 ")} \u7EC4\u4EF6\u5185`,
+              match: tagName,
+              suggestion: `\u8BF7\u5C06 ${tagName} \u79FB\u52A8\u5230 ${requiredParents[0]} \u7EC4\u4EF6\u4E2D`
+            });
+          }
+        }
+      }
+    }
+    if (tagName === "Table") {
+      node.props.forEach((prop) => {
+        if (prop.type === 6 && (prop.name === "rowKey" || prop.name === "row-key")) {
+          violations.push({
+            rule: "Table\u7EC4\u4EF6 rowKey \u5C5E\u6027 usage \u9519\u8BEF",
+            match: `rowKey="${prop.value?.content || ""}"`,
+            suggestion: 'rowKey \u5FC5\u987B\u662F\u4E00\u4E2A\u8FD4\u56DE\u552F\u4E00\u503C\u7684\u51FD\u6570\u3002\u8BF7\u4F7F\u7528\u7ED1\u5B9A\u8BED\u6CD5\uFF0C\u4F8B\u5982 :rowKey="(row) => row.id"'
+          });
+        }
+      });
+    }
+    if (tagName === "Icon") {
+      node.props.forEach((prop) => {
+        if (prop.type === 6 && prop.name === "name") {
+          violations.push({
+            rule: "Icon \u7EC4\u4EF6\u7981\u6B62\u4F7F\u7528 name \u5C5E\u6027",
+            match: `name="${prop.value?.content || ""}"`,
+            suggestion: '\u8BF7\u4F7F\u7528 class \u5C5E\u6027\u6307\u5B9A\u56FE\u6807\uFF0C\u4F8B\u5982: class="k-icon-search"'
+          });
+        }
+      });
+    }
+    if (componentRegistry.isKnownComponent(tagName)) {
+      const metadata = componentRegistry.getComponent(tagName);
+      if (metadata) {
+        let customTagName = null;
+        const tagNameProp = node.props.find(
+          (p) => p.type === 6 && p.name === "tagName" || p.type === 7 && p.name === "bind" && p.arg?.content === "tagName"
+        );
+        if (tagNameProp?.type === 6 && tagNameProp.value?.content) {
+          customTagName = tagNameProp.value.content;
+        }
+        const dynamicAllowedProps = [];
+        if (customTagName === "a") {
+          dynamicAllowedProps.push("href", "target", "rel", "download");
+        }
+        node.props.forEach((prop) => {
+          if (prop.type === 6) {
+            const propName = prop.name;
+            const camelCaseProp = propName.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+            const isPropValid = metadata.props.some(
+              (p) => p.name === propName || p.name === camelCaseProp || p.name.toLowerCase() === propName.toLowerCase()
+            );
+            const isDynamicallyAllowed = dynamicAllowedProps.includes(propName);
+            if (!isPropValid && !isDynamicallyAllowed && !["class", "style", "key", "ref"].includes(propName) && !propName.startsWith("data-")) {
+              if (metadata.props.length > 0) {
+                violations.push({
+                  rule: `\u5C5E\u6027 ${propName} \u4E0D\u5B58\u5728\u4E8E ${tagName}`,
+                  match: propName,
+                  suggestion: `\u53EF\u7528\u5C5E\u6027: ${metadata.props.map((p) => p.name).join(", ")}`
+                });
+              }
+            }
+            if (isPropValid) {
+              const targetProp = metadata.props.find(
+                (p) => p.name === propName || p.name === camelCaseProp || p.name.toLowerCase() === propName.toLowerCase()
+              );
+              if (targetProp) {
+                const attrValue = prop.value?.content;
+                if (attrValue) {
+                  let cleanAllowedValues = [];
+                  if (targetProp.allowedValues && targetProp.allowedValues.length > 0) {
+                    cleanAllowedValues = targetProp.allowedValues.map((av) => String(av.value).replace(/['"]/g, ""));
+                  } else if (targetProp.type.kind === "union" && targetProp.type.unionTypes) {
+                    cleanAllowedValues = targetProp.type.unionTypes.map((v) => String(v).replace(/['"]/g, ""));
+                  }
+                  if (cleanAllowedValues.length > 0) {
+                    const isValueValid = cleanAllowedValues.includes(attrValue);
+                    if (!isValueValid) {
+                      console.log(`\u274C [AST Reviewer] \u5C5E\u6027\u503C\u6821\u9A8C\u5931\u8D25: ${tagName}.${propName}="${attrValue}" (\u5141\u8BB8\u503C: ${cleanAllowedValues.join(" | ")})`);
+                      violations.push({
+                        rule: `${tagName} \u7684\u5C5E\u6027 ${propName} \u7684\u503C "${attrValue}" \u65E0\u6548`,
+                        match: `${propName}="${attrValue}"`,
+                        suggestion: `\u5141\u8BB8\u7684\u503C: ${cleanAllowedValues.join(" | ")}`
+                      });
+                    }
+                  }
+                }
+              }
+            }
+          } else if (prop.type === 7) {
+            const dirName = prop.name;
+            const arg = prop.arg?.content;
+            if (dirName === "on" && arg) {
+              const eventName = arg;
+              if (eventName.startsWith("$change:") || eventName.startsWith("update:")) {
+                return;
+              }
+              const camelCaseEvent = eventName.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+              const isEventValid = metadata.events.some(
+                (e) => e.name === eventName || e.name === camelCaseEvent || e.name.toLowerCase() === eventName.toLowerCase()
+              );
+              const nativeEvents = [
+                "click",
+                "dblclick",
+                "mousedown",
+                "mouseup",
+                "mousemove",
+                "mouseenter",
+                "mouseleave",
+                "keydown",
+                "keyup",
+                "keypress",
+                "focus",
+                "blur",
+                "input",
+                "submit",
+                "scroll",
+                "resize",
+                "contextmenu",
+                "wheel",
+                "touchstart",
+                "touchend",
+                "touchmove"
+              ];
+              const isNativeEvent = nativeEvents.includes(eventName);
+              if (!isEventValid && !isNativeEvent && metadata.events.length > 0) {
+                violations.push({
+                  rule: `\u4E8B\u4EF6 @${eventName} \u4E0D\u5B58\u5728\u4E8E ${tagName}`,
+                  match: `@${eventName}`,
+                  suggestion: `\u53EF\u7528\u4E8B\u4EF6: ${metadata.events.map((e) => e.name).join(", ") || "\u65E0\u81EA\u5B9A\u4E49\u4E8B\u4EF6"}`
+                });
+              }
+            }
+          }
+        });
+        if (node.children && metadata.slots && metadata.slots.length > 0) {
+          node.children.forEach((child) => {
+            if (child.type === 1 && child.tag === "template") {
+              child.props.forEach((prop) => {
+                if (prop.type === 7 && prop.name === "slot") {
+                  const slotName = prop.arg?.content || "default";
+                  const isSlotValid = metadata.slots.some((s) => s.name === slotName);
+                  if (!isSlotValid) {
+                    violations.push({
+                      rule: `\u63D2\u69FD #${slotName} \u4E0D\u5B58\u5728\u4E8E ${tagName}`,
+                      match: `#${slotName}`,
+                      suggestion: `\u53EF\u7528\u63D2\u69FD: ${metadata.slots.map((s) => s.name).join(", ")}`
+                    });
+                  }
+                }
+              });
+            }
+          });
+        }
+      }
+    }
+  }
+  if (node.children) {
+    const currentTag = node.type === 1 ? node.tag : null;
+    node.children.forEach((child) => checkTemplate(child, violations, currentTag));
+  }
+}
+
+exports.analyzeCodeWithAST = analyzeCodeWithAST;
+exports.componentRegistry = componentRegistry;