jsc-typescript-ast-mcp 1.0.11 → 1.1.0

package/README.md

@@ -96,6 +96,7 @@ Analyze React component structures in your codebase.
 - **Input**:
   - `entryFilePath`: Path to the entry file
   - `maxDepth`: Maximum depth of the component tree (default: 3)
+  - `data-id` (optional): Attribute name to capture into `TreeNode.dataId` (example: `data-attribute-id`)
 - **Output**: JSON representation of the component tree structure
 
 ## License

package/dist/ts-morph/componentTree.js

@@ -11,9 +11,13 @@ export const registerComponentTreeTool = (server) => {
                 .number()
                 .default(3)
                 .describe('Maximum depth of the component tree (default: 3)'),
+            'data-id': z
+                .string()
+                .optional()
+                .describe('Optional attribute name to capture as TreeNode.dataId (example: data-attribute-id)'),
         },
-    }, async ({ entryFilePath, maxDepth }) => {
-        const tree = getComponentTree(entryFilePath, maxDepth);
+    }, async ({ entryFilePath, maxDepth, ['data-id']: dataIdAttribute }) => {
+        const tree = getComponentTree(entryFilePath, maxDepth, dataIdAttribute);
         return {
             content: [
                 {
@@ -24,7 +28,7 @@ export const registerComponentTreeTool = (server) => {
         };
     });
 };
-const getComponentTree = (entryFilePath, maxDepth) => {
+const getComponentTree = (entryFilePath, maxDepth, dataIdAttribute) => {
     const project = createProject();
     const sourceFile = project.getSourceFile(entryFilePath);
     if (!sourceFile) {
@@ -33,5 +37,6 @@ const getComponentTree = (entryFilePath, maxDepth) => {
     const component = getComponent(sourceFile);
     return analyzeComponent(component, project, {
         maxDepth,
+        dataIdAttribute,
     }, 0);
 };

package/dist/ts-morph/utils/analyzeComponent.js

@@ -7,6 +7,7 @@ export const analyzeComponent = (node, project, options, currentDepth) => {
         name,
         type: 'component',
         children: [],
+        filePath: node.getSourceFile().getFilePath(),
     };
     if (currentDepth >= options.maxDepth) {
         return root;

package/dist/ts-morph/utils/extractJsx.js

@@ -2,8 +2,9 @@ import { Node, SyntaxKind, } from 'ts-morph';
 import { analyzeComponent } from './analyzeComponent.js';
 import { getComponent } from './component.js';
 import { getTagName } from './nameHelper.js';
+import { extractPropsFromNode } from './props.js';
 import { handleTernary } from './ternary.js';
-const extractFromExpression = (expression, project, options, depth) => {
+export const extractFromExpression = (expression, project, options, depth) => {
     if (Node.isConditionalExpression(expression)) {
         return handleTernary(expression, project, options, depth);
     }
@@ -15,7 +16,7 @@ const extractFromExpression = (expression, project, options, depth) => {
     }
     return extractJSX(expression, project, options, depth);
 };
-const handleLogicalAnd = (expression, project, options, depth) => {
+export const handleLogicalAnd = (expression, project, options, depth) => {
     if (expression.getOperatorToken().getText() !== '&&') {
         return [];
     }
@@ -103,7 +104,7 @@ const resolveComponentFile = (node) => {
     }
     return null;
 };
-function buildNodeFromJSX(node, project, options, depth) {
+const buildNodeFromJSX = (node, project, options, depth) => {
     const tagName = getTagName(node);
     const isHtml = tagName[0] === tagName[0].toLowerCase();
     const treeNode = {
@@ -111,6 +112,19 @@ function buildNodeFromJSX(node, project, options, depth) {
         type: isHtml ? 'html' : 'component',
         children: [],
     };
+    if (!isHtml) {
+        treeNode.filePath = node.getSourceFile().getFilePath();
+    }
+    const props = extractPropsFromNode(node);
+    if (props) {
+        treeNode.props = props;
+        if (options.dataIdAttribute && options.dataIdAttribute in props) {
+            const dataIdValue = props[options.dataIdAttribute];
+            if (dataIdValue !== undefined && dataIdValue !== null) {
+                treeNode.dataId = String(dataIdValue);
+            }
+        }
+    }
     // Recurse into children
     if (Node.isJsxElement(node)) {
         const children = node.getJsxChildren();
@@ -140,12 +154,13 @@ function buildNodeFromJSX(node, project, options, depth) {
     if (!isHtml && depth < options.maxDepth) {
         const resolved = resolveComponentFile(node);
         if (resolved) {
+            treeNode.filePath = resolved.getSourceFile().getFilePath();
             const subTree = analyzeComponent(resolved, project, options, depth);
             treeNode.children.push(...subTree.children);
         }
     }
     return treeNode;
-}
+};
 export const findReturnedJSX = (node) => {
     const returnStmt = node.getDescendantsOfKind(SyntaxKind.ReturnStatement)[0];
     if (returnStmt) {

package/dist/ts-morph/utils/props.js

@@ -0,0 +1,46 @@
+import { Node, } from 'ts-morph';
+const extractPropValue = (attribute) => {
+    const initializer = attribute.getInitializer();
+    if (!initializer) {
+        return true;
+    }
+    if (Node.isStringLiteral(initializer)) {
+        return initializer.getLiteralText();
+    }
+    if (Node.isJsxExpression(initializer)) {
+        const expression = initializer.getExpression();
+        if (!expression) {
+            return true;
+        }
+        return expression.getText();
+    }
+    return initializer.getText();
+};
+const addSpreadProps = (props, spreadAttribute) => {
+    const expression = spreadAttribute.getExpression();
+    const expressionText = expression.getText();
+    // Keep spread attributes as references so callers can resolve them later if needed.
+    props[`...${expressionText}`] = expressionText;
+};
+export const extractPropsFromNode = (node) => {
+    const attributes = Node.isJsxElement(node)
+        ? node.getOpeningElement().getAttributes()
+        : node.getAttributes();
+    if (attributes.length === 0) {
+        return undefined;
+    }
+    const props = {};
+    for (const attribute of attributes) {
+        if (Node.isJsxAttribute(attribute)) {
+            props[attribute.getNameNode().getText()] = extractPropValue(attribute);
+            continue;
+        }
+        if (Node.isJsxSpreadAttribute(attribute)) {
+            addSpreadProps(props, attribute);
+        }
+    }
+    if (Object.keys(props).length === 0) {
+        return undefined;
+    }
+    return props;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsc-typescript-ast-mcp",
-  "version": "1.0.11",
+  "version": "1.1.0",
   "mcpName": "io.github.jscoobyced/jsc-typescript-ast-mcp",
   "description": "A Model Context Protocol (MCP) server that provides an abstract syntax tree (AST) representation of TypeScript code using the ts-morph library. It allows clients to analyze and manipulate TypeScript code structures, making it easier for AI models to understand and work with TypeScript projects. You can create a JSON representation of your React components, and use it for various purposes such as documentation, code analysis, or even generating new code based on existing components.",
   "main": "dist/index.js",
@@ -21,6 +21,7 @@
   "scripts": {
     "format": "prettier --write .",
     "build": "tsc",
+    "lint": "eslint . --ext .ts",
     "test:mcp": "npx @modelcontextprotocol/inspector node dist/index.js"
   },
   "bin": {