devlensio 0.2.0

package/dist/graph/edges/hookEdges.js

@@ -0,0 +1,54 @@
+// ─── detectHookEdges ──────────────────────────────────────────────────────────
+//
+// Creates CALLS edges for hook usage relationships:
+//
+//   COMPONENT → HOOK  (component uses a hook) — reads metadata.hooks
+//   HOOK      → HOOK  (hook uses another hook) — reads metadata.dependencies
+//   FUNCTION  → HOOK  (function uses a hook)   — reads metadata.hookCalls
+//
+// callEdges.ts explicitly skips hook calls so these would otherwise be missed.
+// We reuse CALLS edge type with isHookCall: true in metadata for distinction.
+export function detectHookEdges(nodes, lookup) {
+    const edges = [];
+    for (const node of nodes) {
+        if (node.type !== "COMPONENT" &&
+            node.type !== "HOOK" &&
+            node.type !== "FUNCTION")
+            continue;
+        const hookNames = (node.type === "COMPONENT" ? node.metadata.hooks :
+            node.type === "HOOK" ? node.metadata.dependencies :
+                node.metadata.hookCalls // FUNCTION
+        );
+        if (!hookNames || hookNames.length === 0)
+            continue;
+        for (const hookName of hookNames) {
+            if (!hookName.startsWith("use"))
+                continue;
+            const targets = lookup.nodesByName.get(hookName);
+            if (!targets || targets.length === 0)
+                continue;
+            for (const target of targets) {
+                // Only connect to HOOK nodes
+                if (target.type !== "HOOK")
+                    continue;
+                // No self-loops
+                if (target.id === node.id)
+                    continue;
+                // No duplicates
+                const alreadyExists = edges.some(e => e.from === node.id && e.to === target.id && e.type === "CALLS");
+                if (alreadyExists)
+                    continue;
+                edges.push({
+                    from: node.id,
+                    to: target.id,
+                    type: "CALLS",
+                    metadata: {
+                        calledName: hookName,
+                        isHookCall: true,
+                    },
+                });
+            }
+        }
+    }
+    return edges;
+}

package/dist/graph/edges/importEdges.d.ts

@@ -0,0 +1,8 @@
+import type { CodeEdge, CodeNode } from "../../types.js";
+import type { LookupMaps } from "../buildLookup.js";
+export declare function isLocalImport(importPath: string): boolean;
+export interface ImportEdgeResult {
+    edges: CodeEdge[];
+    thirdPartyMethodNodes: CodeNode[];
+}
+export declare function detectImportEdges(lookupMp: LookupMaps, repoPath: string): ImportEdgeResult;

package/dist/graph/edges/importEdges.js

