5
\$\begingroup\$

I use the following code to create a call graph from javascript file(s). I generate the output in Graphviz DOT language in order to create visualizations of that graph using the Graphviz command line.

#!/usr/bin/env node

const fs = require('fs');
const path = require('path');
const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;

// Input files from command-line arguments
const inputFiles = process.argv.slice(2);

// Data structures
const functionsByFile = {};
const calls = [];
const topLevelCallsByFile = {};

function getFunctionName(node, parent) {
    if (node.id && node.id.name) return node.id.name;
    if (parent.type === 'VariableDeclarator' && parent.id.name) return parent.id.name;
    return null;
}

function parseFile(filePath) {
    const code = fs.readFileSync(filePath, 'utf8');
    const ast = parser.parse(code, {
        sourceType: 'module',
        plugins: ['jsx', 'typescript']
    });

    const fileName = path.basename(filePath);
    functionsByFile[fileName] = [];
    topLevelCallsByFile[fileName] = [];

    traverse(ast, {
        enter(pathNode) {
            const node = pathNode.node;

            // Function declaration or arrow function assignment
            if (
                node.type === 'FunctionDeclaration' ||
                (node.type === 'VariableDeclarator' &&
                    (node.init?.type === 'ArrowFunctionExpression' || node.init?.type === 'FunctionExpression'))
            ) {
                const funcName = getFunctionName(node, pathNode.parent);
                if (funcName) {
                    functionsByFile[fileName].push(funcName);
                }
            }

            // Function call expression
            if (node.type === 'CallExpression' && node.callee.type === 'Identifier') {
                const calleeName = node.callee.name;
                const enclosingFunc = pathNode.getFunctionParent();

                if (enclosingFunc) {
                    const enclosingId = enclosingFunc.node.id || enclosingFunc.parent?.id;
                    const enclosingName = enclosingId ? enclosingId.name : null;
                    if (enclosingName) {
                        calls.push({
                            from: enclosingName,
                            to: calleeName,
                            file: fileName
                        });
                    }
                } else {
                    // Track top-level calls
                    topLevelCallsByFile[fileName].push({
                        caller: fileName,
                        callee: calleeName
                    });
                }
            }
        }
    });
}

// Parse each file
inputFiles.forEach(parseFile);

// Generate DOT file
console.log("digraph CallGraph {");
console.log("  rankdir=LR;");
console.log("  node [shape=box, style=filled, fillcolor=\"#f9f9f9\"];");

// Create clusters for each file
for (const [file, funcs] of Object.entries(functionsByFile)) {
    const clusterId = file.replace(/[^\w]/g, '_');
    console.log(`  subgraph cluster_${clusterId} {`);
    console.log(`    label = "${file}";`);
    console.log("    style=filled;");
    console.log("    color=lightgrey;");
    funcs.forEach(fn => {
        console.log(`    "${fn}";`);
    });
    console.log("  }");
}

// Add call relationships between functions
calls.forEach(({ from, to, file }) => {
    const targetExists = Object.values(functionsByFile).some(funcs => funcs.includes(to));
    if (targetExists) {
        console.log(`  "${from}" -> "${to}";`);
    }
});

// Add top-level call relationships
for (const [file, topCalls] of Object.entries(topLevelCallsByFile)) {
    if (topCalls.length > 0) {
        const clusterId = file.replace(/[^\w]/g, '_');
        console.log(`  subgraph cluster_${clusterId}_top {`);
        console.log(`    label = "${file} (top-level)";`);
        console.log("    style=filled;");
        console.log("    color=lightblue;");
        console.log(`    "${file}" [shape=ellipse];`);
        console.log("  }");

        topCalls.forEach(({ callee }) => {
            const targetExists = Object.values(functionsByFile).some(funcs => funcs.includes(callee));
            if (targetExists) {
                console.log(`  "${file}" -> "${callee}";`);
            }
        });
    }
}

console.log("}");

To generate graph we have to do something like:

generate_callgraph_js_module data.js domain.js business.js index.js | dot -Tpng -o callgraph.png

Here, each file name is considered as layer name.

Please let me know if the code can be simplified. I am ready to change babel with something else if makes things better.

\$\endgroup\$
1
  • \$\begingroup\$ I've edited your post to include some additional context (mainly your use of Graphviz). Please feel free to make further edits as necessary or if I've mis-characterized anything. \$\endgroup\$ Commented May 19 at 15:35

1 Answer 1

Reset to default
1
\$\begingroup\$

The code generally looks alright; I have a couple small nits below, but overall the code reads pretty straightforward. I do think there are two larger points worth discussing.

Have one more layer of functions

Right now you're just calling the file itself, and letting that do all of your Graphviz formatting, argument parsing, etc. You're using global state to keep track of your data structure and just passing that around. This isn't inherently bad, but it does mean you'll have a bit more work in the future if you ever wanted to expand on this. I would do something like this:

  1. Stop having parseFile take a filepath, but instead take the AST (or some kind of file-like object that you can read from). This lets you be more flexible if you ever wanted to have this read from something besides a file. At this point, you can probably rename it to something like buildCallGraph.
  2. Create your graph objects in buildCallGraph and return that, rather than assuming the global variables. If you want to combine the objects you can do that in the caller, but then buildCallGraph doesn't need to care about where the data came from or how to relate it.
  3. Your code to translate the graph into DOT-language formatted output should then be wrapped in one or more functions that consume the graph(s), and then writes the output to <somewhere>. I don't think that <somewhere> should always be console.log, as that is also limiting you to only console output. Maybe someday you actually want to write it directly to file, or send it over the wire, or do literally anything else with it.

Consider using pre-existing packages

There exist packages that provide a direct interface between JS and Graphviz. This would reduce the amount of string formatting you need to do, as well as remove the extra command line piping you're currently doing.

I've never used this library, so I have no specific thoughts on how that should be used or its relative merits, but I generally prefer avoiding string formatting like you're doing, and avoiding having to pipe between multiple programs when I can help it. Its easier for me to remember how to use the tool, and easier for other people to use the tool later.

Various nits/ideas

Separately from the above, here are just some general coding style thoughts I have, that could be done in conjunction with the above.

Reduce magic strings

I'd probably wrap all of your *.type checks in helper functions so I don't need to remember all of the magic strings:

function nodeIsFunctionDeclaration(node) {
    return node.type === 'FunctionDeclaration';


function nodeIsVariableDeclaration(node) {
    return node.type === 'VariableDeclarator';
}

function nodeIsArrowFunction(node) {
    return nodeIsVariableDeclaration(node) 
        && (node.init?.type === 'ArrowFunctionExpression'
            || node.init?.type === 'FunctionExpression');
}

function nodeIsCallExpr(node) {
    return node.type === 'CallExpression' && node.callee.type === 'Identifier';
}

I would then remove your comments explaining these lines of code. Comments ideally explain why, not what, and are often better replaced by well-named functions and variables.

getFunctionName

Personally, I'd just rewrite this as a one-liner.

function getFunctionName(node, parent) {
    return node.id?.name || (nodeIsVariableDeclaration(parent) && parent.id.name);
}
\$\endgroup\$

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.