Babel plugin (Visitor pattern) - How it works

Question

I want to do two replacements in my babel plugin. And second replacement should only happen after first one is done.

module.exports = function(babel) {
    const t = babel.types;
    return {
        visitor: {
            FunctionExpression: function(path) {
                //Conversion to arrow functions
                path.replaceWith(t.arrowFunctionExpression(path.node.params, path.node.body, false));
            },
            ThisExpression: function(path) {
                //Converting all this expressions to identifiers so that it won't get translated differently
                path.replaceWith(t.identifier("this"));
            }
        }
    };
}

In the AST tree of my "FunctionExpression" the "ThisExpression" exists somewhere down the tree. I want first conversion to happen only after the second conversion is done. How do I achieve this.?

Wylie

Answer 1

I figured it out. Best place to understand how to write babel plugins. Here

module.exports = function(babel) {
    const t = babel.types;
    return {
        visitor: {
            FunctionExpression: {
                enter: function(path) {
                    path.traverse(updateThisExpression);
                    //Conversion to arrow functions
                    let arrowFnNode = t.arrowFunctionExpression(path.node.params,
                        path.node.body, false);
                    path.replaceWith(arrowFnNode);
                }
            }
        }
    };
}

const updateThisExpression = {
    ThisExpression: {
        enter: function(path) {
            //Converting all this expressions to identifiers so that
            //it won't get translated differently
            path.replaceWith(t.identifier("this"));
        }
    }
};

You write another visitor object which you use to traverse within the "FunctionExpression" visitor.. ;)

Wylie

Answer 2

Here are some helpful links to write custom babel visitor plugins.

https://babeljs.io/docs/en/babel-types

https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md

https://babeljs.io/docs/en/babel-standalone

If you want to do it in node js, you'd need to install @babel-core

npm install --save-dev @babel/core

Here's some example code:

let babel = require("@babel/core");
let fs = require('fs');

fs.readFile('testcase1client.js', 'utf8', function(err, tc1c)
{
    if(err)
        console.log(err);

    let out1 = babel.transform(tc1c, { plugins: [
    {
        visitor: {
            FunctionExpression(path) {
                // console.log(path.parent.id.name);

            },
            CallExpression(path) {
                // console.log(path.node.callee.name);
                
            }
        }
    }]});

    console.log(out1.code);
}

Contrariwise