@reactgraph/cli 0.1.1

package/tests/phase2.test.ts

@@ -0,0 +1,309 @@
+import { describe, it, expect } from 'vitest';
+import { join } from 'node:path';
+import { indexProject } from '../src/parser/indexer.js';
+import { parseFile } from '../src/parser/setup.js';
+import { extractContext } from '../src/parser/extractors/context.js';
+import { extractState } from '../src/parser/extractors/state.js';
+import { extractApiCalls } from '../src/parser/extractors/api-calls.js';
+import { extractEffects } from '../src/parser/extractors/effects.js';
+import { extractRoutes } from '../src/parser/extractors/routes.js';
+import { formatTraceFlow, formatImpact, formatFindNodes } from '../src/mcp/formatter.js';
+
+const FIXTURE_DIR = join(import.meta.dirname, 'fixtures', 'basic');
+
+describe('Context extractor', () => {
+  it('detects createContext and useContext', () => {
+    const code = `
+      import { createContext, useContext } from 'react';
+      const ThemeCtx = createContext('light');
+      function App() {
+        return <ThemeCtx.Provider value="dark"><div /></ThemeCtx.Provider>;
+      }
+      function Card() {
+        const theme = useContext(ThemeCtx);
+        return <div>{theme}</div>;
+      }
+    `;
+    const tree = parseFile('test.tsx', code)!;
+
+    // Need component nodes for edge sources
+    const existingNodes = [
+      { id: 'test.tsx:App', kind: 'Component' as const, name: 'App', file: 'test.tsx', line: 4, exportType: 'none' as const, meta: {} },
+      { id: 'test.tsx:Card', kind: 'Component' as const, name: 'Card', file: 'test.tsx', line: 8, exportType: 'none' as const, meta: {} },
+    ];
+
+    const { nodes, edges } = extractContext(tree, 'test.tsx', code, existingNodes);
+
+    // Should find the context
+    expect(nodes).toHaveLength(1);
+    expect(nodes[0]!.kind).toBe('Context');
+    expect(nodes[0]!.name).toBe('ThemeCtx');
+
+    // Should find provides edge (App provides ThemeCtx)
+    const provides = edges.filter(e => e.kind === 'provides');
+    expect(provides).toHaveLength(1);
+    expect(provides[0]!.source).toBe('test.tsx:App');
+
+    // Should find consumes edge (Card consumes ThemeCtx)
+    const consumes = edges.filter(e => e.kind === 'consumes');
+    expect(consumes).toHaveLength(1);
+    expect(consumes[0]!.source).toBe('test.tsx:Card');
+  });
+});
+
+describe('State extractor', () => {
+  it('detects zustand store creation', () => {
+    const code = `
+      import { create } from 'zustand';
+      const useStore = create((set) => ({
+        count: 0,
+        increment: () => set((s) => ({ count: s.count + 1 })),
+      }));
+    `;
+    const tree = parseFile('test.ts', code)!;
+    const { nodes } = extractState(tree, 'test.ts', code, []);
+
+    expect(nodes).toHaveLength(1);
+    expect(nodes[0]!.kind).toBe('Store');
+    expect(nodes[0]!.name).toBe('useStore');
+    expect(nodes[0]!.meta.library).toBe('zustand');
+  });
+
+  it('detects zustand store usage in component', () => {
+    const code = `
+      function Dashboard() {
+        const count = useStore((s) => s.count);
+        return <div>{count}</div>;
+      }
+    `;
+    const tree = parseFile('test.tsx', code)!;
+    const existingNodes = [
+      { id: 'test.tsx:Dashboard', kind: 'Component' as const, name: 'Dashboard', file: 'test.tsx', line: 2, exportType: 'none' as const, meta: {} },
+      { id: 'store.ts:useStore', kind: 'Store' as const, name: 'useStore', file: 'store.ts', line: 1, exportType: 'named' as const, meta: { library: 'zustand' } },
+    ];
+    const { edges } = extractState(tree, 'test.tsx', code, existingNodes);
+
+    const reads = edges.filter(e => e.kind === 'reads_store');
+    expect(reads).toHaveLength(1);
+    expect(reads[0]!.source).toBe('test.tsx:Dashboard');
+    expect(reads[0]!.target).toBe('store.ts:useStore');
+  });
+});
+
+describe('API calls extractor', () => {
+  it('detects fetch calls', () => {
+    const code = `
+      function useData() {
+        const data = fetch('/api/users');
+        return data;
+      }
+    `;
+    const tree = parseFile('test.ts', code)!;
+    const existingNodes = [
+      { id: 'test.ts:useData', kind: 'Hook' as const, name: 'useData', file: 'test.ts', line: 2, exportType: 'none' as const, meta: {} },
+    ];
+    const { edges } = extractApiCalls(tree, 'test.ts', code, existingNodes);
+
+    const fetches = edges.filter(e => e.kind === 'fetches');
+    expect(fetches).toHaveLength(1);
+    expect(fetches[0]!.meta.url).toBe('/api/users');
+    expect(fetches[0]!.meta.method).toBe('GET');
+  });
+
+  it('detects axios calls', () => {
+    const code = `
+      function useData() {
+        const data = axios.post('/api/users', { name: 'test' });
+        return data;
+      }
+    `;
+    const tree = parseFile('test.ts', code)!;
+    const existingNodes = [
+      { id: 'test.ts:useData', kind: 'Hook' as const, name: 'useData', file: 'test.ts', line: 2, exportType: 'none' as const, meta: {} },
+    ];
+    const { edges } = extractApiCalls(tree, 'test.ts', code, existingNodes);
+
+    const fetches = edges.filter(e => e.kind === 'fetches');
+    expect(fetches).toHaveLength(1);
+    expect(fetches[0]!.meta.method).toBe('POST');
+    expect(fetches[0]!.meta.url).toBe('/api/users');
+  });
+});
+
+describe('Effects extractor', () => {
+  it('detects useEffect with deps', () => {
+    const code = `
+      function Dashboard() {
+        useEffect(() => {
+          fetchData(userId);
+        }, [userId]);
+        return <div />;
+      }
+    `;
+    const tree = parseFile('test.tsx', code)!;
+    const node = {
+      id: 'test.tsx:Dashboard', kind: 'Component' as const, name: 'Dashboard',
+      file: 'test.tsx', line: 2, exportType: 'none' as const, meta: {} as Record<string, unknown>,
+    };
+    extractEffects(tree, 'test.tsx', code, [node]);
+
+    const effects = node.meta.effects as any[];
+    expect(effects).toHaveLength(1);
+    expect(effects[0].type).toBe('useEffect');
+    expect(effects[0].deps).toContain('userId');
+    expect(effects[0].triggers).toContain('fetchData');
+  });
+
+  it('detects mount-only effect', () => {
+    const code = `
+      function App() {
+        useEffect(() => {
+          init();
+        }, []);
+        return <div />;
+      }
+    `;
+    const tree = parseFile('test.tsx', code)!;
+    const node = {
+      id: 'test.tsx:App', kind: 'Component' as const, name: 'App',
+      file: 'test.tsx', line: 2, exportType: 'none' as const, meta: {} as Record<string, unknown>,
+    };
+    extractEffects(tree, 'test.tsx', code, [node]);
+
+    const effects = node.meta.effects as any[];
+    expect(effects).toHaveLength(1);
+    expect(effects[0].deps).toBe('mount-only');
+  });
+});
+
+describe('Routes extractor', () => {
+  it('detects React Router routes', () => {
+    const code = `
+      function AppRoutes() {
+        return (
+          <Routes>
+            <Route path="/" element={<Dashboard />} />
+            <Route path="/settings" element={<Settings />} />
+          </Routes>
+        );
+      }
+    `;
+    const tree = parseFile('test.tsx', code)!;
+    const existingNodes = [
+      { id: 'test.tsx:AppRoutes', kind: 'Component' as const, name: 'AppRoutes', file: 'test.tsx', line: 2, exportType: 'none' as const, meta: {} },
+      { id: 'dash.tsx:Dashboard', kind: 'Component' as const, name: 'Dashboard', file: 'dash.tsx', line: 1, exportType: 'default' as const, meta: {} },
+      { id: 'settings.tsx:Settings', kind: 'Component' as const, name: 'Settings', file: 'settings.tsx', line: 1, exportType: 'default' as const, meta: {} },
+    ];
+    const { nodes, edges } = extractRoutes(tree, 'test.tsx', code, existingNodes);
+
+    expect(nodes).toHaveLength(2);
+    expect(nodes[0]!.kind).toBe('Route');
+    expect(nodes[0]!.name).toBe('/');
+    expect(nodes[1]!.name).toBe('/settings');
+
+    // Should link routes to components
+    const renders = edges.filter(e => e.kind === 'renders');
+    expect(renders).toHaveLength(2);
+  });
+});
+
+describe('Full pipeline with Phase 2 extractors', () => {
+  it('indexes fixture project with context and stores', async () => {
+    const { graph } = await indexProject(FIXTURE_DIR);
+
+    // Should find context
+    const contexts = graph.getNodesByKind('Context');
+    expect(contexts.some(c => c.name === 'ThemeContext')).toBe(true);
+
+    // Should find zustand store
+    const stores = graph.getNodesByKind('Store');
+    expect(stores.some(s => s.name === 'useAuthStore')).toBe(true);
+
+    // Map should include new sections
+    const { formatMap } = await import('../src/mcp/formatter.js');
+    const map = formatMap(graph);
+    expect(map).toContain('REACTGRAPH MAP');
+    expect(map).toContain('COMPONENTS');
+  });
+
+  it('detects cross-file store usage (Dashboard reads useAuthStore)', async () => {
+    const { graph } = await indexProject(FIXTURE_DIR);
+
+    // Dashboard should have a reads_store edge to useAuthStore
+    const dashNode = graph.getNodesByKind('Component').find(c => c.name === 'Dashboard');
+    expect(dashNode).toBeDefined();
+
+    const storeReads = graph.getEdgesFrom(dashNode!.id, ['reads_store']);
+    expect(storeReads.length).toBeGreaterThan(0);
+
+    // The target should be the useAuthStore node
+    const storeNode = graph.getNodesByKind('Store').find(s => s.name === 'useAuthStore');
+    expect(storeNode).toBeDefined();
+    expect(storeReads.some(e => e.target === storeNode!.id)).toBe(true);
+  });
+
+  it('get_subgraph on store shows readers', async () => {
+    const { graph } = await indexProject(FIXTURE_DIR);
+    const { formatSubgraph } = await import('../src/mcp/formatter.js');
+    const result = formatSubgraph(graph, 'useAuthStore', 1);
+
+    expect(result).toContain('useAuthStore');
+    // Should show Dashboard reading the store
+    expect(result).toContain('Dashboard');
+  });
+});
+
+describe('New MCP tools', () => {
+  it('trace_flow finds path between nodes', async () => {
+    const { graph } = await indexProject(FIXTURE_DIR);
+    const result = formatTraceFlow(graph, 'App', 'MetricsCard');
+    expect(result).toContain('App');
+    expect(result).toContain('MetricsCard');
+  });
+
+  it('impact shows dependents', async () => {
+    const { graph } = await indexProject(FIXTURE_DIR);
+    const result = formatImpact(graph, 'useAuth');
+    expect(result).toContain('IMPACT ANALYSIS');
+    expect(result).toContain('useAuth');
+  });
+
+  it('find_nodes filters by kind', async () => {
+    const { graph } = await indexProject(FIXTURE_DIR);
+    const result = formatFindNodes(graph, { kind: 'Hook' });
+    expect(result).toContain('useAuth');
+  });
+
+  it('find_nodes finds orphan components', async () => {
+    const { graph } = await indexProject(FIXTURE_DIR);
+    const result = formatFindNodes(graph, { kind: 'Component', orphan: true });
+    // App is a root component — should be in orphans since nothing renders it
+    expect(result).toContain('App');
+  });
+
+  it('find_nodes query shows store + connections', async () => {
+    const { graph } = await indexProject(FIXTURE_DIR);
+    const result = formatFindNodes(graph, { query: 'useAuthStore' });
+
+    // Should show the store node
+    expect(result).toContain('useAuthStore');
+    expect(result).toContain('Store');
+
+    // Should show Dashboard as a reader
+    expect(result).toContain('reads_store');
+    expect(result).toContain('Dashboard');
+  });
+
+  it('find_nodes with no filters returns help, not all nodes', async () => {
+    const { graph } = await indexProject(FIXTURE_DIR);
+    const result = formatFindNodes(graph, {});
+    expect(result).toContain('No filters provided');
+    expect(result).not.toContain('[Component]');
+  });
+
+  it('find_nodes rejects unknown filters instead of dumping all', async () => {
+    const { graph } = await indexProject(FIXTURE_DIR);
+    const result = formatFindNodes(graph, { foo: 'bar' } as any);
+    expect(result).toContain('No filters provided');
+  });
+});