@@ -0,0 +1,224 @@
+import path from "path";
+import fs from "fs";
+import { extractPackageName } from "../thirdPartyLibs.js";
+import { Project } from "ts-morph";
+// Aliases we consider as local imports
+const LOCAL_PREFIXES = ["./", "../", "@/", "~/", "#/"];
+// Check if an import is local (not third party)
+export function isLocalImport(importPath) {
+    return LOCAL_PREFIXES.some(prefix => importPath.startsWith(prefix));
+}
+//Get config file path - tsconfig first, jsconfig as fallback
+function getConfigPath(repoPath) {
+    const tsconfig = path.join(repoPath, "tsconfig.json");
+    const jsconfig = path.join(repoPath, "jsconfig.json");
+    if (fs.existsSync(tsconfig))
+        return tsconfig;
+    if (fs.existsSync(jsconfig))
+        return jsconfig;
+    return undefined;
+}
+// Recursively walk directory and add files to project
+// Same approach as parser — reliable on Windows
+function addFilesRecursively(dir, project) {
+    const IGNORE_DIRS = [
+        "node_modules", "dist", "build",
+        ".next", "coverage", ".git",
+    ];
+    let entries;
+    try {
+        entries = fs.readdirSync(dir, { withFileTypes: true });
+    }
+    catch {
+        return;
+    }
+    for (const entry of entries) {
+        const fullPath = path.join(dir, entry.name);
+        if (entry.isDirectory()) {
+            if (IGNORE_DIRS.includes(entry.name))
+                continue;
+            addFilesRecursively(fullPath, project);
+        }
+        else if (entry.isFile()) {
+            if (!/\.(ts|tsx|js|jsx)$/.test(entry.name))
+                continue;
+            if (/\.(test|spec)\.(ts|tsx|js|jsx)$/.test(entry.name))
+                continue;
+            if (/\.d\.ts$/.test(entry.name))
+                continue;
+            project.addSourceFileAtPath(fullPath);
+        }
+    }
+}
+export function detectImportEdges(lookupMp, repoPath) {
+    const edges = [];
+    const createdEdges = new Set();
+    // Dedup method nodes across all files — same named import in multiple files
+    // produces only ONE node (e.g. a single [npm]/react::useState node).
+    const methodNodesMap = new Map();
+    const configPath = getConfigPath(repoPath);
+    const project = configPath
+        ? new Project({ tsConfigFilePath: configPath, skipAddingFilesFromTsConfig: true })
+        : new Project({
+            compilerOptions: {
+                allowJs: true,
+                checkJs: false,
+                jsx: 4,
+                strict: false,
+            },
+            skipAddingFilesFromTsConfig: true,
+        });
+    addFilesRecursively(repoPath, project);
+    for (const file of project.getSourceFiles()) {
+        const absFilePath = file.getFilePath();
+        const sourceRelative = path.relative(repoPath, absFilePath).replace(/\\/g, "/");
+        const sourceFileNode = lookupMp.fileNodesByPath.get(sourceRelative);
+        if (!sourceFileNode)
+            continue;
+        const importDeclarations = file.getImportDeclarations();
+        for (const importDecl of importDeclarations) {
+            const moduleSpecifier = importDecl.getModuleSpecifierValue();
+            if (!isLocalImport(moduleSpecifier)) {
+                // ─── Third-party import ───────────────────────────────────
+                const pkgName = extractPackageName(moduleSpecifier);
+                const thirdPartyNode = lookupMp.thirdPartyNodesByName.get(pkgName);
+                if (thirdPartyNode) {
+                    const fileAliasMap = lookupMp.thirdPartyImportAliases.get(sourceRelative) ?? new Map();
+                    // ── Named imports → one method node per imported name ──────
+                    // e.g. import { useState, useEffect } from 'react'
+                    //   → nodes [npm]/react::useState, [npm]/react::useEffect
+                    //   → fileAliasMap: "useState" → "[npm]/react::useState"
+                    for (const specifier of importDecl.getNamedImports()) {
+                        const localAlias = specifier.getAliasNode()?.getText() ?? specifier.getName();
+                        const importedName = specifier.getName();
+                        const methodNodeId = `[npm]/${pkgName}::${importedName}`;
+                        if (!methodNodesMap.has(methodNodeId)) {
+                            methodNodesMap.set(methodNodeId, {
+                                id: methodNodeId,
+                                name: `${pkgName}.${importedName}`,
+                                type: "THIRD_PARTY",
+                                filePath: `[npm]/${pkgName}`,
+                                startLine: 0,
+                                endLine: 0,
+                                rawCode: undefined,
+                                codeHash: undefined,
+                                metadata: {
+                                    isThirdParty: true,
+                                    packageVersion: thirdPartyNode.metadata.packageVersion,
+                                    category: thirdPartyNode.metadata.category,
+                                    parentPackageId: thirdPartyNode.id,
+                                    methodName: importedName,
+                                },
+                            });
+                        }
+                        // Map the local alias to the method node so callEdges can resolve it
+                        fileAliasMap.set(localAlias, methodNodeId);
+                        // IMPORTS edge: source file → method node
+                        const edgeKey = `${sourceFileNode.id}→${methodNodeId}:IMPORTS`;
+                        if (!createdEdges.has(edgeKey)) {
+                            createdEdges.add(edgeKey);
+                            edges.push({
+                                from: sourceFileNode.id,
+                                to: methodNodeId,
+                                type: "IMPORTS",
+                                metadata: { importPath: moduleSpecifier, isThirdParty: true, importedName },
+                            });
+                        }
+                    }
+                    // ── Default import → package node ─────────────────────────
+                    // e.g. import axios from 'axios'
+                    //   → fileAliasMap: "axios" → "[npm]/axios"
+                    //   Method nodes for member-access calls (axios.get) are created
+                    //   lazily in callEdges.ts when the actual calls are encountered.
+                    const defaultImport = importDecl.getDefaultImport();
+                    if (defaultImport) {
+                        fileAliasMap.set(defaultImport.getText(), thirdPartyNode.id);
+                        const edgeKey = `${sourceFileNode.id}→${thirdPartyNode.id}:IMPORTS`;
+                        if (!createdEdges.has(edgeKey)) {
+                            createdEdges.add(edgeKey);
+                            edges.push({
+                                from: sourceFileNode.id,
+                                to: thirdPartyNode.id,
+                                type: "IMPORTS",
+                                metadata: { importPath: moduleSpecifier, isThirdParty: true },
+                            });
+                        }
+                    }
+                    // ── Namespace import → package node ───────────────────────
+                    // e.g. import * as ReactQuery from '@tanstack/react-query'
+                    //   → fileAliasMap: "ReactQuery" → "[npm]/@tanstack/react-query"
+                    const namespaceImport = importDecl.getNamespaceImport();
+                    if (namespaceImport) {
+                        fileAliasMap.set(namespaceImport.getText(), thirdPartyNode.id);
+                        const edgeKey = `${sourceFileNode.id}→${thirdPartyNode.id}:IMPORTS`;
+                        if (!createdEdges.has(edgeKey)) {
+                            createdEdges.add(edgeKey);
+                            edges.push({
+                                from: sourceFileNode.id,
+                                to: thirdPartyNode.id,
+                                type: "IMPORTS",
+                                metadata: { importPath: moduleSpecifier, isThirdParty: true },
+                            });
+                        }
+                    }
+                    lookupMp.thirdPartyImportAliases.set(sourceRelative, fileAliasMap);
+                }
+                continue; // always skip local-resolution path for non-local imports
+            }
+            // ─── Resolve the imported file path ───────────────────────────
+            let resolvedPath;
+            // First try ts-morph automatic resolution
+            // Works when tsconfig/jsconfig exists
+            const resolvedFile = importDecl.getModuleSpecifierSourceFile();
+            if (resolvedFile) {
+                resolvedPath = resolvedFile.getFilePath();
+            }
+            else {
+                // Fallback — manually resolve relative and alias paths
+                // Used when no tsconfig exists (e.g. in tests)
+                const currentDir = path.dirname(absFilePath);
+                let basePath = moduleSpecifier;
+                // Handle @/ ~/ #/ aliases → resolve to src/
+                if (moduleSpecifier.startsWith("@/") ||
+                    moduleSpecifier.startsWith("~/") ||
+                    moduleSpecifier.startsWith("#/")) {
+                    basePath = path.join(repoPath, "src", moduleSpecifier.slice(2));
+                }
+                else {
+                    // Relative import — resolve from current file's directory
+                    basePath = path.join(currentDir, moduleSpecifier);
+                }
+                // Try all possible extensions and index file patterns
+                const candidates = [
+                    basePath,
+                    basePath + ".ts",
+                    basePath + ".tsx",
+                    basePath + ".js",
+                    basePath + ".jsx",
+                    path.join(basePath, "index.ts"),
+                    path.join(basePath, "index.tsx"),
+                    path.join(basePath, "index.js"),
+                    path.join(basePath, "index.jsx"),
+                ];
+                resolvedPath = candidates.find((c) => fs.existsSync(c));
+            }
+            if (!resolvedPath)
+                continue;
+            const targetRelative = path.relative(repoPath, resolvedPath).replace(/\\/g, "/");
+            const targetFileNode = lookupMp.fileNodesByPath.get(targetRelative);
+            if (!targetFileNode)
+                continue;
+            const edgeKey = `${sourceFileNode.id}→${targetFileNode.id}`;
+            if (createdEdges.has(edgeKey))
+                continue;
+            createdEdges.add(edgeKey);
+            edges.push({
+                from: sourceFileNode.id,
+                to: targetFileNode.id,
+                type: "IMPORTS",
+                metadata: { importPath: moduleSpecifier },
+            });
+        }
+    }
+    return { edges, thirdPartyMethodNodes: [...methodNodesMap.values()] };
+}

