@reactgraph/cli 0.1.1

package/src/parser/extractors/context.ts

@@ -0,0 +1,216 @@
+import type Parser from 'tree-sitter';
+import type { GraphNode, GraphEdge } from '../../graph/schema.js';
+import { nodeId, findAll, findEnclosingFunction, walkTree } from './types.js';
+import type { ExtractionResult } from './types.js';
+
+/**
+ * Context extractor — detects React Context creation, Provider usage, and consumers.
+ *
+ * Patterns:
+ *   const ThemeCtx = createContext(default)        → Context node
+ *   <ThemeCtx.Provider value={...}>                → provides edge
+ *   useContext(ThemeCtx)                            → consumes edge
+ *   <ThemeCtx.Consumer>{fn}</ThemeCtx.Consumer>    → consumes edge
+ */
+export function extractContext(
+  tree: Parser.Tree,
+  filePath: string,
+  sourceCode: string,
+  existingNodes: GraphNode[],
+): ExtractionResult {
+  const nodes: GraphNode[] = [];
+  const edges: GraphEdge[] = [];
+  const root = tree.rootNode;
+
+  // Build map of component/hook names in this file for edge sources
+  const functionNodes = new Map<string, GraphNode>();
+  for (const n of existingNodes) {
+    if (n.file === filePath && (n.kind === 'Component' || n.kind === 'Hook')) {
+      functionNodes.set(n.name, n);
+    }
+  }
+
+  // Pass 1: Find context creation — const Ctx = createContext(...)
+  const contextNames = new Map<string, string>(); // variable name → node id
+  for (let i = 0; i < root.childCount; i++) {
+    const child = root.child(i)!;
+    const ctx = detectContextCreation(child, filePath);
+    if (ctx) {
+      nodes.push(ctx);
+      contextNames.set(ctx.name, ctx.id);
+    }
+
+    // Also check inside export statements
+    if (child.type === 'export_statement') {
+      for (let j = 0; j < child.childCount; j++) {
+        const inner = child.child(j)!;
+        const ctx2 = detectContextCreation(inner, filePath);
+        if (ctx2) {
+          ctx2.exportType = child.text.startsWith('export default') ? 'default' : 'named';
+          nodes.push(ctx2);
+          contextNames.set(ctx2.name, ctx2.id);
+        }
+      }
+    }
+  }
+
+  // Also track context names imported from other files
+  // We look for any identifier used in useContext() or .Provider that we can resolve
+  const importedContexts = buildImportedContextMap(root, existingNodes);
+
+  // Pass 2: Find Provider usage in JSX — <Ctx.Provider value={...}>
+  const jsxOpenings = findAll(root, 'jsx_opening_element');
+  const jsxSelfClosing = findAll(root, 'jsx_self_closing_element');
+
+  for (const jsx of [...jsxOpenings, ...jsxSelfClosing]) {
+    const nameNode = jsx.childForFieldName('name') ?? jsx.child(1);
+    if (!nameNode || nameNode.type !== 'member_expression') continue;
+
+    const prop = nameNode.childForFieldName('property');
+    if (prop?.text !== 'Provider') continue;
+
+    const obj = nameNode.childForFieldName('object');
+    if (!obj) continue;
+
+    const ctxName = obj.text;
+    const ctxId = contextNames.get(ctxName) ?? importedContexts.get(ctxName) ?? `unresolved:${ctxName}`;
+
+    // Find enclosing component
+    const enclosingFn = findEnclosingFunction(jsx);
+    if (!enclosingFn) continue;
+    const enclosingName = getFunctionName(enclosingFn);
+    if (!enclosingName) continue;
+    const enclosingNode = functionNodes.get(enclosingName);
+    if (!enclosingNode) continue;
+
+    edges.push({
+      source: enclosingNode.id,
+      target: ctxId,
+      kind: 'provides',
+      meta: {},
+    });
+  }
+
+  // Pass 3: Find useContext() consumers
+  const callExprs = findAll(root, 'call_expression');
+  for (const call of callExprs) {
+    const callee = call.childForFieldName('function');
+    if (!callee || callee.text !== 'useContext') continue;
+
+    const args = call.childForFieldName('arguments');
+    if (!args || args.childCount < 2) continue;
+
+    const ctxArg = args.child(1); // skip "("
+    if (!ctxArg) continue;
+
+    const ctxName = ctxArg.text;
+    const ctxId = contextNames.get(ctxName) ?? importedContexts.get(ctxName) ?? `unresolved:${ctxName}`;
+
+    const enclosingFn = findEnclosingFunction(call);
+    if (!enclosingFn) continue;
+    const enclosingName = getFunctionName(enclosingFn);
+    if (!enclosingName) continue;
+    const enclosingNode = functionNodes.get(enclosingName);
+    if (!enclosingNode) continue;
+
+    edges.push({
+      source: enclosingNode.id,
+      target: ctxId,
+      kind: 'consumes',
+      meta: {},
+    });
+  }
+
+  // Pass 4: Find <Ctx.Consumer> pattern (legacy)
+  for (const jsx of [...jsxOpenings, ...jsxSelfClosing]) {
+    const nameNode = jsx.childForFieldName('name') ?? jsx.child(1);
+    if (!nameNode || nameNode.type !== 'member_expression') continue;
+
+    const prop = nameNode.childForFieldName('property');
+    if (prop?.text !== 'Consumer') continue;
+
+    const obj = nameNode.childForFieldName('object');
+    if (!obj) continue;
+
+    const ctxName = obj.text;
+    const ctxId = contextNames.get(ctxName) ?? importedContexts.get(ctxName) ?? `unresolved:${ctxName}`;
+
+    const enclosingFn = findEnclosingFunction(jsx);
+    if (!enclosingFn) continue;
+    const enclosingName = getFunctionName(enclosingFn);
+    if (!enclosingName) continue;
+    const enclosingNode = functionNodes.get(enclosingName);
+    if (!enclosingNode) continue;
+
+    edges.push({
+      source: enclosingNode.id,
+      target: ctxId,
+      kind: 'consumes',
+      meta: { legacy: true },
+    });
+  }
+
+  return { nodes, edges };
+}
+
+function detectContextCreation(node: Parser.SyntaxNode, filePath: string): GraphNode | null {
+  if (node.type !== 'lexical_declaration') return null;
+
+  const declarator = findDirectChild(node, 'variable_declarator');
+  if (!declarator) return null;
+
+  const nameNode = declarator.childForFieldName('name');
+  const value = declarator.childForFieldName('value');
+  if (!nameNode || !value) return null;
+
+  if (value.type !== 'call_expression') return null;
+
+  const callee = value.childForFieldName('function');
+  if (!callee) return null;
+
+  // Match createContext or React.createContext
+  if (callee.text !== 'createContext' && callee.text !== 'React.createContext') return null;
+
+  return {
+    id: nodeId(filePath, nameNode.text),
+    kind: 'Context',
+    name: nameNode.text,
+    file: filePath,
+    line: node.startPosition.row + 1,
+    exportType: 'none',
+    meta: {},
+  };
+}
+
+function buildImportedContextMap(
+  root: Parser.SyntaxNode,
+  existingNodes: GraphNode[],
+): Map<string, string> {
+  const map = new Map<string, string>();
+  for (const n of existingNodes) {
+    if (n.kind === 'Context') {
+      map.set(n.name, n.id);
+    }
+  }
+  return map;
+}
+
+function getFunctionName(node: Parser.SyntaxNode): string | null {
+  const nameField = node.childForFieldName('name');
+  if (nameField) return nameField.text;
+
+  if (node.type === 'arrow_function' || node.type === 'function_expression') {
+    const parent = node.parent;
+    if (parent?.type === 'variable_declarator') {
+      return parent.childForFieldName('name')?.text ?? null;
+    }
+  }
+  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;
+}

