@reactgraph/cli 0.1.1

package/src/parser/extractors/routes.ts

@@ -0,0 +1,331 @@
+import { existsSync, readdirSync, statSync } from 'node:fs';
+import { join, relative, dirname, basename } from 'node:path';
+import type Parser from 'tree-sitter';
+import type { GraphNode, GraphEdge } from '../../graph/schema.js';
+import { nodeId, findAll } from './types.js';
+import type { ExtractionResult } from './types.js';
+
+/**
+ * Route extractor — detects React Router and Next.js routing.
+ *
+ * React Router: <Route path="/" element={<Dashboard />} />
+ * Next.js App Router: src/app/dashboard/page.tsx → /dashboard
+ * Next.js Pages Router: pages/dashboard.tsx → /dashboard
+ * Next.js API Routes: src/app/api/auth/route.ts → /api/auth
+ */
+export function extractRoutes(
+  tree: Parser.Tree,
+  filePath: string,
+  sourceCode: string,
+  existingNodes: GraphNode[],
+): ExtractionResult {
+  const nodes: GraphNode[] = [];
+  const edges: GraphEdge[] = [];
+
+  // Detect React Router <Route> components in JSX
+  extractReactRouterRoutes(tree.rootNode, filePath, existingNodes, nodes, edges);
+
+  // Detect Next.js file-based routing
+  extractNextjsRoute(filePath, sourceCode, tree.rootNode, existingNodes, nodes, edges);
+
+  return { nodes, edges };
+}
+
+/**
+ * Detect file-based routes for Next.js.
+ * Runs on every file, but only creates Route nodes for page.tsx, route.ts, etc.
+ */
+function extractNextjsRoute(
+  filePath: string,
+  sourceCode: string,
+  root: Parser.SyntaxNode,
+  existingNodes: GraphNode[],
+  nodes: GraphNode[],
+  edges: GraphEdge[],
+): void {
+  const fileName = basename(filePath);
+  const dir = dirname(filePath);
+
+  // App Router: page.tsx → page route
+  if (/^page\.(tsx?|jsx?)$/.test(fileName)) {
+    const routePath = appDirToRoute(dir);
+    if (!routePath) return;
+
+    const routeNode: GraphNode = {
+      id: nodeId(filePath, `route:${routePath}`),
+      kind: 'Route',
+      name: routePath,
+      file: filePath,
+      line: 1,
+      exportType: 'none',
+      meta: { framework: 'next-app' },
+    };
+    nodes.push(routeNode);
+
+    // Link to the default exported component
+    const component = existingNodes.find(
+      n => n.kind === 'Component' && n.file === filePath && n.exportType === 'default'
+    );
+    if (component) {
+      edges.push({
+        source: routeNode.id,
+        target: component.id,
+        kind: 'renders',
+        meta: { role: 'page' },
+      });
+    }
+    return;
+  }
+
+  // App Router: layout.tsx → layout
+  if (/^layout\.(tsx?|jsx?)$/.test(fileName)) {
+    const routePath = appDirToRoute(dir);
+    if (!routePath) return;
+
+    const layoutNode: GraphNode = {
+      id: nodeId(filePath, `layout:${routePath}`),
+      kind: 'Route',
+      name: `layout:${routePath}`,
+      file: filePath,
+      line: 1,
+      exportType: 'none',
+      meta: { framework: 'next-app', role: 'layout' },
+    };
+    nodes.push(layoutNode);
+
+    const component = existingNodes.find(
+      n => n.kind === 'Component' && n.file === filePath && n.exportType === 'default'
+    );
+    if (component) {
+      edges.push({
+        source: layoutNode.id,
+        target: component.id,
+        kind: 'renders',
+        meta: { role: 'layout' },
+      });
+    }
+    return;
+  }
+
+  // App Router: route.ts → API endpoint
+  if (/^route\.(ts|js)$/.test(fileName)) {
+    const routePath = appDirToRoute(dir);
+    if (!routePath) return;
+
+    // Find exported handler functions (GET, POST, PUT, DELETE, PATCH)
+    const httpMethods = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'];
+    for (let i = 0; i < root.childCount; i++) {
+      const child = root.child(i)!;
+      if (child.type === 'export_statement') {
+        const funcDecl = findDirectChild(child, 'function_declaration');
+        const lexDecl = findDirectChild(child, 'lexical_declaration');
+
+        const funcName = funcDecl?.childForFieldName('name')?.text
+          ?? lexDecl?.child(0)?.childForFieldName?.('name')?.text;
+
+        if (funcName && httpMethods.includes(funcName)) {
+          const endpointNode: GraphNode = {
+            id: nodeId(filePath, `${funcName}:${routePath}`),
+            kind: 'ApiEndpoint',
+            name: `${funcName} ${routePath}`,
+            file: filePath,
+            line: child.startPosition.row + 1,
+            exportType: 'named',
+            meta: { method: funcName, path: routePath, framework: 'next-app' },
+          };
+          nodes.push(endpointNode);
+        }
+      }
+    }
+    return;
+  }
+
+  // Pages Router: pages/dashboard.tsx → /dashboard
+  if (isNextPagesFile(filePath)) {
+    const routePath = pagesToRoute(filePath);
+    if (!routePath) return;
+
+    const routeNode: GraphNode = {
+      id: nodeId(filePath, `route:${routePath}`),
+      kind: 'Route',
+      name: routePath,
+      file: filePath,
+      line: 1,
+      exportType: 'none',
+      meta: { framework: 'next-pages' },
+    };
+    nodes.push(routeNode);
+
+    const component = existingNodes.find(
+      n => n.kind === 'Component' && n.file === filePath && n.exportType === 'default'
+    );
+    if (component) {
+      edges.push({
+        source: routeNode.id,
+        target: component.id,
+        kind: 'renders',
+        meta: { role: 'page' },
+      });
+    }
+  }
+}
+
+/**
+ * Detect React Router <Route> elements in JSX.
+ */
+function extractReactRouterRoutes(
+  root: Parser.SyntaxNode,
+  filePath: string,
+  existingNodes: GraphNode[],
+  nodes: GraphNode[],
+  edges: GraphEdge[],
+): void {
+  const jsxElements = [
+    ...findAll(root, 'jsx_element'),
+    ...findAll(root, 'jsx_self_closing_element'),
+  ];
+
+  for (const jsx of jsxElements) {
+    const tagName = getJSXTagName(jsx);
+    if (tagName !== 'Route') continue;
+
+    // Extract path and element attributes
+    const attrs = getJSXAttributes(jsx);
+    const path = attrs.get('path');
+    if (!path) continue;
+
+    const routeNode: GraphNode = {
+      id: nodeId(filePath, `route:${path}`),
+      kind: 'Route',
+      name: path,
+      file: filePath,
+      line: jsx.startPosition.row + 1,
+      exportType: 'none',
+      meta: { framework: 'react-router' },
+    };
+    nodes.push(routeNode);
+
+    // Link to the rendered component via element prop
+    const elementAttr = attrs.get('element');
+    if (elementAttr) {
+      // element={<Dashboard />} — extract component name
+      const match = elementAttr.match(/<(\w+)/);
+      if (match) {
+        const componentName = match[1]!;
+        const component = existingNodes.find(
+          n => n.kind === 'Component' && n.name === componentName
+        );
+        if (component) {
+          edges.push({
+            source: routeNode.id,
+            target: component.id,
+            kind: 'renders',
+            meta: { role: 'page' },
+          });
+        }
+      }
+    }
+
+    // Link to the rendered component via component prop (react-router v5)
+    const componentProp = attrs.get('component');
+    if (componentProp) {
+      const component = existingNodes.find(
+        n => n.kind === 'Component' && n.name === componentProp
+      );
+      if (component) {
+        edges.push({
+          source: routeNode.id,
+          target: component.id,
+          kind: 'renders',
+          meta: { role: 'page' },
+        });
+      }
+    }
+  }
+}
+
+// ---- Helpers ----
+
+function appDirToRoute(dir: string): string | null {
+  // Convert src/app/dashboard/settings → /dashboard/settings
+  const appMatch = dir.match(/(?:src\/)?app(\/.*)?$/);
+  if (!appMatch) return null;
+
+  const routePart = appMatch[1] ?? '';
+  // Convert [param] to :param, [...slug] to *slug, (group) segments removed
+  const route = routePart
+    .split('/')
+    .filter(s => !s.startsWith('(') || !s.endsWith(')')) // remove route groups
+    .map(s => {
+      if (s.startsWith('[...') && s.endsWith(']')) return `*${s.slice(4, -1)}`;
+      if (s.startsWith('[') && s.endsWith(']')) return `:${s.slice(1, -1)}`;
+      return s;
+    })
+    .join('/');
+
+  return route || '/';
+}
+
+function isNextPagesFile(filePath: string): boolean {
+  return filePath.startsWith('pages/') || filePath.includes('/pages/');
+}
+
+function pagesToRoute(filePath: string): string | null {
+  const match = filePath.match(/pages(\/.*)\.(tsx?|jsx?)$/);
+  if (!match) return null;
+
+  let route = match[1]!;
+  // Remove /index suffix
+  route = route.replace(/\/index$/, '') || '/';
+  // Convert [param] to :param
+  route = route.replace(/\[\.\.\.(\w+)\]/g, '*$1');
+  route = route.replace(/\[(\w+)\]/g, ':$1');
+
+  return route;
+}
+
+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 getJSXAttributes(node: Parser.SyntaxNode): Map<string, string> {
+  const attrs = new Map<string, string>();
+  const attrParent = node.type === 'jsx_self_closing_element'
+    ? node
+    : findDirectChild(node, 'jsx_opening_element');
+
+  if (!attrParent) return attrs;
+
+  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 valueNode = child.child(child.childCount - 1);
+      if (valueNode) {
+        const value = valueNode.text.replace(/^['"{]|['"}]$/g, '');
+        attrs.set(nameNode.text, value);
+      }
+    }
+  }
+
+  return attrs;
+}
+
+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;
+}