Babel examples

1.js

const { generate, parse, t, traverse } = require('./babel');

const source = `
const babel = "cool";

function test(babel) {
  return babel;
}
`;
// var babel = "cool";

const ast = parse(source);

traverse(ast, {
  VariableDeclaration: path => {
    path.node.kind = 'var';
  },
  Function: path => {
    path.scope.rename('babel', 'newname');
  }
});

const { code } = generate(ast);

console.log(code);

2.js

const { generate, parse, t, traverse } = require('./babel');

const source = `[1, 2].map(n => n + 1);`;
// [1, 2].map(function(n) { return n + 1 });

const ast = parse(source);

traverse(ast, {
  ArrowFunctionExpression: path => {
    path.replaceWith(
      t.functionExpression(
        null,
        path.node.params,
        t.blockStatement([t.returnStatement(path.node.body)])
      )
    );
  }
});

const { code } = generate(ast);

console.log(code);

3.js

const { generate, parse, t, traverse } = require('./babel');

const source = `<div className="blah" id="id">Hello</div>`;
// React.createElement("div", { className: "blah" }, "Hello");

const ast = parse(source, { plugins: ['jsx'] });

const pragma = t.memberExpression(
  t.identifier('React'),
  t.identifier('createElement')
);

traverse(ast, {
  JSXElement: path => {
    path.replaceWith(
      t.callExpression(pragma, [
        t.stringLiteral(path.node.openingElement.name.name),
        t.objectExpression(
          path.node.openingElement.attributes.map(attr =>
            t.objectProperty(t.identifier(attr.name.name), attr.value)
          )
        ),
        ...path.node.children.map(child => t.stringLiteral(child.value))
      ])
    );
  }
});

const { code } = generate(ast);

console.log(code);

babel.js

const generate = require('@babel/generator').default;
const { parse } = require('@babel/parser');
const t = require('@babel/types');
const traverse = require('@babel/traverse').default;

module.exports = { generate, parse, t, traverse };

package.json

{
  "name": "babel-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Asbjørn Hegdahl",
  "license": "MIT",
  "dependencies": {
    "@babel/generator": "^7.4.0",
    "@babel/parser": "^7.4.2",
    "@babel/traverse": "^7.4.0",
    "@babel/types": "^7.4.0"
  }
}