jsc-typescript-ast-mcp 1.1.6 → 1.1.8

package/README.md

@@ -50,7 +50,7 @@ To use this MCP server in Claude Code:
         "typescript-ast"
       ],
       "env": {
-        "PROJECT_TSCONFIG_PATH": "PATH/TO/YOUR/TYPESCRIPT?PROJECT/tsconfig.json"
+        "PROJECT_TSCONFIG_PATH": "PATH/TO/YOUR/TYPESCRIPT/PROJECT/tsconfig.json"
       }
     }
   }

package/dist/main.js

@@ -0,0 +1,9 @@
+import path from 'path';
+import { getComponentTree } from './ts-morph/componentTree.js';
+const rootDir = __dirname === 'dist'
+    ? path.resolve(__dirname, '../../')
+    : __dirname === 'code'
+        ? path.resolve(__dirname, '../')
+        : __dirname;
+const testApp = getComponentTree(path.resolve(rootDir, 'sample-app/src/App.tsx'), 5, 'my-data-id');
+console.log(JSON.stringify(testApp, null, 2));

package/dist/ts-morph/componentTree.js

@@ -28,7 +28,7 @@ export const registerComponentTreeTool = (server) => {
         };
     });
 };
-const getComponentTree = (entryFilePath, maxDepth, dataIdAttribute) => {
+export const getComponentTree = (entryFilePath, maxDepth, dataIdAttribute) => {
     const project = createProject();
     const sourceFile = project.getSourceFile(entryFilePath);
     if (!sourceFile) {

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 { extractAttributeValueFromNode, extractOnClickInfoFromNode, extractPropsFromNode, } from './props.js';
+import { extractAttributeValueFromNode, extractCtaInfoFromNode, extractPropsFromNode, } from './props.js';
 import { handleTernary } from './ternary.js';
 export const extractFromExpression = (expression, project, options, depth) => {
     if (Node.isConditionalExpression(expression)) {
@@ -42,7 +42,9 @@ const extractFromIdentifier = (expression, project, options, depth) => {
 const buildNodeFromJsxFragment = (node, project, options, depth) => ({
     name: 'Fragment',
     type: 'fragment',
-    children: extractJSX(node, project, options, depth),
+    children: depth < options.maxDepth
+        ? extractJSX(node, project, options, depth + 1)
+        : [],
 });
 export const extractJSX = (node, project, options, depth) => {
     const results = [];
@@ -173,33 +175,33 @@ const buildNodeFromJSX = (node, project, options, depth) => {
             treeNode.dataId = String(dataIdValue);
         }
     }
-    const onClick = extractOnClickInfoFromNode(node);
-    if (onClick) {
-        treeNode.onClick = onClick;
+    const cta = extractCtaInfoFromNode(node);
+    if (cta) {
+        treeNode.cta = cta;
     }
-    // Recurse into children
-    if (Node.isJsxElement(node)) {
+    // Recurse into children while under maxDepth.
+    if (Node.isJsxElement(node) && depth < options.maxDepth) {
         const children = node.getJsxChildren();
         children.forEach((child) => {
             if (Node.isJsxElement(child) || Node.isJsxSelfClosingElement(child)) {
-                const childNode = buildNodeFromJSX(child, project, options, depth);
+                const childNode = buildNodeFromJSX(child, project, options, depth + 1);
                 if (childNode) {
                     treeNode.children.push(childNode);
                 }
                 return;
             }
             if (Node.isJsxFragment(child)) {
-                treeNode.children.push(buildNodeFromJsxFragment(child, project, options, depth));
+                treeNode.children.push(buildNodeFromJsxFragment(child, project, options, depth + 1));
                 return;
             }
             if (Node.isJsxExpression(child)) {
                 const expression = child.getExpression();
                 if (expression) {
-                    treeNode.children.push(...extractFromExpression(expression, project, options, depth));
+                    treeNode.children.push(...extractFromExpression(expression, project, options, depth + 1));
                 }
                 return;
             }
-            treeNode.children.push(...extractJSX(child, project, options, depth));
+            treeNode.children.push(...extractJSX(child, project, options, depth + 1));
         });
     }
     // Resolve component if custom
@@ -214,9 +216,31 @@ const buildNodeFromJSX = (node, project, options, depth) => {
     return treeNode;
 };
 export const findReturnedJSX = (node) => {
-    const returnStmt = node.getDescendantsOfKind(SyntaxKind.ReturnStatement)[0];
-    if (returnStmt) {
-        return returnStmt.getExpression() ?? null;
+    const getReturnedJsxExpression = (expression) => {
+        if (Node.isParenthesizedExpression(expression)) {
+            const innerExpression = expression.getExpression();
+            if (!innerExpression) {
+                return null;
+            }
+            return getReturnedJsxExpression(innerExpression);
+        }
+        if (Node.isJsxElement(expression) ||
+            Node.isJsxSelfClosingElement(expression) ||
+            Node.isJsxFragment(expression)) {
+            return expression;
+        }
+        return null;
+    };
+    const returnStatements = node.getDescendantsOfKind(SyntaxKind.ReturnStatement);
+    for (const returnStmt of returnStatements) {
+        const expression = returnStmt.getExpression();
+        if (!expression) {
+            continue;
+        }
+        const returnedJsxExpression = getReturnedJsxExpression(expression);
+        if (returnedJsxExpression) {
+            return returnedJsxExpression;
+        }
     }
     // Arrow function implicit return
     if (Node.isArrowFunction(node)) {

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

@@ -1,11 +1,11 @@
 import { Node, } from 'ts-morph';
-const STANDARD_HTML_ATTRIBUTES = new Set([
+const EXCLUDE_HTML_ATTRIBUTES = new Set([
     'accept',
     'acceptcharset',
-    'action',
+    //  'action',
     'allow',
     'allowfullscreen',
-    'alt',
+    //  'alt',
     'as',
     'async',
     'autocapitalize',
@@ -18,30 +18,30 @@ const STANDARD_HTML_ATTRIBUTES = new Set([
     'cellspacing',
     'charset',
     'challenge',
-    'checked',
+    //  'checked',
     'cite',
     'class',
     'classname',
     'cols',
     'colspan',
-    'content',
+    //  'content',
     'contenteditable',
     'controls',
     'coords',
     'crossorigin',
-    'data',
-    'datetime',
+    //  'data',
+    //  'datetime',
     'decoding',
     'default',
     'defer',
     'dir',
     'dirname',
-    'disabled',
+    //  'disabled',
     'download',
     'draggable',
     'enctype',
     'fetchpriority',
-    'for',
+    //  'for',
     'form',
     'formaction',
     'formenctype',
@@ -50,20 +50,20 @@ const STANDARD_HTML_ATTRIBUTES = new Set([
     'formtarget',
     'frameborder',
     'headers',
-    'height',
-    'hidden',
+    //  'height',
+    //  'hidden',
     'high',
     'href',
     'hreflang',
     'htmlfor',
     'httpequiv',
-    'id',
+    //  'id',
     'inputmode',
     'integrity',
     'is',
-    'key',
+    //  'key',
     'kind',
-    'label',
+    //  'label',
     'lang',
     'list',
     'loading',
@@ -77,23 +77,23 @@ const STANDARD_HTML_ATTRIBUTES = new Set([
     'minlength',
     'multiple',
     'muted',
-    'name',
+    //  'name',
     'nomodule',
     'nonce',
     'novalidate',
     'open',
     'optimum',
     'pattern',
-    'placeholder',
+    //  'placeholder',
     'playsinline',
     'poster',
     'preload',
-    'readonly',
+    //  'readonly',
     'referrerpolicy',
-    'rel',
+    //  'rel',
     'required',
     'reversed',
-    'role',
+    //  'role',
     'rows',
     'rowspan',
     'sandbox',
@@ -114,12 +114,12 @@ const STANDARD_HTML_ATTRIBUTES = new Set([
     'style',
     'tabindex',
     'target',
-    'title',
+    //  'title',
     'translate',
     'type',
     'usemap',
-    'value',
-    'width',
+    //  'value',
+    //  'width',
     'wrap',
     // Common DOM event handler props
     'onabort',
@@ -204,13 +204,22 @@ const STANDARD_HTML_ATTRIBUTES = new Set([
     'onwaiting',
     'onwheel',
 ]);
+const CTA_EVENTS = new Set([
+    'onClick',
+    'onChange',
+    'onInput',
+    'onSubmit',
+    'onSelect',
+    'onKeyDown',
+    'onKeyUp',
+    'onBlur',
+]);
 const isStandardHtmlAttribute = (name) => {
     const normalizedName = name.toLowerCase();
-    if (normalizedName.startsWith('aria-') ||
-        normalizedName.startsWith('data-')) {
+    if (normalizedName.startsWith('aria-')) {
         return true;
     }
-    return STANDARD_HTML_ATTRIBUTES.has(normalizedName);
+    return EXCLUDE_HTML_ATTRIBUTES.has(normalizedName);
 };
 const normalizeAttributeName = (name) => name.replace(/[-_]/g, '').toLowerCase();
 const matchesAttributeName = (name, target) => normalizeAttributeName(name) === normalizeAttributeName(target);
@@ -294,26 +303,27 @@ const getExpressionKind = (expression) => {
     }
     return 'expression';
 };
-export const extractOnClickInfoFromNode = (node) => {
+export const extractCtaInfoFromNode = (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)) {
+    const ctaAttribute = attributes.find((attribute) => Node.isJsxAttribute(attribute) &&
+        CTA_EVENTS.has(attribute.getNameNode().getText()));
+    if (!ctaAttribute || !Node.isJsxAttribute(ctaAttribute)) {
         return undefined;
     }
-    const initializer = onClickAttribute.getInitializer();
+    const eventAttributeName = ctaAttribute.getNameNode().getText();
+    const initializer = ctaAttribute.getInitializer();
     if (!initializer) {
         return {
-            attribute: 'onClick',
+            attribute: eventAttributeName,
             expression: 'true',
             kind: 'boolean-shorthand',
         };
     }
     if (Node.isStringLiteral(initializer)) {
         return {
-            attribute: 'onClick',
+            attribute: eventAttributeName,
             expression: initializer.getLiteralText(),
             kind: 'string-literal',
         };
@@ -324,13 +334,13 @@ export const extractOnClickInfoFromNode = (node) => {
             return undefined;
         }
         return {
-            attribute: 'onClick',
+            attribute: eventAttributeName,
             expression: expression.getText(),
             kind: getExpressionKind(expression),
         };
     }
     return {
-        attribute: 'onClick',
+        attribute: eventAttributeName,
         expression: initializer.getText(),
         kind: 'expression',
     };

package/package.json

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