jsc-typescript-ast-mcp 1.1.1 → 1.1.2

package/README.md

@@ -97,7 +97,7 @@ Analyze React component structures in your codebase.
   - `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
+- **Output**: JSON representation of the component tree structure, including optional element metadata such as `props`, `dataId`, and `onClick`
 
 ## License
 

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

@@ -2,7 +2,7 @@ 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 { extractOnClickInfoFromNode, extractPropsFromNode } from './props.js';
 import { handleTernary } from './ternary.js';
 export const extractFromExpression = (expression, project, options, depth) => {
     if (Node.isConditionalExpression(expression)) {
@@ -173,6 +173,10 @@ const buildNodeFromJSX = (node, project, options, depth) => {
             }
         }
     }
+    const onClick = extractOnClickInfoFromNode(node);
+    if (onClick) {
+        treeNode.onClick = onClick;
+    }
     // Recurse into children
     if (Node.isJsxElement(node)) {
         const children = node.getJsxChildren();

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

@@ -44,3 +44,62 @@ export const extractPropsFromNode = (node) => {
     }
     return props;
 };
+const getExpressionKind = (expression) => {
+    if (Node.isIdentifier(expression)) {
+        return 'identifier';
+    }
+    if (Node.isPropertyAccessExpression(expression)) {
+        return 'member-expression';
+    }
+    if (Node.isCallExpression(expression)) {
+        return 'call-expression';
+    }
+    if (Node.isArrowFunction(expression)) {
+        return 'arrow-function';
+    }
+    if (Node.isFunctionExpression(expression)) {
+        return 'function-expression';
+    }
+    return 'expression';
+};
+export const extractOnClickInfoFromNode = (node) => {
+    const attributes = Node.isJsxElement(node)
+        ? node.getOpeningElement().getAttributes()
+        : node.getAttributes();
+    const onClickAttribute = attributes.find((attribute) => Node.isJsxAttribute(attribute) &&
+        attribute.getNameNode().getText() === 'onClick');
+    if (!onClickAttribute || !Node.isJsxAttribute(onClickAttribute)) {
+        return undefined;
+    }
+    const initializer = onClickAttribute.getInitializer();
+    if (!initializer) {
+        return {
+            attribute: 'onClick',
+            expression: 'true',
+            kind: 'boolean-shorthand',
+        };
+    }
+    if (Node.isStringLiteral(initializer)) {
+        return {
+            attribute: 'onClick',
+            expression: initializer.getLiteralText(),
+            kind: 'string-literal',
+        };
+    }
+    if (Node.isJsxExpression(initializer)) {
+        const expression = initializer.getExpression();
+        if (!expression) {
+            return undefined;
+        }
+        return {
+            attribute: 'onClick',
+            expression: expression.getText(),
+            kind: getExpressionKind(expression),
+        };
+    }
+    return {
+        attribute: 'onClick',
+        expression: initializer.getText(),
+        kind: 'expression',
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsc-typescript-ast-mcp",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "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",