package/dist/graph/edges/propEdges.d.ts

@@ -0,0 +1,3 @@
+import type { CodeEdge, CodeNode } from "../../types.js";
+import type { LookupMaps } from "../buildLookup.js";
+export declare function detectPropEdges(nodes: CodeNode[], lookupMp: LookupMaps, repoPath: string): CodeEdge[];

package/dist/graph/edges/propEdges.js

@@ -0,0 +1,142 @@
+import fs from "fs";
+import path from "path";
+import { Project, SyntaxKind } from "ts-morph";
+import { closestByPath } from "./utils.js";
+// Recursively walk directory and add files to project
+// Same approach as parser — reliable on Windows
+function addFilesRecursively(dir, project) {
+    const IGNORE_DIRS = [
+        "node_modules", "dist", "build",
+        ".next", "coverage", ".git",
+    ];
+    let entries;
+    try {
+        entries = fs.readdirSync(dir, { withFileTypes: true });
+    }
+    catch {
+        return;
+    }
+    for (const entry of entries) {
+        const fullPath = path.join(dir, entry.name);
+        if (entry.isDirectory()) {
+            if (IGNORE_DIRS.includes(entry.name))
+                continue;
+            addFilesRecursively(fullPath, project);
+        }
+        else if (entry.isFile()) {
+            if (!/\.(ts|tsx|js|jsx)$/.test(entry.name))
+                continue;
+            if (/\.(test|spec)\.(ts|tsx|js|jsx)$/.test(entry.name))
+                continue;
+            if (/\.d\.ts$/.test(entry.name))
+                continue;
+            project.addSourceFileAtPath(fullPath);
+        }
+    }
+}
+export function detectPropEdges(nodes, lookupMp, repoPath) {
+    const edges = [];
+    // Track created edges for deduplication
+    // Key: "fromId→toId" — value: index in edges array
+    // So we can update renderCount on duplicates
+    const edgeIndex = new Map();
+    const project = new Project({
+        compilerOptions: {
+            allowJs: true,
+            checkJs: false,
+            jsx: 4,
+            strict: false,
+        },
+        skipAddingFilesFromTsConfig: true,
+    });
+    addFilesRecursively(repoPath, project);
+    const componentNodes = nodes.filter(n => n.type === "COMPONENT");
+    for (const component of componentNodes) {
+        const absPath = path.resolve(repoPath, component.filePath).replace(/\\/g, "/");
+        const sourceFile = project.getSourceFile(absPath);
+        if (!sourceFile)
+            continue;
+        // Find all JSX elements in the file
+        const jsxOpeningElements = sourceFile.getDescendantsOfKind(SyntaxKind.JsxOpeningElement);
+        const jsxSelfClosingElements = sourceFile.getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement);
+        // Filter to only JSX within this component's line range (meaning which lies between this component's startLine and endLine)
+        const allJsxElements = [...jsxOpeningElements, ...jsxSelfClosingElements]
+            .filter(el => {
+            const line = el.getStartLineNumber();
+            return line >= component.startLine && line <= component.endLine;
+        });
+        for (const jsxElement of allJsxElements) {
+            const tagName = jsxElement.getTagNameNode().getText();
+            // Skip HTML native elements — they start with lowercase
+            if (/^[a-z]/.test(tagName))
+                continue;
+            // ── Context.Provider detection ─────────────────────────────────
+            // <AuthContext.Provider value={...}> signals this component
+            // provides that context to its subtree → WRITES_TO edge.
+            if (tagName.endsWith(".Provider")) {
+                const contextName = tagName.slice(0, -".Provider".length);
+                const ctxStore = lookupMp.storeNodes.find(n => n.name === contextName && n.metadata.storeType === "context");
+                if (ctxStore) {
+                    edges.push({
+                        from: component.id,
+                        to: ctxStore.id,
+                        type: "WRITES_TO",
+                        metadata: { isContextProvider: true },
+                    });
+                }
+                continue; // not a renderable component node — skip normal lookup
+            }
+            const targetNodes = lookupMp.nodesByName.get(tagName);
+            if (!targetNodes || targetNodes.length === 0)
+                continue; // this means that this is not a component we extracted
+            //Extract prop names passed to the component
+            const attributes = jsxElement.getAttributes();
+            const props = [];
+            for (const attr of attributes) {
+                // Regular prop: user={currentUser} or disabled
+                // Spread prop: {...props} — we skip these
+                if (attr.getKind() === SyntaxKind.JsxAttribute) {
+                    const propName = attr.getFirstChild()?.getText();
+                    if (propName)
+                        props.push(propName);
+                }
+            }
+            // When multiple components share the same name, pick the one
+            // physically closest to the rendering file to avoid false edges.
+            const targetNode = targetNodes.length === 1
+                ? targetNodes[0]
+                : closestByPath(targetNodes, component.filePath);
+            if (targetNode.id === component.id)
+                continue; //skip self referencing
+            const edgeKey = `${component.id}→${targetNode.id}`;
+            if (edgeIndex.has(edgeKey)) {
+                // Edge already exists — update renderCount
+                const idx = edgeIndex.get(edgeKey);
+                const existing = edges[idx];
+                const currentCount = existing.metadata?.renderCount ?? 1;
+                edges[idx] = {
+                    ...existing,
+                    metadata: {
+                        ...existing.metadata,
+                        renderCount: currentCount + 1,
+                    },
+                };
+            }
+            else {
+                // create new edge
+                const newEdge = {
+                    from: component.id,
+                    to: targetNode.id,
+                    type: "PROP_PASS",
+                    metadata: {
+                        props,
+                        renderCount: 1,
+                    }
+                };
+                edgeIndex.set(edgeKey, edges.length);
+                edges.push(newEdge);
+            }
+        }
+    }
+    return edges;
+}

