@reactgraph/cli 0.1.1

package/src/parser/extractors/imports.ts

@@ -0,0 +1,192 @@
+import { resolve, dirname, extname } from 'node:path';
+import { existsSync } from 'node:fs';
+import type Parser from 'tree-sitter';
+import type { GraphNode, GraphEdge } from '../../graph/schema.js';
+import { nodeId } from './types.js';
+import type { ExtractionResult } from './types.js';
+
+const TRY_EXTENSIONS = ['.tsx', '.ts', '.jsx', '.js', '/index.tsx', '/index.ts', '/index.jsx', '/index.js'];
+
+export function extractImports(
+  tree: Parser.Tree,
+  filePath: string,
+  sourceCode: string,
+  _existingNodes: GraphNode[],
+  projectDir: string,
+): ExtractionResult {
+  const nodes: GraphNode[] = [];
+  const edges: GraphEdge[] = [];
+
+  // Create a Module node for this file
+  const moduleNode: GraphNode = {
+    id: nodeId(filePath, basename(filePath)),
+    kind: 'Module',
+    name: basename(filePath),
+    file: filePath,
+    line: 1,
+    exportType: 'none',
+    meta: {},
+  };
+  nodes.push(moduleNode);
+
+  const root = tree.rootNode;
+
+  for (let i = 0; i < root.childCount; i++) {
+    const child = root.child(i)!;
+
+    if (child.type === 'import_statement') {
+      processImport(child, filePath, projectDir, moduleNode.id, edges);
+    }
+
+    // Re-exports: export { X } from './Y'
+    if (child.type === 'export_statement') {
+      const source = child.childForFieldName('source');
+      if (source) {
+        processReexport(child, source, filePath, projectDir, moduleNode.id, edges);
+      }
+    }
+  }
+
+  return { nodes, edges };
+}
+
+function processImport(
+  node: Parser.SyntaxNode,
+  filePath: string,
+  projectDir: string,
+  moduleId: string,
+  edges: GraphEdge[],
+): void {
+  // Get the source string (the "from './path'" part)
+  const sourceNode = node.childForFieldName('source') ?? findChildByType(node, 'string');
+  if (!sourceNode) return;
+
+  const importPath = stripQuotes(sourceNode.text);
+
+  // Skip side-effect imports (import './styles.css')
+  const importClause = findChildByType(node, 'import_clause');
+  if (!importClause) return;
+
+  const resolvedPath = resolveImportPath(importPath, filePath, projectDir);
+  const names: string[] = [];
+  let isDefault = false;
+
+  for (let i = 0; i < importClause.childCount; i++) {
+    const child = importClause.child(i)!;
+
+    if (child.type === 'identifier') {
+      // Default import
+      names.push(child.text);
+      isDefault = true;
+    } else if (child.type === 'named_imports') {
+      // Named imports { A, B, C as D }
+      for (let j = 0; j < child.childCount; j++) {
+        const spec = child.child(j)!;
+        if (spec.type === 'import_specifier') {
+          const nameNode = spec.childForFieldName('name') ?? spec.child(0);
+          if (nameNode) names.push(nameNode.text);
+        }
+      }
+    } else if (child.type === 'namespace_import') {
+      // import * as X from ...
+      const id = findChildByType(child, 'identifier');
+      if (id) names.push(`* as ${id.text}`);
+    }
+  }
+
+  if (names.length > 0) {
+    edges.push({
+      source: moduleId,
+      target: resolvedPath,
+      kind: 'imports',
+      meta: { names, isDefault, importPath },
+    });
+  }
+}
+
+function processReexport(
+  node: Parser.SyntaxNode,
+  source: Parser.SyntaxNode,
+  filePath: string,
+  projectDir: string,
+  moduleId: string,
+  edges: GraphEdge[],
+): void {
+  const importPath = stripQuotes(source.text);
+  const resolvedPath = resolveImportPath(importPath, filePath, projectDir);
+  const names: string[] = [];
+
+  const exportClause = findChildByType(node, 'export_clause');
+  if (exportClause) {
+    for (let i = 0; i < exportClause.childCount; i++) {
+      const spec = exportClause.child(i)!;
+      if (spec.type === 'export_specifier') {
+        const nameNode = spec.childForFieldName('name') ?? spec.child(0);
+        if (nameNode) names.push(nameNode.text);
+      }
+    }
+  }
+
+  if (names.length > 0) {
+    edges.push({
+      source: moduleId,
+      target: resolvedPath,
+      kind: 'imports',
+      meta: { names, isReexport: true, importPath },
+    });
+  }
+}
+
+export function resolveImportPath(
+  importPath: string,
+  currentFile: string,
+  projectDir: string,
+): string {
+  // Relative import
+  if (importPath.startsWith('.')) {
+    const dir = dirname(resolve(projectDir, currentFile));
+    const base = resolve(dir, importPath);
+
+    // If it already has an extension and exists
+    if (extname(base) && existsSync(base)) {
+      return toRelative(base, projectDir);
+    }
+
+    // Try extensions
+    for (const ext of TRY_EXTENSIONS) {
+      const candidate = base + ext;
+      if (existsSync(candidate)) {
+        return toRelative(candidate, projectDir);
+      }
+    }
+
+    // Return best guess even if not found
+    return toRelative(base, projectDir);
+  }
+
+  // External package
+  return `external:${importPath}`;
+}
+
+function toRelative(absPath: string, projectDir: string): string {
+  const rel = absPath.startsWith(projectDir)
+    ? absPath.slice(projectDir.length + 1)
+    : absPath;
+  return rel.replace(/\\/g, '/');
+}
+
+function basename(filePath: string): string {
+  const parts = filePath.split('/');
+  return parts[parts.length - 1]!;
+}
+
+function stripQuotes(s: string): string {
+  return s.replace(/^['"`]|['"`]$/g, '');
+}
+
+function findChildByType(node: Parser.SyntaxNode, type: string): Parser.SyntaxNode | null {
+  for (let i = 0; i < node.childCount; i++) {
+    if (node.child(i)!.type === type) return node.child(i)!;
+  }
+  return null;
+}

package/src/parser/extractors/index.ts

@@ -0,0 +1,11 @@
+export { extractImports } from './imports.js';
+export { extractComponents } from './components.js';
+export { extractHooks } from './hooks.js';
+export { extractJSXTree } from './jsx-tree.js';
+export { extractContext } from './context.js';
+export { extractState } from './state.js';
+export { extractApiCalls } from './api-calls.js';
+export { extractRoutes } from './routes.js';
+export { extractEffects } from './effects.js';
+export type { Extractor, ExtractionResult } from './types.js';
+export { nodeId } from './types.js';

package/src/parser/extractors/jsx-tree.ts

@@ -0,0 +1,271 @@
+import type Parser from 'tree-sitter';
+import type { GraphNode, GraphEdge } from '../../graph/schema.js';
+import { isPascalCase, findAll } from './types.js';
+import type { ExtractionResult } from './types.js';
+
+export function extractJSXTree(
+  tree: Parser.Tree,
+  filePath: string,
+  sourceCode: string,
+  existingNodes: GraphNode[],
+): ExtractionResult {
+  const edges: GraphEdge[] = [];
+
+  // Get components defined in this file
+  const components = existingNodes.filter(n => n.kind === 'Component' && n.file === filePath);
+
+  // Build a map of imported names → their import source for resolving JSX tags
+  const importMap = buildImportMap(tree.rootNode);
+
+  for (const component of components) {
+    // Find the function body for this component
+    const funcNode = findComponentFunction(tree.rootNode, component.name);
+    if (!funcNode) continue;
+
+    const body = funcNode.childForFieldName('body');
+    if (!body) continue;
+
+    // Find all JSX elements in the body
+    walkJSXElements(body, component, filePath, importMap, existingNodes, edges);
+  }
+
+  return { nodes: [], edges };
+}
+
+function walkJSXElements(
+  node: Parser.SyntaxNode,
+  parentComponent: GraphNode,
+  filePath: string,
+  importMap: Map<string, string>,
+  existingNodes: GraphNode[],
+  edges: GraphEdge[],
+): void {
+  for (let i = 0; i < node.childCount; i++) {
+    const child = node.child(i)!;
+
+    if (child.type === 'jsx_element' || child.type === 'jsx_self_closing_element') {
+      const tagName = getJSXTagName(child);
+
+      if (tagName && isPascalCase(tagName)) {
+        const targetId = resolveComponentRef(tagName, filePath, importMap, existingNodes);
+
+        // Add renders edge (dedup)
+        const alreadyHas = edges.some(
+          e => e.source === parentComponent.id && e.target === targetId && e.kind === 'renders'
+        );
+        if (!alreadyHas) {
+          edges.push({
+            source: parentComponent.id,
+            target: targetId,
+            kind: 'renders',
+            meta: {},
+          });
+        }
+
+        // Extract props being passed
+        const propsEdges = extractPassedProps(child, parentComponent.id, targetId);
+        edges.push(...propsEdges);
+      }
+
+      // Recurse into children regardless
+      walkJSXElements(child, parentComponent, filePath, importMap, existingNodes, edges);
+    } else if (child.type === 'jsx_expression') {
+      // Handle {items.map(item => <Card />)} patterns
+      walkJSXElements(child, parentComponent, filePath, importMap, existingNodes, edges);
+    } else {
+      walkJSXElements(child, parentComponent, filePath, importMap, existingNodes, edges);
+    }
+  }
+}
+
+function getJSXTagName(node: Parser.SyntaxNode): string | null {
+  if (node.type === 'jsx_self_closing_element') {
+    const nameNode = node.childForFieldName('name') ?? node.child(1);
+    return nameNode?.text ?? null;
+  }
+
+  if (node.type === 'jsx_element') {
+    const opening = findDirectChild(node, 'jsx_opening_element');
+    if (!opening) return null;
+    const nameNode = opening.childForFieldName('name') ?? opening.child(1);
+    return nameNode?.text ?? null;
+  }
+
+  return null;
+}
+
+function extractPassedProps(
+  jsxNode: Parser.SyntaxNode,
+  sourceId: string,
+  targetId: string,
+): GraphEdge[] {
+  const edges: GraphEdge[] = [];
+
+  // Find all jsx_attribute nodes
+  const attrParent = jsxNode.type === 'jsx_self_closing_element'
+    ? jsxNode
+    : findDirectChild(jsxNode, 'jsx_opening_element');
+
+  if (!attrParent) return edges;
+
+  for (let i = 0; i < attrParent.childCount; i++) {
+    const child = attrParent.child(i)!;
+
+    if (child.type === 'jsx_attribute') {
+      const nameNode = findDirectChild(child, 'property_identifier');
+      if (!nameNode) continue;
+
+      const propName = nameNode.text;
+      if (propName === 'key') continue; // Skip React internal prop
+
+      const valueNode = child.child(child.childCount - 1);
+      const valueType = classifyPropValue(valueNode);
+
+      edges.push({
+        source: sourceId,
+        target: targetId,
+        kind: 'passes_prop',
+        meta: { prop: propName, valueType },
+      });
+    }
+  }
+
+  return edges;
+}
+
+function classifyPropValue(node: Parser.SyntaxNode | null): string {
+  if (!node) return 'true'; // boolean shorthand
+  if (node.type === 'string') return 'string';
+  if (node.type === 'jsx_expression') {
+    const inner = node.child(1); // skip {
+    if (!inner) return 'expression';
+    if (inner.type === 'arrow_function' || inner.type === 'function_expression') return 'function';
+    if (inner.type === 'number') return 'number';
+    if (inner.type === 'true' || inner.type === 'false') return 'boolean';
+    return 'expression';
+  }
+  return 'unknown';
+}
+
+function resolveComponentRef(
+  tagName: string,
+  filePath: string,
+  importMap: Map<string, string>,
+  existingNodes: GraphNode[],
+): string {
+  // Same file first
+  for (const n of existingNodes) {
+    if (n.kind === 'Component' && n.name === tagName && n.file === filePath) {
+      return n.id;
+    }
+  }
+
+  // Find by name across all known components (import resolution handled by pipeline)
+  for (const n of existingNodes) {
+    if (n.kind === 'Component' && n.name === tagName) {
+      return n.id;
+    }
+  }
+
+  return `unresolved:${tagName}`;
+}
+
+function buildImportMap(root: Parser.SyntaxNode): Map<string, string> {
+  const map = new Map<string, string>();
+
+  for (let i = 0; i < root.childCount; i++) {
+    const child = root.child(i)!;
+    if (child.type !== 'import_statement') continue;
+
+    const sourceNode = child.childForFieldName('source') ?? findDirectChild(child, 'string');
+    if (!sourceNode) continue;
+
+    const source = sourceNode.text.replace(/^['"`]|['"`]$/g, '');
+
+    const importClause = findDirectChild(child, 'import_clause');
+    if (!importClause) continue;
+
+    for (let j = 0; j < importClause.childCount; j++) {
+      const clause = importClause.child(j)!;
+
+      if (clause.type === 'identifier') {
+        // default import
+        map.set(clause.text, source);
+      } else if (clause.type === 'named_imports') {
+        for (let k = 0; k < clause.childCount; k++) {
+          const spec = clause.child(k)!;
+          if (spec.type === 'import_specifier') {
+            const alias = spec.childForFieldName('alias');
+            const name = spec.childForFieldName('name') ?? spec.child(0);
+            const localName = alias?.text ?? name?.text;
+            if (localName) map.set(localName, source);
+          }
+        }
+      }
+    }
+  }
+
+  return map;
+}
+
+function findComponentFunction(root: Parser.SyntaxNode, name: string): Parser.SyntaxNode | null {
+  for (let i = 0; i < root.childCount; i++) {
+    const child = root.child(i)!;
+
+    // function Foo() { ... }
+    if (child.type === 'function_declaration') {
+      if (child.childForFieldName('name')?.text === name) return child;
+    }
+
+    // export function Foo() { ... } or export default function Foo() { ... }
+    if (child.type === 'export_statement') {
+      const funcDecl = findDirectChild(child, 'function_declaration');
+      if (funcDecl?.childForFieldName('name')?.text === name) return funcDecl;
+
+      const lexDecl = findDirectChild(child, 'lexical_declaration');
+      if (lexDecl) {
+        const fn = extractArrowFromLexical(lexDecl, name);
+        if (fn) return fn;
+      }
+    }
+
+    // const Foo = () => ...
+    if (child.type === 'lexical_declaration') {
+      const fn = extractArrowFromLexical(child, name);
+      if (fn) return fn;
+    }
+  }
+
+  return null;
+}
+
+function extractArrowFromLexical(node: Parser.SyntaxNode, name: string): Parser.SyntaxNode | null {
+  const declarator = findDirectChild(node, 'variable_declarator');
+  if (!declarator) return null;
+  if (declarator.childForFieldName('name')?.text !== name) return null;
+
+  const value = declarator.childForFieldName('value');
+  if (!value) return null;
+
+  if (value.type === 'arrow_function' || value.type === 'function_expression') return value;
+
+  // memo/forwardRef wrapper
+  if (value.type === 'call_expression') {
+    const args = value.childForFieldName('arguments');
+    if (args) {
+      for (let i = 0; i < args.childCount; i++) {
+        const child = args.child(i)!;
+        if (child.type === 'arrow_function' || child.type === 'function_expression') return child;
+      }
+    }
+  }
+
+  return null;
+}
+
+function findDirectChild(node: Parser.SyntaxNode, type: string): Parser.SyntaxNode | null {
+  for (let i = 0; i < node.childCount; i++) {
+    if (node.child(i)!.type === type) return node.child(i)!;
+  }
+  return null;
+}