package/tests/smoke.test.ts

@@ -0,0 +1,77 @@
+import { describe, it, expect } from 'vitest';
+import { join } from 'node:path';
+import { indexProject } from '../src/parser/indexer.js';
+import { formatMap, formatSubgraph, formatFileContext } from '../src/mcp/formatter.js';
+
+const FIXTURE_DIR = join(import.meta.dirname, 'fixtures', 'basic');
+
+describe('ReactGraph smoke test', () => {
+  it('indexes the basic fixture project', async () => {
+    const { graph, stats } = await indexProject(FIXTURE_DIR);
+
+    // Should find files
+    expect(stats.totalFiles).toBeGreaterThan(0);
+    expect(stats.nodes).toBeGreaterThan(0);
+    expect(stats.edges).toBeGreaterThan(0);
+
+    // Should find components
+    const components = graph.getNodesByKind('Component');
+    const componentNames = components.map(c => c.name).sort();
+    expect(componentNames).toContain('App');
+    expect(componentNames).toContain('Dashboard');
+    expect(componentNames).toContain('Sidebar');
+    expect(componentNames).toContain('MetricsCard');
+
+    // Should find the hook
+    const hooks = graph.getNodesByKind('Hook');
+    const hookNames = hooks.map(h => h.name);
+    expect(hookNames).toContain('useAuth');
+
+    // Should have renders edges
+    const rendersEdges = graph.getEdgesByKind('renders');
+    expect(rendersEdges.length).toBeGreaterThan(0);
+
+    // App should render Dashboard and Sidebar
+    const appNode = components.find(c => c.name === 'App')!;
+    const appRenders = graph.getEdgesFrom(appNode.id, ['renders']);
+    const renderedNames = appRenders.map(e => {
+      const target = graph.getNode(e.target);
+      return target?.name ?? e.target;
+    });
+    expect(renderedNames).toContain('Dashboard');
+    expect(renderedNames).toContain('Sidebar');
+
+    // Dashboard should use useAuth
+    const dashNode = components.find(c => c.name === 'Dashboard')!;
+    const dashHooks = graph.getEdgesFrom(dashNode.id, ['uses_hook']);
+    const hookUsed = dashHooks.map(e => e.meta.hookName).filter(Boolean);
+    expect(hookUsed).toContain('useAuth');
+  });
+
+  it('generates a readable map', async () => {
+    const { graph } = await indexProject(FIXTURE_DIR);
+    const map = formatMap(graph);
+
+    expect(map).toContain('REACTGRAPH MAP');
+    expect(map).toContain('COMPONENTS');
+    expect(map).toContain('Dashboard');
+    expect(map).toContain('HOOKS');
+    expect(map).toContain('useAuth');
+  });
+
+  it('generates subgraph for a component', async () => {
+    const { graph } = await indexProject(FIXTURE_DIR);
+    const sub = formatSubgraph(graph, 'Dashboard');
+
+    expect(sub).toContain('Dashboard');
+    expect(sub).toContain('renders');
+  });
+
+  it('generates file context', async () => {
+    const { graph } = await indexProject(FIXTURE_DIR);
+    const ctx = formatFileContext(graph, 'src/components/Dashboard.tsx');
+
+    expect(ctx).toContain('Dashboard');
+    expect(ctx).toContain('IMPORTS');
+  });
+});

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "Node16",
+    "moduleResolution": "Node16",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "tests"]
+}

package/vitest.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    testTimeout: 30000,
+  },
+});