package/dist/graph/edges/routeEdge.d.ts

@@ -0,0 +1,3 @@
+import type { CodeNode, CodeEdge } from "../../types.js";
+import type { LookupMaps } from "../buildLookup.js";
+export declare function detectRouteEdges(nodes: CodeNode[], lookup: LookupMaps): CodeEdge[];

package/dist/graph/edges/routeEdge.js

@@ -0,0 +1,124 @@
+import { closestByPath } from "./utils.js";
+// ─── detectRouteEdges ─────────────────────────────────────────────────────────
+//
+// Creates HANDLES edges from ROUTE nodes → their handler CodeNodes.
+//
+// Resolution strategy per route kind:
+//
+//   Backend (Express/Fastify/Koa):
+//     1. metadata.handlerName + same filePath  → nodesByFile exact match
+//     2. metadata.handlerName only             → nodesByName fallback
+//        (handler imported from another file)
+//
+//   Next.js API route (route.ts, routeNodeType = "API_ROUTE"):
+//     metadata.httpMethod (e.g. "GET") → find node in same file
+//     with metadata.isHttpHandler === true && metadata.httpMethod === method
+//
+//   Next.js page route (routeNodeType = "PAGE"):
+//     → find node in same file with metadata.exportType === "default"
+//
+//   Next.js layout/loading/error/not-found:
+//     → same as page — default export is the handler
+//
+// If no handler is resolved the route node is still valid in the graph,
+// it just has no outgoing HANDLES edge. This is intentional — orphan
+// route nodes are useful for "unconnected entry points" analysis.
+export function detectRouteEdges(nodes, lookup) {
+    const edges = [];
+    // Only process ROUTE nodes
+    const routeNodes = nodes.filter(n => n.type === "ROUTE");
+    for (const routeNode of routeNodes) {
+        const meta = routeNode.metadata;
+        const filePath = routeNode.filePath;
+        const routeKind = meta.routeKind;
+        let handlerNode;
+        if (routeKind === "backend") {
+            handlerNode = resolveBackendHandler(routeNode, lookup);
+        }
+        else if (routeKind === "nextjs") {
+            const routeNodeType = meta.routeNodeType;
+            if (routeNodeType === "API_ROUTE") {
+                handlerNode = resolveNextjsApiHandler(routeNode, lookup);
+            }
+            else {
+                // PAGE, LAYOUT, LOADING, ERROR, NOT_FOUND — all point to default export
+                handlerNode = resolveDefaultExport(filePath, lookup);
+            }
+        }
+        if (!handlerNode)
+            continue;
+        if (handlerNode.id === routeNode.id)
+            continue; // safety: no self-loop
+        edges.push({
+            from: routeNode.id,
+            to: handlerNode.id,
+            type: "HANDLES",
+            metadata: {
+                urlPath: meta.urlPath,
+                httpMethod: meta.httpMethod ?? null,
+                routeKind,
+            },
+        });
+    }
+    return edges;
+}
+// ─── Resolution helpers ───────────────────────────────────────────────────────
+function resolveBackendHandler(routeNode, lookup) {
+    // check for the inline handler first. synthetic node for the inline function was created in the routesToCodeNodes function in the backendRoutes.ts extractor
+    const inlineHandlerId = routeNode.metadata.inlineHandlerId;
+    if (inlineHandlerId) {
+        return lookup.nodesByFile.get(routeNode.filePath)?.find(n => n.id === inlineHandlerId);
+    }
+    //if no inline handler, then proceed with the regular handler name resolution
+    const handlerName = routeNode.metadata.handlerName;
+    if (!handlerName)
+        return undefined;
+    const filePath = routeNode.filePath;
+    // Strategy 1 — handler defined in the same file as the route registration
+    const nodesInFile = lookup.nodesByFile.get(filePath) ?? [];
+    const sameFile = nodesInFile.find(n => n.name === handlerName); //same file won't have duplicates, so no need for checking id I think
+    if (sameFile)
+        return sameFile;
+    // Strategy 2 — handler imported from another file, look up by name only.
+    // If multiple nodes share the name, prefer the one closest to the route file
+    // (shortest relative path difference — simple heuristic).
+    const byName = lookup.nodesByName.get(handlerName) ?? [];
+    if (byName.length === 0)
+        return undefined;
+    if (byName.length === 1)
+        return byName[0];
+    // Multiple candidates — pick the one whose filePath shares the most
+    // path segments with the route file
+    return closestByPath(byName, filePath);
+}
+function resolveNextjsApiHandler(routeNode, lookup) {
+    const httpMethod = routeNode.metadata.httpMethod;
+    if (!httpMethod)
+        return undefined;
+    const filePath = routeNode.filePath;
+    const nodesInFile = lookup.nodesByFile.get(filePath) ?? [];
+    // Find a node in the same file that was flagged as an HTTP handler
+    // with the matching method name (set by functions.ts extractor)
+    const handler = nodesInFile.find(n => n.metadata.isHttpHandler === true &&
+        n.metadata.httpMethod === httpMethod);
+    // console.log("routeNode filePath:", filePath, "and handler => ", handler, "and http method => ", httpMethod);
+    // nodesInFile.forEach(n => console.log("candidate handler in file:", filePath, "for node name: ", n.name, "with metadata => ", n.metadata));
+    if (handler)
+        return handler;
+    // Fallback — look for a node whose name exactly matches the HTTP method
+    // (handles cases where isHttpHandler flag wasn't set, e.g. older parse)
+    return nodesInFile.find(n => n.name === httpMethod);
+}
+function resolveDefaultExport(filePath, lookup) {
+    const nodesInFile = lookup.nodesByFile.get(filePath) ?? [];
+    // Find the node explicitly marked as default export
+    const defaultExport = nodesInFile.find(n => n.metadata.exportType === "default");
+    if (defaultExport)
+        return defaultExport;
+    // Fallback — if only one component/function in the file, it's likely
+    // the default export even if metadata.exportType wasn't captured
+    const candidates = nodesInFile.filter(n => n.type === "COMPONENT" || n.type === "FUNCTION");
+    if (candidates.length === 1)
+        return candidates[0];
+    return undefined;
+}

package/dist/graph/edges/stateEdges.d.ts

@@ -0,0 +1,3 @@
+import type { CodeNode, CodeEdge } from "../../types.js";
+import type { LookupMaps } from "../buildLookup.js";
+export declare function detectStateEdges(nodes: CodeNode[], lookupMp: LookupMaps): CodeEdge[];