jsc-typescript-ast-mcp 1.1.0 → 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/component.js

@@ -1,16 +1,52 @@
-import { SyntaxKind } from 'ts-morph';
-import { getComponentName } from './nameHelper.js';
+import { Node, SyntaxKind } from 'ts-morph';
+const isComponentVariableDeclaration = (node) => {
+    if (!Node.isVariableDeclaration(node)) {
+        return false;
+    }
+    const initializer = node.getInitializer();
+    if (!initializer) {
+        return false;
+    }
+    return (initializer.getKind() === SyntaxKind.ArrowFunction ||
+        initializer.getKind() === SyntaxKind.FunctionExpression);
+};
+const isComponentDeclaration = (node) => {
+    if (Node.isFunctionDeclaration(node)) {
+        return true;
+    }
+    return isComponentVariableDeclaration(node);
+};
+const getFirstExportedComponent = (sourceFile) => {
+    const exportedDeclarations = sourceFile.getExportedDeclarations();
+    for (const declarations of exportedDeclarations.values()) {
+        const componentDeclaration = declarations.find(isComponentDeclaration);
+        if (componentDeclaration) {
+            return componentDeclaration;
+        }
+    }
+    return undefined;
+};
 export const getComponent = (sourceFile) => {
-    const component = sourceFile.getDefaultExportSymbol()?.getDeclarations()?.[0];
-    if (!component) {
-        throw new Error(`Component not found in ${sourceFile.getFilePath()}`);
-    }
-    const componentName = getComponentName(component);
-    if (componentName !== 'AnonymousComponent')
-        return component;
-    const components = sourceFile.getVariableDeclarations().filter((v) => {
-        const initializer = v.getInitializer();
-        return initializer?.getKind() === SyntaxKind.ArrowFunction;
-    });
-    return components[0];
+    const defaultExportDeclaration = sourceFile
+        .getDefaultExportSymbol()
+        ?.getDeclarations()
+        ?.find(isComponentDeclaration);
+    if (defaultExportDeclaration) {
+        return defaultExportDeclaration;
+    }
+    const firstExportedComponent = getFirstExportedComponent(sourceFile);
+    if (firstExportedComponent) {
+        return firstExportedComponent;
+    }
+    const localVariableComponent = sourceFile
+        .getVariableDeclarations()
+        .find(isComponentVariableDeclaration);
+    if (localVariableComponent) {
+        return localVariableComponent;
+    }
+    const localFunctionComponent = sourceFile.getFunctions()[0];
+    if (localFunctionComponent) {
+        return localFunctionComponent;
+    }
+    throw new Error(`Component not found in ${sourceFile.getFilePath()}`);
 };

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)) {
@@ -91,19 +91,64 @@ const resolveComponentFile = (node) => {
         const defaultImport = imp.getDefaultImport();
         if (defaultImport?.getText() === tagName) {
             const file = imp.getModuleSpecifierSourceFile();
-            const component = getComponent(file);
-            return component ?? null;
+            if (!file || file.getFilePath().includes('/node_modules/')) {
+                return null;
+            }
+            try {
+                const component = getComponent(file);
+                return component ?? null;
+            }
+            catch {
+                return null;
+            }
         }
         for (const n of named) {
             if (n.getName() === tagName) {
                 const file = imp.getModuleSpecifierSourceFile();
-                const component = getComponent(file);
-                return component ?? null;
+                if (!file || file.getFilePath().includes('/node_modules/')) {
+                    return null;
+                }
+                try {
+                    const component = getComponent(file);
+                    return component ?? null;
+                }
+                catch {
+                    return null;
+                }
             }
         }
     }
     return null;
 };
+const resolveLocalComponentFilePath = (node) => {
+    const tagName = getTagName(node);
+    const sourceFile = node.getSourceFile();
+    for (const imp of sourceFile.getImportDeclarations()) {
+        const matchesDefaultImport = imp.getDefaultImport()?.getText() === tagName;
+        const matchesNamedImport = imp
+            .getNamedImports()
+            .some((namedImport) => namedImport.getName() === tagName);
+        if (!matchesDefaultImport && !matchesNamedImport) {
+            continue;
+        }
+        const moduleSpecifier = imp.getModuleSpecifierValue();
+        const isLocalImport = moduleSpecifier.startsWith('.') || moduleSpecifier.startsWith('/');
+        if (!isLocalImport) {
+            return undefined;
+        }
+        const importedSourceFile = imp.getModuleSpecifierSourceFile();
+        if (!importedSourceFile) {
+            return undefined;
+        }
+        const importedFilePath = importedSourceFile.getFilePath();
+        if (importedFilePath.includes('/node_modules/')) {
+            return undefined;
+        }
+        return importedFilePath;
+    }
+    // If there is no matching import, treat it as a component from the current local source file.
+    return sourceFile.getFilePath();
+};
 const buildNodeFromJSX = (node, project, options, depth) => {
     const tagName = getTagName(node);
     const isHtml = tagName[0] === tagName[0].toLowerCase();
@@ -113,7 +158,10 @@ const buildNodeFromJSX = (node, project, options, depth) => {
         children: [],
     };
     if (!isHtml) {
-        treeNode.filePath = node.getSourceFile().getFilePath();
+        const localComponentFilePath = resolveLocalComponentFilePath(node);
+        if (localComponentFilePath) {
+            treeNode.filePath = localComponentFilePath;
+        }
     }
     const props = extractPropsFromNode(node);
     if (props) {
@@ -125,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.0",
+  "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",