@designtools/codesurface 0.1.2 → 0.1.3

package/dist/cli.js

@@ -1297,8 +1297,8 @@ function categorizeToken(name, value) {
   return "other";
 }
 function getTokenGroup(name) {
-  const n3 = name.replace(/^--/, "");
-  const scaleMatch = n3.match(/^([\w]+)-\d+$/);
+  const n4 = name.replace(/^--/, "");
+  const scaleMatch = n4.match(/^([\w]+)-\d+$/);
   if (scaleMatch) return scaleMatch[1];
   const semanticPrefixes = [
     "primary",
@@ -1309,19 +1309,19 @@ function getTokenGroup(name) {
     "warning"
   ];
   for (const prefix of semanticPrefixes) {
-    if (n3 === prefix || n3.startsWith(`${prefix}-`)) return prefix;
+    if (n4 === prefix || n4.startsWith(`${prefix}-`)) return prefix;
   }
-  if (["background", "foreground", "card", "card-foreground", "popover", "popover-foreground"].includes(n3)) {
+  if (["background", "foreground", "card", "card-foreground", "popover", "popover-foreground"].includes(n4)) {
     return "surface";
   }
-  if (["border", "input", "ring", "muted", "muted-foreground", "accent", "accent-foreground"].includes(n3)) {
+  if (["border", "input", "ring", "muted", "muted-foreground", "accent", "accent-foreground"].includes(n4)) {
     return "utility";
   }
-  if (n3.startsWith("chart")) return "chart";
-  if (n3.startsWith("sidebar")) return "sidebar";
-  if (n3.startsWith("radius")) return "radius";
-  if (n3.startsWith("shadow")) return "shadow";
-  if (n3.startsWith("border-width")) return "border";
+  if (n4.startsWith("chart")) return "chart";
+  if (n4.startsWith("sidebar")) return "sidebar";
+  if (n4.startsWith("radius")) return "radius";
+  if (n4.startsWith("shadow")) return "shadow";
+  if (n4.startsWith("border-width")) return "border";
   return "other";
 }
 function detectColorFormat(value) {
@@ -1335,6 +1335,8 @@ function detectColorFormat(value) {
 // src/server/lib/scan-components.ts
 import fs5 from "fs/promises";
 import path5 from "path";
+import recast2 from "recast";
+import { namedTypes as n3 } from "ast-types";
 async function scanComponents(projectRoot) {
   const componentDirs = [
     "components/ui",
@@ -1355,86 +1357,253 @@ async function scanComponents(projectRoot) {
   const fullDir = path5.join(projectRoot, componentDir);
   const files = await fs5.readdir(fullDir);
   const tsxFiles = files.filter((f) => f.endsWith(".tsx"));
+  const parser = await getParser();
   const components = [];
   for (const file of tsxFiles) {
     const filePath = path5.join(componentDir, file);
     const source = await fs5.readFile(path5.join(projectRoot, filePath), "utf-8");
-    const entry = parseComponent(source, filePath);
-    if (entry) {
-      components.push(entry);
-    }
+    const entries = parseComponentAST(source, filePath, parser);
+    components.push(...entries);
   }
   return { components };
 }
-function parseComponent(source, filePath) {
-  const cvaMatch = source.match(
-    /const\s+(\w+)\s*=\s*cva\(\s*(["'`])([\s\S]*?)\2\s*,\s*\{/
-  );
-  const slotMatch = source.match(/data-slot=["'](\w+)["']/);
-  if (!slotMatch) return null;
-  const dataSlot = slotMatch[1];
-  const name = dataSlot.charAt(0).toUpperCase() + dataSlot.slice(1);
-  if (!cvaMatch) {
-    return {
+function parseComponentAST(source, filePath, parser) {
+  let ast;
+  try {
+    ast = recast2.parse(source, { parser });
+  } catch {
+    return [];
+  }
+  const cvaMap = /* @__PURE__ */ new Map();
+  const slotToComponent = /* @__PURE__ */ new Map();
+  const exportedNames = /* @__PURE__ */ new Set();
+  const acceptsChildrenSet = /* @__PURE__ */ new Set();
+  let currentComponentName = null;
+  recast2.visit(ast, {
+    // Find cva() calls: const fooVariants = cva("base classes", { variants: {...}, defaultVariants: {...} })
+    visitVariableDeclaration(path17) {
+      for (const decl of path17.node.declarations) {
+        if (n3.VariableDeclarator.check(decl) && n3.Identifier.check(decl.id) && n3.CallExpression.check(decl.init) && isIdentifierNamed(decl.init.callee, "cva")) {
+          const varName = decl.id.name;
+          const args = decl.init.arguments;
+          const baseClasses = extractStringValue(args[0]) || "";
+          const configArg = args[1];
+          const variants = configArg && n3.ObjectExpression.check(configArg) ? extractVariantsFromConfig(configArg) : [];
+          cvaMap.set(varName, { baseClasses, variants });
+        }
+      }
+      this.traverse(path17);
+    },
+    // Find forwardRef and function components to track data-slot and currentComponentName
+    visitCallExpression(path17) {
+      const node = path17.node;
+      if (isForwardRefCall(node)) {
+        const parent = path17.parent?.node;
+        if (n3.VariableDeclarator.check(parent) && n3.Identifier.check(parent.id)) {
+          currentComponentName = parent.id.name;
+        }
+      }
+      this.traverse(path17);
+    },
+    // Find data-slot JSX attributes
+    visitJSXAttribute(path17) {
+      const attr = path17.node;
+      if (n3.JSXIdentifier.check(attr.name) && attr.name.name === "data-slot" && n3.StringLiteral.check(attr.value)) {
+        const slotValue = attr.value.value;
+        const compName = findEnclosingComponentName(path17) || currentComponentName;
+        if (compName) {
+          slotToComponent.set(slotValue, compName);
+        }
+      }
+      this.traverse(path17);
+    },
+    // Detect {...props} spread in JSX — indicates component accepts children
+    visitJSXSpreadAttribute(path17) {
+      const expr = path17.node.argument;
+      if (n3.Identifier.check(expr) && expr.name === "props") {
+        const compName = findEnclosingComponentName(path17) || currentComponentName;
+        if (compName) {
+          acceptsChildrenSet.add(compName);
+        }
+      }
+      this.traverse(path17);
+    },
+    // Collect named exports: export { Button, Card, ... }
+    visitExportNamedDeclaration(path17) {
+      const node = path17.node;
+      if (node.specifiers) {
+        for (const spec of node.specifiers) {
+          if (n3.ExportSpecifier.check(spec) && n3.Identifier.check(spec.exported)) {
+            exportedNames.add(spec.exported.name);
+          }
+        }
+      }
+      if (node.declaration) {
+        if (n3.VariableDeclaration.check(node.declaration)) {
+          for (const decl of node.declaration.declarations) {
+            if (n3.VariableDeclarator.check(decl) && n3.Identifier.check(decl.id)) {
+              exportedNames.add(decl.id.name);
+            }
+          }
+        } else if (n3.FunctionDeclaration.check(node.declaration) && node.declaration.id) {
+          exportedNames.add(node.declaration.id.name);
+        }
+      }
+      this.traverse(path17);
+    },
+    // export default function Foo
+    visitExportDefaultDeclaration(path17) {
+      const decl = path17.node.declaration;
+      if (n3.FunctionDeclaration.check(decl) && decl.id) {
+        exportedNames.add(decl.id.name);
+      }
+      this.traverse(path17);
+    }
+  });
+  recast2.visit(ast, {
+    visitFunctionDeclaration(path17) {
+      const name = path17.node.id ? String(path17.node.id.name) : null;
+      if (name) {
+        currentComponentName = name;
+        this.traverse(path17);
+        currentComponentName = null;
+      } else {
+        this.traverse(path17);
+      }
+    },
+    visitJSXAttribute(path17) {
+      const attr = path17.node;
+      if (n3.JSXIdentifier.check(attr.name) && attr.name.name === "data-slot" && n3.StringLiteral.check(attr.value)) {
+        const slotValue = attr.value.value;
+        if (!slotToComponent.has(slotValue) && currentComponentName) {
+          slotToComponent.set(slotValue, currentComponentName);
+        }
+      }
+      this.traverse(path17);
+    }
+  });
+  const tokenRefs = extractTokenReferences(source);
+  const entries = [];
+  for (const [dataSlot, componentName] of slotToComponent) {
+    const exportName = exportedNames.has(componentName) ? componentName : null;
+    if (!exportName) continue;
+    const cvaVarName = findCvaForComponent(componentName, cvaMap);
+    const cvaData = cvaVarName ? cvaMap.get(cvaVarName) : null;
+    const name = dataSlot.split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("");
+    entries.push({
       name,
       filePath,
       dataSlot,
-      baseClasses: "",
-      variants: [],
-      tokenReferences: extractTokenReferences(source)
-    };
+      exportName,
+      baseClasses: cvaData?.baseClasses || "",
+      variants: cvaData?.variants || [],
+      tokenReferences: tokenRefs,
+      acceptsChildren: acceptsChildrenSet.has(componentName)
+    });
   }
-  const baseClasses = cvaMatch[3].trim();
-  const variants = parseVariants(source);
-  const tokenReferences = extractTokenReferences(source);
-  return {
-    name,
-    filePath,
-    dataSlot,
-    baseClasses,
-    variants,
-    tokenReferences
-  };
+  return entries;
+}
+function isIdentifierNamed(node, name) {
+  return n3.Identifier.check(node) && node.name === name;
+}
+function isObjectProperty(node) {
+  return n3.Property.check(node) || n3.ObjectProperty.check(node);
+}
+function isForwardRefCall(node) {
+  if (!n3.CallExpression.check(node)) return false;
+  if (isIdentifierNamed(node.callee, "forwardRef")) return true;
+  if (n3.MemberExpression.check(node.callee) && isIdentifierNamed(node.callee.object, "React") && isIdentifierNamed(node.callee.property, "forwardRef")) {
+    return true;
+  }
+  return false;
 }
-function parseVariants(source) {
+function extractStringValue(node) {
+  if (!node) return null;
+  if (n3.StringLiteral.check(node) || n3.Literal.check(node) && typeof node.value === "string") {
+    return String(node.value);
+  }
+  if (n3.TemplateLiteral.check(node) && node.expressions.length === 0 && node.quasis.length === 1) {
+    return node.quasis[0].value.cooked || node.quasis[0].value.raw;
+  }
+  return null;
+}
+function extractVariantsFromConfig(configObj) {
   const dimensions = [];
-  const variantsBlock = source.match(/variants\s*:\s*\{([\s\S]*?)\}\s*,?\s*defaultVariants/);
-  if (!variantsBlock) return dimensions;
-  const block = variantsBlock[1];
-  const dimRegex = /(\w+)\s*:\s*\{([^}]+)\}/g;
-  let dimMatch;
-  while ((dimMatch = dimRegex.exec(block)) !== null) {
-    const dimName = dimMatch[1];
-    const dimBody = dimMatch[2];
+  const variantsProp = findObjProperty(configObj, "variants");
+  if (!variantsProp || !n3.ObjectExpression.check(variantsProp.value)) return dimensions;
+  const defaultVariantsProp = findObjProperty(configObj, "defaultVariants");
+  const defaults = {};
+  if (defaultVariantsProp && n3.ObjectExpression.check(defaultVariantsProp.value)) {
+    for (const prop of defaultVariantsProp.value.properties) {
+      if (isObjectProperty(prop)) {
+        const key = getPropertyKeyName(prop);
+        const val = extractStringValue(prop.value);
+        if (key && val) defaults[key] = val;
+      }
+    }
+  }
+  for (const dimProp of variantsProp.value.properties) {
+    if (!isObjectProperty(dimProp)) continue;
+    const dimName = getPropertyKeyName(dimProp);
+    if (!dimName || !n3.ObjectExpression.check(dimProp.value)) continue;
     const options = [];
     const classes = {};
-    const optRegex = /["']?([\w-]+)["']?\s*:\s*\n?\s*["'`]([^"'`]*)["'`]/g;
-    let optMatch;
-    while ((optMatch = optRegex.exec(dimBody)) !== null) {
-      options.push(optMatch[1]);
-      classes[optMatch[1]] = optMatch[2].trim();
-    }
-    const defaultVariantsSection = source.match(
-      /defaultVariants\s*:\s*\{([^}]+)\}/
-    );
-    let defaultVal = options[0] || "";
-    if (defaultVariantsSection) {
-      const defMatch = defaultVariantsSection[1].match(
-        new RegExp(`${dimName}\\s*:\\s*["'](\\w+)["']`)
-      );
-      if (defMatch) defaultVal = defMatch[1];
+    for (const optProp of dimProp.value.properties) {
+      if (!isObjectProperty(optProp)) continue;
+      const optName = getPropertyKeyName(optProp);
+      const optValue = extractStringValue(optProp.value);
+      if (optName) {
+        options.push(optName);
+        classes[optName] = optValue || "";
+      }
     }
     if (options.length > 0) {
       dimensions.push({
         name: dimName,
         options,
-        default: defaultVal,
+        default: defaults[dimName] || options[0],
         classes
       });
     }
   }
   return dimensions;
 }
+function findObjProperty(obj, name) {
+  for (const prop of obj.properties) {
+    if (isObjectProperty(prop) && getPropertyKeyName(prop) === name) {
+      return prop;
+    }
+  }
+  return null;
+}
+function getPropertyKeyName(prop) {
+  if (n3.Identifier.check(prop.key)) return prop.key.name;
+  if (n3.StringLiteral.check(prop.key) || n3.Literal.check(prop.key) && typeof prop.key.value === "string") {
+    return prop.key.value;
+  }
+  return null;
+}
+function findEnclosingComponentName(astPath) {
+  let current = astPath.parent;
+  while (current) {
+    const node = current.node;
+    if (n3.VariableDeclarator.check(node) && n3.Identifier.check(node.id)) {
+      return node.id.name;
+    }
+    if (n3.FunctionDeclaration.check(node) && node.id) {
+      return node.id.name;
+    }
+    current = current.parent;
+  }
+  return null;
+}
+function findCvaForComponent(componentName, cvaMap) {
+  const lower = componentName.charAt(0).toLowerCase() + componentName.slice(1);
+  const expected = `${lower}Variants`;
+  if (cvaMap.has(expected)) return expected;
+  if (cvaMap.size === 1) return cvaMap.keys().next().value;
+  return null;
+}
 function extractTokenReferences(source) {
   const tokens = /* @__PURE__ */ new Set();
   const classStrings = source.match(/["'`][^"'`]*["'`]/g) || [];
@@ -1443,8 +1612,7 @@ function extractTokenReferences(source) {
     let match;
     while ((match = tokenPattern.exec(str)) !== null) {
       const val = match[1];
-      if (!val.match(/^\d/) && // not a number
-      !["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "full", "none"].includes(val) && !val.startsWith("[")) {
+      if (!val.match(/^\d/) && !["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "full", "none"].includes(val) && !val.startsWith("[")) {
         tokens.add(val.split("/")[0]);
       }
     }