How to get code as a string from Babel node during traverse

Question

In the below code, is it possible to get the whole string representation of the AST node which would in this case return the window.alert('asdf') ?

const ast = parse("window.alert('asdf')")

let preloadCode = ""
traverse(ast, {
  CallExpression: function(path) {
    // path.node.toString() ??
  },
})

Answer 1

Each AST node returned by @babel/parser has a start and end properties pointing to it's location in the source code. You can use those to slice the source for the original string.

const { parse } = require('@babel/parser');

const source = '1 + 2 + 3';
const ast = parse(source);
const node = ast.program.body[0].expression.left;

console.log(source.slice(node.start, node.end)); // → '1 + 2'

Answer 2

You are probably looking for https://babeljs.io/docs/en/babel-generator

Try this:

const { default: generate } = require('@babel/generator');

module.exports = () => ({
    visitor: {
        Identifier: (path, state) => {
            console.log(generate(path.parent));
        },
    },
});

Answer 3

There is a method https://npmdoc.github.io/node-npmdoc-babel-core/build/apidoc.html#apidoc.element.babel-core.traverse.NodePath.prototype.getSource

const ast = parse("window.alert('asdf')")

let preloadCode = ""
traverse(ast, {
  CallExpression: function(path) {
    // path.node.toString()
    path.getSource() 
  },
})

Answer 4

@babel/traverse , version 7.18.3

Just use path.toString() :

const ast = parse("window.alert('asdf')")

traverse(ast, {
   CallExpression: function(path) {
      console.log(path.toString());
   },
})

Found it here