1. Introduction to Babel Macros
In this talk, I will introduce Babel macros and explain how they can be used to write plugins and build macros.
A very good morning, a very good afternoon, and a good evening, based on where you're joining. My name is Trubesh and today I'm going to give a talk on magic with Babel macros. So before we dig in into the topic, I want to also talk about why this topic, right? So I think Babel macros was introduced back in 2017, 2018. And it seemed to be a really fascinating thing because of the things you can do just by that, right? A lot of patterns emerged because of that and, yeah, but nowadays not a lot of folks talk about it. So I thought, you know, why not give it a shot and see if you folks are interested. So the aim of this talk is to give you an introduction about Babel macros so that you can go ahead and write your own plugin perhaps or build your own macros.
2. Introduction to Srivesh and AST
In this part, Srivesh introduces himself and his background in software development. He also mentions his YouTube channel and podcast. Srivesh then moves on to discuss the importance of AST in transpilers and the need for developers to understand it. He shares his experience of researching the term and provides a simplified definition of AST as a tree representation of source code that conveys its structure.
So my name is Srivesh. I'm from India. I work at a startup called Organize. I majorly handle the frontend side of things. We are also actively hiring. If anyone is looking out, please reach out to I also run a YouTube channel called the Junior Developer. And I host a podcast in that called the Junior Developer Podcast. If you are interested in frontend technologies or tech in general or maybe if you're interested in how to have an impactful development career, you should perhaps check out the channel and you might find some of the videos quite interesting. Also on Twitter, you can find me as dee underscore Junior underscore dev.
So, that's essentially my introduction. Let's get to the talk. So, AST, right? AST is an amazing thing. It stands for abstract syntax T. It's an amazing thing. And I feel that every developer should essentially learn about it. Because it's a it's essentially one of the building blocks of the transpilers which use your plugins to transpile your code, right? And without knowing it, you might not be able to understand how your code is being transpiled.
So, when I heard about this term AST, right, I got really curious and I, of course, boosted up my laptop and tried Googling what is an AST. And the first thing was of Wikipedia. And this was the definition which was thrown at me. It says in computer science, an abstract syntax tree or just syntax tree, is a representation of the abstract syntactic structure of text written in a formal language. So, this did not really this was a pretty complex definition for me. And it did not really hit me what exactly AST is. So, I tried to find a better definition which is much simpler in understanding. And I stumbled upon this definition. It says an abstract syntax tree or AST is a tree representation of the source code of a computer program that conveys the structure of source code. So, what it means by that is essentially you can look at the AST and you can derive what code you're writing. But as I mean it's of course not as readable as the human code which we write. But it's the representation is purely for machine to understand how exactly the code is structured.
3. Importance of AST in Transpilers
In this part, Srivesh discusses the importance of AST in transpilers and the need for developers to understand it. He encourages the audience to explore AST through the AST explorer and provides an example of writing dummy code to see how it looks in AST.
But as I mean it's of course not as readable as the human code which we write. But it's the representation is purely for machine to understand how exactly the code is structured. And you can get almost yeah, you can get everything about the code just by looking at the AST. That is one point.
The second point is all the transpilers actually use this. And based on the AST, they transpile the code and we are also going to try out some of those transformations here live to figure out how exactly it looks. So yeah, I mean, let's explore AST as Drake says that reading about AST, you know, the theoretical definition of something might not purely make sense. But when we go ahead and explore AST, that's when it starts making sense to us, right?
So you can go to this link called the AST explorer. And let's write some dummy code here. I don't know. So my talk is on magic with Babel micros. And since we have a let here, maybe we should also define a const to figure out how different does it look in AST. So we can just do sorry, get speaker name. And we can have one argument as talk name. And we can just do if talk name equal to based talk. Then we'll also figure out how if statement works out in AST. Then I can just return my name. And else I can just go ahead and return no. So yeah. Now that we have this, I can just do speaker name and get speaker name. And I can this. So as you can see, as I'm typing it out, right, the right hand side of things is being populated. So that's how we know. So for example, right now in here, we have four variable. I think let's get rid of this. This is of no use to us. So we have three variable declarations in here. So we have, of course, the const, we have let and we also have got an arrow function. This function is returning something. Once a string and sometimes a null.
4. Exploring Variable Declarations and Function Types
We explore each variable declaration and analyze the information available, such as start and end positions, initialization values, and the kind of declaration. We also distinguish between variable declarations and expression statements, which involve updating values. Additionally, we compare the kind of declaration between different variable declarations and explore the arrow function and normal function declarations, noting the difference in the AST representation.
And we have got an if statement where we are comparing the lefthand side and the righthand side. Right? So let's kind of go ahead and explore each of the variable declarations to see how it looks.
So if you go to the first one, you can see the information available is the start and the end of this particular piece of code. And then inside declarations, it has got a start from 4 to 44, I'm assuming, from here to here. Yeah. Yeah. And inside this, we have an image block, which talks about with what value it was initialized. And you can see the kind as let in here. Right. So I can also go and do something.
Then if you see, this becomes an expression statement because it's not necessarily a variable declaration. Variable declaration is when init is being populated and it is basically this part of things which we saw here, expression statement is you're trying to update something. It has got an operator, equal to the operator. And we have got the left side of things which should be the variable name, and right side of things which is what do we want to, basically, the value of it, right?
Likewise, if you go ahead and explore the second variable declaration, let me just close this one. Yeah. We can just explore this and it also got something similar, but as you can see, the kind here is const and the kind here was left. And we can just go ahead and check the arrow inside the inner function. It explicitly mentions that it's an arrow function. Let's see how it looks if it's a normal function. So, I can just quickly convert this to a normal function. And yeah, boom. So, this is a normal function. Yeah? This is a normal function. In this, it purely says function declaration. So, it does not talk about what you call arrow function. It does not mention that. It purely says function declaration. Inside the body, we have the block statement. In fact, we can explore that. Let me quickly remove this.
5. Exploring AST Structure and Representations
Inside the arrow function, there is a block statement with an if statement and a return statement. The if statement has a consequent, which is another block statement with a return type. The test inside the if statement compares the dog name variable with another variable using triple equal to. The AST representation includes the type const and a call expression with an argument that points to a string. The AST structure can be used to derive the code. There are other representations of AST, such as the JSON part and join.js, which provide a verbose explanation of nodes, tokens, keywords, identifiers, and punctuators. AST is a tree structure that is more human-readable than the AST itself. Now, let's discuss Babel.
And inside here, we can quickly see inside the body of the arrow function, we can see it has a block statement, and in block statement, we have got an if statement specifically, and we have got a return statement, right?
Let's explore the if statement first. Inside the if statement, we can see the consequent. It's also a block statement with another return type altogether. This will essentially be the string which I'm returning here, and inside the if statement, inside the test, we can see the identifier here, right?
Just like how we saw in this particular case, in that, the identifier was 1 equal to, and in this case, we have triple equal to. The left-hand side would be the dog name, so dog name, it's not the value, right? It's the variable name, and that is the reason it says name here. And on the right-hand side of things, we can see the again another variable with which we are trying to compare. And here you can see as mentioned earlier, the type is const, and inside this, it's one and the same thing, but it's a call expression. It comes in when it seems that you're trying to call a particular function. It also talks about the argument. And inside the argument, also, it's giving the name. Because this variable is pointing to this string. We are not directly passing this string, right?
So, and inside the calling, whatever the name of the function, we are trying to call. This is how an AST looks like. And as I mentioned earlier, just by looking at the AST structure, you can derive the code. But of course, it will take a lot of time to do that because this is more human readable than the AST itself. So, this is not just the only representation of AST. You can also try out the JSON part, which throws in everything at once. This was the T-representation. And we also have something called join.js. Let me just copy paste this. I can just do show ast and it will showcase everything you need to know. And this is also a good representation. It gives you a verbose explanation of what all nodes you have, what tokens you have. It lists down the keywords, identifiers, punctuators, and everything you need basically. I can just go to the PNG version of it. And this is also another tree structure, but I feel like this is a bit verbose. And it's more human readable, you know? Because it has got like it has got everything. You can just read it through and understand this by looking at it. So, that's what AST is. Let's talk a bit about Babel now.
6. Exploring Babel and AST Transformations
Babel started as a transpiler but evolved into something more. We can transform code live in action using AST Explorer and the Babel parser. By manipulating the AST, we can reverse variable names and apply other transformations.
Babel started out as a transpiler, but I mean it lets you write the updated version of whatever ECMAScript specification is, even to the browsers where that particular updated expressions or whatever. You can do that using Babel. But, it ended up becoming, you know, something more than that. And in fact, we can quickly take a look and, you know, take a look at how we can transform something in Babel live in action.
So, yeah. So, I can go. You can sort of go to AST Explorer, and I can just select the Babel parser here. And let me just close this out. I can copy paste. Yeah. I can copy paste this here. And this is, again, the AST which we explored earlier. And I can so, we can try out one thing, which is we can try out to reverse the variable name so that it after transformation. This is where the transformation is located. This is the code which we wrote. And this is where you can write all the specifications which you want to. And this is the tree version side of things. I mean, the AST output.
So inside the identifier I can quickly console.log path. And I can perhaps increase. And inside the node path we have got a node and we have got the name, we have got the LOC location, the end position, the start position. file name is not populated for obvious reasons. I believe this is pointing to this. So if we are trying to update the name here, then I think we can do something else. So this sort equal to node.path.name, we can split it. We can reverse this. And we can just go ahead and join this. Oops. It will be path.node.
7. Understanding Babel Macros and Code Transformation
Babel macros are a way to apply code transformation without installing multiple plugins. They are supported in various React-based frameworks. Regular Babel plugins have downsides, such as difficulty in setup and debugging conflicts. Babel plugin macros provide a solution. Examples include track translation and CSS to React Native macros. Macros have caveats, like being synchronous and evaluated at compile time.
It will be path.node. Yeah. So now I think you can see here, this is supposed to be through the base talk. This is supposed to be get speaker name. And this is how the, you know, transformation plays out.
So let's talk a bit about Babel macros. So Babel macros are essentially, it's a way to apply code transformation without having to install a lot of plug-in in each transformation. And the best thing is it's supported across, you know, CRA, Gatsby, Next.js and almost all the other React-based frameworks.
So why Babel macros, right? The issue with regular Babel plugins is, of course, it's great, but it has got few downsides. For example, it might be difficult for users to set it up and configure, especially when in tools like CRA or Gatsby. Of course, also, it might, you might end up getting into a conflict or in a scenario where you're having to debug certain things because, because of the way it's, I mean, when we set up plugins, right, the order of plugins matter a lot. So you have to, if the order, if you mess up the order, it's really difficult to, it's really difficult to debug it as per se.
So we use something called as Babel plugin macros to write this and Babel plugin macros in itself as a plugin. I think we can explore a few of them. One of, one of those, which is one of my favorite, I like it, which is a track translation. You can just put in the string here and it gets transformed to whatever the value is. I believe this is high in Vietnamese and we also have CSS to React Native macros. Here you can write normal CSS. It will get converted to React Native style sheets. The output will be this sort and folks from Angular background, if you're missing NGF, you can try to figure out you can try exploring this as well where TGF becomes this sort. But there are a few caveats which one needs to keep in mind. One is they will sorry macros are synchronous if you're trying to write one, you have to make sure that it runs in the node environment or whatever machine the macro is being run and macros are evaluated at compile time as well. You also have to keep that in mind while building one.
So I think that's all the time I have today, folks. Thanks for listening to my talk. We have a lot of talks lined up today at one so stay tight and thanks a lot for listening to me.
React Day Berlin 2022
Comments