package/src/parser/extractors/effects.ts

@@ -0,0 +1,205 @@
+import type Parser from 'tree-sitter';
+import type { GraphNode, GraphEdge } from '../../graph/schema.js';
+import { findAll, findEnclosingFunction } from './types.js';
+import type { ExtractionResult } from './types.js';
+
+const EFFECT_HOOKS = new Set(['useEffect', 'useLayoutEffect', 'useInsertionEffect']);
+
+/**
+ * Effects extractor — annotates existing component/hook nodes with useEffect metadata.
+ * Does not create new nodes — enriches existing ones.
+ *
+ * Captures:
+ *   - dependency array contents (or 'mount-only' / 'every-render')
+ *   - whether cleanup function exists
+ *   - function calls inside the effect body
+ */
+export function extractEffects(
+  tree: Parser.Tree,
+  filePath: string,
+  sourceCode: string,
+  existingNodes: GraphNode[],
+): ExtractionResult {
+  const edges: GraphEdge[] = [];
+  const root = tree.rootNode;
+
+  // Build function map
+  const functionNodes = new Map<string, GraphNode>();
+  for (const n of existingNodes) {
+    if (n.file === filePath && (n.kind === 'Component' || n.kind === 'Hook')) {
+      functionNodes.set(n.name, n);
+    }
+  }
+
+  const callExprs = findAll(root, 'call_expression');
+
+  for (const call of callExprs) {
+    const callee = call.childForFieldName('function');
+    if (!callee || !EFFECT_HOOKS.has(callee.text)) continue;
+
+    const enclosingFn = findEnclosingFunction(call);
+    if (!enclosingFn) continue;
+    const enclosingName = getFunctionName(enclosingFn);
+    if (!enclosingName) continue;
+    const enclosingNode = functionNodes.get(enclosingName);
+    if (!enclosingNode) continue;
+
+    const args = call.childForFieldName('arguments');
+    if (!args) continue;
+
+    // Extract callback (first arg) and deps array (second arg)
+    const { callback, depsNode } = extractEffectArgs(args);
+
+    // Parse dependency array
+    let deps: string | string[];
+    if (!depsNode) {
+      deps = 'every-render';
+    } else if (depsNode.type === 'array' && depsNode.childCount <= 2) {
+      // [ ] — just brackets, empty array
+      deps = 'mount-only';
+    } else if (depsNode.type === 'array') {
+      deps = extractArrayIdentifiers(depsNode);
+    } else {
+      deps = 'unknown';
+    }
+
+    // Check for cleanup (return statement in callback returning a function)
+    const hasCleanup = callback ? detectCleanup(callback) : false;
+
+    // Extract function calls inside the effect body
+    const triggers = callback ? extractTriggers(callback) : [];
+
+    // Store as metadata on the enclosing node
+    if (!enclosingNode.meta.effects) {
+      enclosingNode.meta.effects = [];
+    }
+    (enclosingNode.meta.effects as EffectMeta[]).push({
+      type: callee.text,
+      deps,
+      hasCleanup,
+      triggers,
+    });
+  }
+
+  return { nodes: [], edges };
+}
+
+interface EffectMeta {
+  type: string;
+  deps: string | string[];
+  hasCleanup: boolean;
+  triggers: string[];
+}
+
+function extractEffectArgs(args: Parser.SyntaxNode): {
+  callback: Parser.SyntaxNode | null;
+  depsNode: Parser.SyntaxNode | null;
+} {
+  let callback: Parser.SyntaxNode | null = null;
+  let depsNode: Parser.SyntaxNode | null = null;
+  let argIndex = 0;
+
+  for (let i = 0; i < args.childCount; i++) {
+    const child = args.child(i)!;
+    if (child.type === '(' || child.type === ')' || child.type === ',') continue;
+
+    if (argIndex === 0) {
+      callback = child;
+    } else if (argIndex === 1) {
+      depsNode = child;
+    }
+    argIndex++;
+  }
+
+  return { callback, depsNode };
+}
+
+function extractArrayIdentifiers(arrayNode: Parser.SyntaxNode): string[] {
+  const ids: string[] = [];
+  for (let i = 0; i < arrayNode.childCount; i++) {
+    const child = arrayNode.child(i)!;
+    if (child.type === 'identifier') {
+      ids.push(child.text);
+    } else if (child.type === 'member_expression') {
+      ids.push(child.text);
+    }
+  }
+  return ids;
+}
+
+function detectCleanup(callback: Parser.SyntaxNode): boolean {
+  // Look for a return statement that returns a function
+  const returns = findAll(callback, 'return_statement');
+  for (const ret of returns) {
+    // Make sure this return is directly in the callback, not in a nested function
+    const enclosing = findEnclosingFunction(ret);
+    if (enclosing && enclosing !== callback) {
+      // Check if enclosing is the callback itself
+      // For arrow functions, the callback IS the arrow_function
+      if (enclosing.parent !== callback && enclosing !== callback) continue;
+    }
+
+    const val = ret.child(1);
+    if (!val) continue;
+
+    if (
+      val.type === 'arrow_function' ||
+      val.type === 'function_expression' ||
+      val.type === 'identifier' // return cleanup;
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function extractTriggers(callback: Parser.SyntaxNode): string[] {
+  const triggers: string[] = [];
+  const calls = findAll(callback, 'call_expression');
+
+  for (const call of calls) {
+    const callee = call.childForFieldName('function');
+    if (!callee) continue;
+
+    // Skip nested function definitions
+    const enclosing = findEnclosingFunction(call);
+    if (enclosing && enclosing !== callback && !isDirectChild(enclosing, callback)) continue;
+
+    if (callee.type === 'identifier') {
+      triggers.push(callee.text);
+    } else if (callee.type === 'member_expression') {
+      triggers.push(callee.text);
+    }
+  }
+
+  return triggers;
+}
+
+function isDirectChild(inner: Parser.SyntaxNode, outer: Parser.SyntaxNode): boolean {
+  let current = inner.parent;
+  while (current) {
+    if (current === outer) return true;
+    if (
+      current.type === 'arrow_function' ||
+      current.type === 'function_expression' ||
+      current.type === 'function_declaration'
+    ) {
+      // Hit another function boundary — not direct
+      return current === outer;
+    }
+    current = current.parent;
+  }
+  return false;
+}
+
+function getFunctionName(node: Parser.SyntaxNode): string | null {
+  const nameField = node.childForFieldName('name');
+  if (nameField) return nameField.text;
+  if (node.type === 'arrow_function' || node.type === 'function_expression') {
+    const parent = node.parent;
+    if (parent?.type === 'variable_declarator') {
+      return parent.childForFieldName('name')?.text ?? null;
+    }
+  }
+  return null;
+}

package/src/parser/extractors/hooks.ts

@@ -0,0 +1,268 @@
+import type Parser from 'tree-sitter';
+import type { GraphNode, GraphEdge } from '../../graph/schema.js';
+import { nodeId, isHookName, findAll, findEnclosingFunction, isPascalCase } from './types.js';
+import type { ExtractionResult } from './types.js';
+
+const BUILTIN_HOOKS = new Set([
+  'useState', 'useEffect', 'useContext', 'useReducer', 'useCallback',
+  'useMemo', 'useRef', 'useImperativeHandle', 'useLayoutEffect',
+  'useDebugValue', 'useDeferredValue', 'useTransition', 'useId',
+  'useSyncExternalStore', 'useInsertionEffect', 'useActionState',
+  'useFormStatus', 'useOptimistic', 'use',
+]);
+
+export function extractHooks(
+  tree: Parser.Tree,
+  filePath: string,
+  sourceCode: string,
+  existingNodes: GraphNode[],
+): ExtractionResult {
+  const nodes: GraphNode[] = [];
+  const edges: GraphEdge[] = [];
+  const root = tree.rootNode;
+
+  // Build a map of component/hook names defined in this file from existing nodes
+  const definedFunctions = new Map<string, GraphNode>();
+  for (const n of existingNodes) {
+    if (n.file === filePath && (n.kind === 'Component' || n.kind === 'Hook')) {
+      definedFunctions.set(n.name, n);
+    }
+  }
+
+  // Pass 1: Find custom hook definitions
+  for (let i = 0; i < root.childCount; i++) {
+    const child = root.child(i)!;
+    const hook = detectHookDefinition(child, filePath);
+    if (hook) {
+      nodes.push(hook);
+      definedFunctions.set(hook.name, hook);
+    }
+  }
+
+  // Pass 2: Find all hook call sites
+  const callExprs = findAll(root, 'call_expression');
+  for (const call of callExprs) {
+    const callee = call.childForFieldName('function');
+    if (!callee) continue;
+
+    const calleeName = callee.text;
+    if (!isHookName(calleeName) && calleeName !== 'use') continue;
+
+    // Find enclosing component or hook
+    const enclosingFn = findEnclosingFunction(call);
+    if (!enclosingFn) continue;
+
+    const enclosingName = getFunctionName(enclosingFn);
+    if (!enclosingName) continue;
+
+    const enclosingNode = definedFunctions.get(enclosingName);
+    if (!enclosingNode) continue;
+
+    // Determine target
+    const targetId = BUILTIN_HOOKS.has(calleeName)
+      ? `builtin:${calleeName}`
+      : resolveHookTarget(calleeName, filePath, existingNodes);
+
+    // Get destructured names
+    const destructured = getDestructuredNames(call);
+
+    edges.push({
+      source: enclosingNode.id,
+      target: targetId,
+      kind: 'uses_hook',
+      meta: {
+        hookName: calleeName,
+        ...(destructured.length > 0 ? { destructured } : {}),
+      },
+    });
+  }
+
+  return { nodes, edges };
+}
+
+function detectHookDefinition(node: Parser.SyntaxNode, filePath: string): GraphNode | null {
+  // function useXxx() { ... }
+  if (node.type === 'function_declaration') {
+    const nameNode = node.childForFieldName('name');
+    const name = nameNode?.text;
+    if (!name || !isHookName(name)) return null;
+    return makeHookNode(name, filePath, node);
+  }
+
+  // export function useXxx() { ... }
+  if (node.type === 'export_statement') {
+    const isDefault = node.text.startsWith('export default');
+    const funcDecl = findDirectChild(node, 'function_declaration');
+    if (funcDecl) {
+      const nameNode = funcDecl.childForFieldName('name');
+      const name = nameNode?.text;
+      if (!name || !isHookName(name)) return null;
+      const hook = makeHookNode(name, filePath, funcDecl);
+      hook.exportType = isDefault ? 'default' : 'named';
+      return hook;
+    }
+
+    const lexDecl = findDirectChild(node, 'lexical_declaration');
+    if (lexDecl) {
+      return tryLexicalHook(lexDecl, filePath, isDefault ? 'default' : 'named');
+    }
+
+    return null;
+  }
+
+  // const useXxx = () => { ... }
+  if (node.type === 'lexical_declaration') {
+    return tryLexicalHook(node, filePath, 'none');
+  }
+
+  return null;
+}
+
+function tryLexicalHook(
+  node: Parser.SyntaxNode,
+  filePath: string,
+  exportType: 'default' | 'named' | 'none',
+): GraphNode | null {
+  const declarator = findDirectChild(node, 'variable_declarator');
+  if (!declarator) return null;
+
+  const nameNode = declarator.childForFieldName('name');
+  const name = nameNode?.text;
+  if (!name || !isHookName(name)) return null;
+
+  const value = declarator.childForFieldName('value');
+  if (!value) return null;
+
+  if (value.type === 'arrow_function' || value.type === 'function_expression') {
+    const hook = makeHookNode(name, filePath, node);
+    hook.exportType = exportType;
+    return hook;
+  }
+
+  return null;
+}
+
+function makeHookNode(name: string, filePath: string, node: Parser.SyntaxNode): GraphNode {
+  const returns = extractReturnShape(node);
+  return {
+    id: nodeId(filePath, name),
+    kind: 'Hook',
+    name,
+    file: filePath,
+    line: node.startPosition.row + 1,
+    exportType: 'none',
+    returns: returns ?? undefined,
+    meta: {},
+  };
+}
+
+function extractReturnShape(node: Parser.SyntaxNode): string | null {
+  const returns = findAll(node, 'return_statement');
+  for (const ret of returns) {
+    // Skip returns inside nested functions
+    const enclosing = findEnclosingFunction(ret);
+    if (enclosing && enclosing !== node) {
+      // Check if enclosing is directly the function body
+      const ourBody = node.childForFieldName('body');
+      if (ourBody && !isDescendantOf(ret, ourBody)) continue;
+    }
+
+    const val = ret.child(1); // skip 'return' keyword
+    if (!val) continue;
+
+    if (val.type === 'object') {
+      // { user, login, logout }
+      const keys: string[] = [];
+      for (let i = 0; i < val.childCount; i++) {
+        const child = val.child(i)!;
+        if (child.type === 'shorthand_property' || child.type === 'pair') {
+          const key = child.childForFieldName('key') ?? child.child(0);
+          if (key) keys.push(key.text);
+        }
+      }
+      if (keys.length > 0) return `{ ${keys.join(', ')} }`;
+    }
+
+    if (val.type === 'array') {
+      const items: string[] = [];
+      for (let i = 0; i < val.childCount; i++) {
+        const child = val.child(i)!;
+        if (child.type === 'identifier') items.push(child.text);
+      }
+      if (items.length > 0) return `[${items.join(', ')}]`;
+    }
+  }
+
+  return null;
+}
+
+function isDescendantOf(child: Parser.SyntaxNode, ancestor: Parser.SyntaxNode): boolean {
+  let current = child.parent;
+  while (current) {
+    if (current === ancestor) return true;
+    current = current.parent;
+  }
+  return false;
+}
+
+function getFunctionName(node: Parser.SyntaxNode): string | null {
+  // function_declaration: has name field
+  const nameField = node.childForFieldName('name');
+  if (nameField) return nameField.text;
+
+  // arrow_function: look at parent variable_declarator
+  if (node.type === 'arrow_function' || node.type === 'function_expression') {
+    const parent = node.parent;
+    if (parent?.type === 'variable_declarator') {
+      const n = parent.childForFieldName('name');
+      return n?.text ?? null;
+    }
+  }
+
+  return null;
+}
+
+function getDestructuredNames(callNode: Parser.SyntaxNode): string[] {
+  const parent = callNode.parent;
+  if (parent?.type !== 'variable_declarator') return [];
+
+  const nameNode = parent.childForFieldName('name');
+  if (!nameNode) return [];
+
+  const names: string[] = [];
+
+  if (nameNode.type === 'object_pattern') {
+    for (let i = 0; i < nameNode.childCount; i++) {
+      const child = nameNode.child(i)!;
+      if (child.type === 'shorthand_property_identifier_pattern') {
+        names.push(child.text);
+      } else if (child.type === 'pair_pattern') {
+        const key = child.childForFieldName('key');
+        if (key) names.push(key.text);
+      }
+    }
+  } else if (nameNode.type === 'array_pattern') {
+    for (let i = 0; i < nameNode.childCount; i++) {
+      const child = nameNode.child(i)!;
+      if (child.type === 'identifier') names.push(child.text);
+    }
+  }
+
+  return names;
+}
+
+function resolveHookTarget(hookName: string, filePath: string, existingNodes: GraphNode[]): string {
+  // Look for a Hook node with this name in existing nodes
+  for (const n of existingNodes) {
+    if (n.kind === 'Hook' && n.name === hookName) return n.id;
+  }
+  // Unresolved — may be from an import we haven't linked yet
+  return `unresolved:${hookName}`;
+}
+
+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;
+}