 My name is Rohan. This is my GitHub and my Twitter. So if you want to follow me. All right. So I work at Clarissites. I'm also an open source contributor. Contributed to a couple of projects like Firefox DevTools and Design. Yeah. I'm also a mentor at Geodacity. So let's get started with the talk. So this talk is basically about writing custom code mods using Babel. So the target audience is JavaScript developers. Could be for backend, could be for... So if you're doing node or you're doing something at front end, this will be useful. So it's basically about how I refactored the code base. So we had a huge code base and recently had to refactor it from Glamrs to style components, which are like CSS in JS library. So I did this in like less than one hour. So this talk is basically about this. So I'll tell you the story behind this. At Clarissites, we were using something called Glamrs, which is a CSS in JS library. But it got deprecated in favor of emotion. So... But we wanted to switch to another library called style components. The thing is this index is very different. And the way you write Glamrs is different from the way you write style components. So now we had to... So we had a lot of components, style Glamrs components, and we wanted to like switch it. But doing so manually would have been a nightmare and a lot of manual work. So that's why we decided to use Babel for it. So let me... Okay, I can show you the PR. So this is the PR where I converted the code from Glamrs to style components. As you can see, like there are 139 files and it automatically changed all these files, all the syntax. So this is the Glamrs syntax, right? Import from Glamrs. This automatically changed it to style components. And these are the style components which were there and it automatically replaced it with this. Yeah. So who here used Babel? Everyone? So I guess all of you are JavaScript developers. So it's a tool which you use to convert your JavaScript code from ASX to ES5 or the older version of JavaScript which older browser support. So before we get into the code, first we need to learn some of the concepts. So the first thing is abstract syntax tree. So Babel is like a compiler or to be exact, a transpiler which takes your code and changes it to something else. So for this, you need to understand what an abstract syntax tree is. So how a compiler works, like it has few stages. It collect your code, turn it into like small tokens and then create a tree with it which is called a parse tree. Abstract syntax tree is basically the abstract form of parse tree. So it removes the unnecessary information from it and it only shows the thing that you're interested in. So let me show you how does it look like. So this is a tool by joint JS. You can use it to visualize how an abstract tree looks like. So abstract syntax tree. So here is a syntax or A or B in this function. So it converts it into this program and then there's this variable declaration, variable declarator, different variable declarations and this is the function. So function block statement or written statement in this. So this is how it converts your code to abstract syntax tree. All right. This is how the parse tree looks like. So for example, you have an expression like five plus one into 12. So it converts it into a tree like this. This is the parse tree and that was an abstract syntax tree. So let's start with the stages of Babel. So Babel is like a compiler. So it has few stages. So the first one is parse. So in this stage parsing, it basically does two things. It does lexical analysis and semantic analysis. So in lexical analysis, it takes your code and you convert it into small tokens, small objects which looks like this. So each object have things like type, value, the location where your token is, start and end. And then it does the semantic analysis where it convert your code to an abstract syntax tree. The next phase is transformer where basically Babel. So all your Babel plugins and the Babel transforms, they run in this transformer. So it's the most important part of Babel. And then it just generate the code, generate the new code from the old code. So yeah, that's all the slides I have. So let's do some life coding. So this is a tool called AST explorer which we use to create Babel plugins, all code modes or anything related to Babel. So this side it shows how the abstract syntax tree looks like and this side is the code. So here we can choose the transform, Babel 7 in this case. Yeah. So I'll tell you a use case for writing a Babel plugin. So for example, you were using something like flat map in your code, right? So this is low dash flat map, but you want to replace it with the ES6 flat map because we have flat map in ES6 now. So the new syntax will be something like, it will be something like this. And inside this, there'll be our callback function. So let me just copy it. Yeah. So let's say you had this low dash flat map in your code and you want to convert it to ES6 flat map to save your bundle size. So then you just, you can either do it manually, go find and replace or write regex and stuff. Or you can just write a, I don't know, 3940 line Babel plugin and it will do automatically for you. So let's get started. So before we jump into writing our Babel plugins, there are some resources, resources that you might want to look. So this one Babel handbook. Yeah, this one. So it has all the documentation you need to write a Babel plugin. And this is for Babel types. So Babel types is something like low dash for writing Babel plugin. It has all the utility functions you need. Okay. So let's get started. So when you see this expression here in the fx syntax tree, you can see how it looks like to the compiler. So it starts with the program. That's the like syntax of the Babel. Then it has this expression statement. Inside this you have this call expression. So basically every function call is a call expression. This is a function call. So here we want to, okay. So as you can see here, so Babel follows something called a visitor pattern, which is if you had to traverse this tree yourself will be very difficult, right? You don't want to like traverse it yourself. So visitor pattern is like whenever you get something called an identifier or like a call expression or anything, it will call back your call back function. So you don't have to like traverse it manually. You can just implement it here. So for example, if we instead of identifier, if we use something like call expression here, and you do console.log, so here it will print your, all your call expressions. So yeah, it will look something like this, a node path, which will have all this information which you can see here. And it will have your node in which you can see the callee, the object property and everything. So here what we want to do is, let me erase this. So here what we want to do is we want to remove this part, the call. Basically we want to change the call from low dash underscore dot flat map to the array dot flat map. And we want to keep the function callback function same. So how we do it? So this is a call expression. So inside the call expression, we have to create a member expression with the first argument and the same name flat map. And then we can just pass the callback function. So let me, let me write some code for it. So here we have this t, t is again like the low dash for Babel plugins. So first thing we do is if t dot. So all this I am writing here, you can find it on here, documentation. So I want to check if it's a member expression. So how do I do that? So here you can see we have the documentation t dot is member expression. So we just do t dot is member expression and pass. Let me get the node because we just want to use the node and not anything else. Yeah. So this will be the node. Now we'll check if that particular node is a member expression. So we can use something like t dot is member expression. This will check whether it's a member expression or not. If it's not a member expression, we can simply return. Now we have to, you can actually use console here and check whatever you want to see. So what we want to do is check if callies is the name and the property of the object. So for example, here you have the callie as the name is flat map and the object is name is underscore. So you want to check if it's underscore and flat map. If it's not, you can simply return. So you can here do something like this. Inside the callie, you'll have member expression. Inside the member expression, you have to check whether it's loadish function or not. So something like, let me write it somewhere. Let me copy it from here. So it's part dot, sorry, node.callie.object.name. So if node.callie.object.name is equals to underscore, we just, so if it's not underscore, we just return here. I think that was the typo. So node.callie.name is not underscore, we'll just return. Similarly, we can do something like this. If callie.property.name is not flat map, then we just return. So in this way, here we'll only get the node which is, sorry, here we'll only get the node which is a flat map. And this way, we can ignore other nodes. So for example, if dot map is here, you won't get map here. So it's not printing that. So now you got the object and you know it is the flat map function. You can basically do a path dot replace with. So replace with again, you can check how it works in the documentation in the Babel headbook. So in the paths, you can see replacing a node. So here you just to path dot replace with and provide the new expression. So here you can just replace it with a member function. So we can create a new member function like this member X and we have to pass some values to it. So new member expression will take will take the array. So okay, let me first print the console lock. So it will take the array from the callie which is this part. So it is a array expression inside arguments. So we just do array is equals to node dot arguments. So this will be the array. You can check it by printing it. Yeah, this will be the array expression. So here in my memory expression, the first thing will be array. And then the next thing will be the function. So again, you the second part, the second argument is here the second argument to the function is our callback function. So we can just change it use this. So now we can just do path dot replace with and fn. So here you can console log and see if you get what you wanted. Sorry, it will be one. Yeah, yeah, so you'll get the value. So I'll show the final thing that how it looked like. So here you can see again, we are checking if the path name is not load as we are returning. If it's not left map, we are returning, then we get the array itself and the callback function. Then we just create a member expression pass the first value as the array and the second value is the identifier flat map and we can just replace it. So this will replace this flat map function with this. And you just have to write like 32 lines of code to do this transformation. So yeah, that's how you write. You can look at the handbook for the documentation and just follow it. Now I'll show you the code of the that glamorous to style components code mod. So yeah, here it is. So if you want to use load dash in this, you can just do this and append it to the body. Now the syntax is like this, right? You have this import and you have to replace this import with this type of import import style from style components. So you can just have this import declarator and it will visit it. And then you can just get the specifiers and just replace it with import declaration. So basically here we are what we are doing is we are replacing the import glamorous from glamorous to import style components from style components and also adding theme provider. So this will automatically change your code from this to this. Similarly, we did the same thing with the gsx element and with the call expression. So like the logic is very simple. You just have to replace things. You just have to see how the aspect tree looks like and how it should look like and you can just follow it. So yeah, these are the resources that you can look. Mainly the AST Explorer. So yeah, thank you. That's all.