Why does escodegen and esprima generate a parenthesis wrapper on my source code?

Question

I am using escodegen to add an ending code on my statement as below. In the leave method, I append a .toArray() call on the end of the statement.

const esprima = require('esprima');
const estraverse = require('estraverse');
const escodegen = require('escodegen');

const ast = esprima.parse('db.find()');
let finished = false;
estraverse.traverse(ast, {
  leave: (node, parent) => {
    if (node.type === esprima.Syntax.ExpressionStatement && !finished) {
      finished = true;
      let statement = escodegen.generate(node);
      statement = `${statement.substring(0, statement.lastIndexOf(';'))}.toArray()`;
      const findAst = esprima.parse(statement);
      node.arguments = findAst.body[0].expression.arguments;
      node.callee = findAst.body[0].expression.callee;
      node.type = findAst.body[0].expression.type;
    }
  },
});

const generated = escodegen.generate(ast);
console.log('generated  code:', generated);

The output from above code is: generated code: (db.find().toArray()). I don't understand why it wraps a parenthesis on my source code. Is there anything wrong in my source code?

score 2 · Accepted Answer · answered Sep 06 '17 at 16:51

You are generating an incorrect AST. An ExpressionStatement has the form {type: "ExpressionStatement", expression... } .

You are modifying your ExpressionStatement, attaching to it arguments and callee and you are changing its type (to CallExpression). Here:

  node.arguments = findAst.body[0].expression.arguments;
  node.callee = findAst.body[0].expression.callee;
  node.type = findAst.body[0].expression.type;

Resulting a weird AST.

You can see it simply with : console.log('generated ast: %j', ast);

A quick solution is attach mentioned parts where them belong (to expression). Resulting:

let finished = false;
estraverse.traverse(ast, {
    leave: (node, parent) => {
        if (node.type === esprima.Syntax.ExpressionStatement && !finished) {
        finished = true;
        let statement = escodegen.generate(node);
        statement = `${statement.substring(0, statement.lastIndexOf(';'))}.toArray()`;
        console.log(statement);
        const findAst = esprima.parse(statement);
        node.expression.arguments = findAst.body[0].expression.arguments;
        node.expression.callee = findAst.body[0].expression.callee;
        node.expression.type = findAst.body[0].expression.type;
        }
    },
});

It will generate a correct AST, that will output the expected db.find().toArray();. But I think the code is a bit complicated and does too much work, it parses db.find() then it generates code and parses it again.

Additionally you can return this.break() in leave to stop the traverse.

In my humble opinion it would be much clear:

var new_expr = {
        type: "CallExpression",
        callee: {
            type: "MemberExpression",
            computed: false,
            object: null,
            property: {
                type: "Identifier",
                name: "toArray"
            }
        },
        arguments: []
    };

const ast3 = esprima.parse('db.find()');
estraverse.traverse(ast3, {
    leave: function(node, parent) {
        if (node.type === esprima.Syntax.ExpressionStatement) {
            new_expr.callee.object = node.expression;
            node.expression = new_expr;
            return this.break();      
        }
    },
});

I hope you find this useful.

Another question is: does `this.break()` stop the whole process or it only stops the current statement? There are many other codes in the process need to be executed. I wonder whether they get skipped if I put `this.break()` statement there. — Joey Yi Zhao, Sep 06 '17 at 23:43
Oh, I think it terminates the traversal, if you want to do more things in the same traversal you should not use it. — fonkap, Sep 07 '17 at 06:07

Why does escodegen and esprima generate a parenthesis wrapper on my source code?

1 Answers1