jsc-typescript-ast-mcp 1.1.1 → 1.1.3

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 { extractAttributeValueFromNode, extractOnClickInfoFromNode, extractPropsFromNode, } from './props.js';
 import { handleTernary } from './ternary.js';
 export const extractFromExpression = (expression, project, options, depth) => {
     if (Node.isConditionalExpression(expression)) {
@@ -166,13 +166,17 @@ const buildNodeFromJSX = (node, project, options, depth) => {
     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);
-            }
+    }
+    if (options.dataIdAttribute) {
+        const dataIdValue = extractAttributeValueFromNode(node, options.dataIdAttribute);
+        if (dataIdValue !== undefined && dataIdValue !== null) {
+            treeNode.dataId = String(dataIdValue);
         }
     }
+    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

@@ -1,4 +1,217 @@
 import { Node, } from 'ts-morph';
+const STANDARD_HTML_ATTRIBUTES = new Set([
+    'accept',
+    'acceptcharset',
+    'action',
+    'allow',
+    'allowfullscreen',
+    'alt',
+    'as',
+    'async',
+    'autocapitalize',
+    'autocomplete',
+    'autocorrect',
+    'autofocus',
+    'autoplay',
+    'capture',
+    'cellpadding',
+    'cellspacing',
+    'charset',
+    'challenge',
+    'checked',
+    'cite',
+    'class',
+    'classname',
+    'cols',
+    'colspan',
+    'content',
+    'contenteditable',
+    'controls',
+    'coords',
+    'crossorigin',
+    'data',
+    'datetime',
+    'decoding',
+    'default',
+    'defer',
+    'dir',
+    'dirname',
+    'disabled',
+    'download',
+    'draggable',
+    'enctype',
+    'fetchpriority',
+    'for',
+    'form',
+    'formaction',
+    'formenctype',
+    'formmethod',
+    'formnovalidate',
+    'formtarget',
+    'frameborder',
+    'headers',
+    'height',
+    'hidden',
+    'high',
+    'href',
+    'hreflang',
+    'htmlfor',
+    'httpequiv',
+    'id',
+    'inputmode',
+    'integrity',
+    'is',
+    'key',
+    'kind',
+    'label',
+    'lang',
+    'list',
+    'loading',
+    'loop',
+    'low',
+    'max',
+    'maxlength',
+    'media',
+    'method',
+    'min',
+    'minlength',
+    'multiple',
+    'muted',
+    'name',
+    'nomodule',
+    'nonce',
+    'novalidate',
+    'open',
+    'optimum',
+    'pattern',
+    'placeholder',
+    'playsinline',
+    'poster',
+    'preload',
+    'readonly',
+    'referrerpolicy',
+    'rel',
+    'required',
+    'reversed',
+    'role',
+    'rows',
+    'rowspan',
+    'sandbox',
+    'scope',
+    'selected',
+    'shape',
+    'size',
+    'sizes',
+    'slot',
+    'span',
+    'spellcheck',
+    'src',
+    'srcdoc',
+    'srclang',
+    'srcset',
+    'start',
+    'step',
+    'style',
+    'tabindex',
+    'target',
+    'title',
+    'translate',
+    'type',
+    'usemap',
+    'value',
+    'width',
+    'wrap',
+    // Common DOM event handler props
+    'onabort',
+    'onanimationend',
+    'onanimationiteration',
+    'onanimationstart',
+    'onauxclick',
+    'onbeforeinput',
+    'onblur',
+    'oncanplay',
+    'oncanplaythrough',
+    'onchange',
+    'onclick',
+    'oncompositionend',
+    'oncompositionstart',
+    'oncompositionupdate',
+    'oncontextmenu',
+    'oncopy',
+    'oncut',
+    'ondblclick',
+    'ondrag',
+    'ondragend',
+    'ondragenter',
+    'ondragexit',
+    'ondragleave',
+    'ondragover',
+    'ondragstart',
+    'ondrop',
+    'ondurationchange',
+    'onemptied',
+    'onended',
+    'onerror',
+    'onfocus',
+    'onfocusin',
+    'onfocusout',
+    'onfullscreenchange',
+    'onfullscreenerror',
+    'ongotpointercapture',
+    'oninput',
+    'oninvalid',
+    'onkeydown',
+    'onkeypress',
+    'onkeyup',
+    'onload',
+    'onloadeddata',
+    'onloadedmetadata',
+    'onloadstart',
+    'onlostpointercapture',
+    'onmouseenter',
+    'onmouseleave',
+    'onmousemove',
+    'onmouseout',
+    'onmouseover',
+    'onmouseup',
+    'onpaste',
+    'onpause',
+    'onplay',
+    'onplaying',
+    'onpointercancel',
+    'onpointerdown',
+    'onpointerenter',
+    'onpointerleave',
+    'onpointermove',
+    'onpointerout',
+    'onpointerover',
+    'onpointerup',
+    'onprogress',
+    'onratechange',
+    'onreset',
+    'onresize',
+    'onscroll',
+    'onseeked',
+    'onseeking',
+    'onselect',
+    'onstalled',
+    'onsubmit',
+    'onsuspend',
+    'ontimeupdate',
+    'ontoggle',
+    'ontransitionend',
+    'onvolumechange',
+    'onwaiting',
+    'onwheel',
+]);
+const isStandardHtmlAttribute = (name) => {
+    const normalizedName = name.toLowerCase();
+    if (normalizedName.startsWith('aria-') ||
+        normalizedName.startsWith('data-')) {
+        return true;
+    }
+    return STANDARD_HTML_ATTRIBUTES.has(normalizedName);
+};
 const extractPropValue = (attribute) => {
     const initializer = attribute.getInitializer();
     if (!initializer) {
@@ -32,7 +245,11 @@ export const extractPropsFromNode = (node) => {
     const props = {};
     for (const attribute of attributes) {
         if (Node.isJsxAttribute(attribute)) {
-            props[attribute.getNameNode().getText()] = extractPropValue(attribute);
+            const attributeName = attribute.getNameNode().getText();
+            if (isStandardHtmlAttribute(attributeName)) {
+                continue;
+            }
+            props[attributeName] = extractPropValue(attribute);
             continue;
         }
         if (Node.isJsxSpreadAttribute(attribute)) {
@@ -44,3 +261,73 @@ export const extractPropsFromNode = (node) => {
     }
     return props;
 };
+export const extractAttributeValueFromNode = (node, attributeName) => {
+    const attributes = Node.isJsxElement(node)
+        ? node.getOpeningElement().getAttributes()
+        : node.getAttributes();
+    const matchedAttribute = attributes.find((attribute) => Node.isJsxAttribute(attribute) &&
+        attribute.getNameNode().getText() === attributeName);
+    if (!matchedAttribute || !Node.isJsxAttribute(matchedAttribute)) {
+        return undefined;
+    }
+    return extractPropValue(matchedAttribute);
+};
+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.3",
   "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",