Writing Babel Plugin YWC Programmer Meetup

Why Babel?

Write code that you hate to write a.k.a Syntactic Sugar

Some use of Babel #connect people to good stuff ● ES6 const A = () => {} → var A = function A() {} ● JSX

Let’s write a plugin!

Parsing How your computer understand your code

JSON #connect people to good stuff let data = JSON.parse('{"hello": "world"}') data.hello

XML #connect people to good stuff let data = new DOMParser() .parseFromString("hello", "application/xml"); data.documentElement.textContent

Source code?? #connect people to good stuff import { parse } from '@babel/parser' parse('console.log("hello")') ???

Abstract Syntax Tree (AST) #connect people to good stuff ● Code is represented by AST ● astexplorer.net ● ⚠ Make sure you set parser to babel-eslint

console.log("hello world") type: Program body: - type: ExpressionStatement expression: type: CallExpression callee: type: MemberExpression object: type: Identifier name: console property: type: Identifier name: log arguments: - type: Literal value: hello world * Some fields are omitted #connect people to good stuff

console.log("hello world") type: Program body: - type: ExpressionStatement expression: type: CallExpression callee: type: MemberExpression object: type: Identifier name: console property: type: Identifier name: log arguments: - type: Literal value: hello world #connect people to good stuff

console.log("hello world") type: Program body: - type: ExpressionStatement expression: type: CallExpression callee: type: MemberExpression object: type: Identifier name: console property: type: Identifier name: log arguments: - type: Literal value: hello world #connect people to good stuff

console.log("hello world") type: Program body: - type: ExpressionStatement expression: type: CallExpression callee: type: MemberExpression object: type: Identifier name: console property: type: Identifier name: log arguments: - type: Literal value: hello world #connect people to good stuff

console.log("hello world") type: Program body: - type: ExpressionStatement expression: type: CallExpression callee: type: MemberExpression object: type: Identifier name: console property: type: Identifier name: log arguments: - type: Literal value: hello world #connect people to good stuff

console.log("hello world") type: Program body: - type: ExpressionStatement expression: type: CallExpression callee: type: MemberExpression object: type: Identifier name: console property: type: Identifier name: log arguments: - type: Literal value: hello world #connect people to good stuff

Transform

Babel Plugin #connect people to good stuff ● Babel plugin is just a JavaScript file with default export export default function({ types: t }) { return { visitor: { // visitor contents } }; };

Babel Plugin #connect people to good stuff ● Provide visitor functions for interested node type export default function({ types: t }) { return { visitor: { Identifier(path, state) {}, } }; };

Goal #connect people to good stuff $("id") → document.getElementById("id")

Know the AST #connect people to good stuff type: Program body: - type: ExpressionStatement expression: type: CallExpression callee: type: Identifier name: $ arguments: - type: Literal value: id

Babel Plugin #connect people to good stuff Match CallExpression export default function({ types: t }) { return { visitor: { CallExpression(path, state) { // ... }, } }; }; type: Program body: - type: ExpressionStatement expression: type: CallExpression callee: type: Identifier name: $ arguments: - type: Literal value: id

Babel Plugin #connect people to good stuff Use t (@babel/types) to build nodes export default function({ types: t }) { return { visitor: { CallExpression(path, state) { // ... }, } }; }; type: Program body: - type: ExpressionStatement expression: type: CallExpression callee: type: Identifier name: $ arguments: - type: Literal value: id

Babel Plugin #connect people to good stuff Match callee that it is $ identifier CallExpression(path, state) { if ( t.isIdentifier( path.node.callee, { name: '$' } ) ){ // ... } }, type: Program body: - type: ExpressionStatement expression: type: CallExpression callee: type: Identifier name: $ arguments: - type: Literal value: id

type: Program body: - type: ExpressionStatement expression: type: CallExpression callee: type: MemberExpression object: type: Identifier name: document property: type: Identifier name: getElementById arguments: - type: Literal value: id Babel Plugin #connect people to good stuff Replace with document.getElementById CallExpression(path, state) { if (t.isIdentifier(path.node.callee, {name: '$'})){ path.node.callee = t.memberExpression( t.identifier('document'), t.identifier('getElementById') ) } },

Running #connect people to good stuff ● Put the plugin file in babel.config.js ● Be careful of Babel cache in node_modules/.cache

Uses of Babel plugins at Wongnai

Babel uses at Wongnai #connect people to good stuff ● Lodash per-function import babel-plugin-lodash ● Generate data-qa tags for automated test selection babel-plugin-transform-react-qa-classes ● Compile time locale split/inlining Read more on life.wongnai.com

Thank You Grab this deck at https://speakerdeck.com/whs