Transpiling Variable Declarations to JavaScript

[00:00:00]
>> Steve Kinney: We added a new feature to our language, which is the ability to define variables. You know what's missing from our language? The ability to take that new feature and actually transpile it into JavaScript. So let's go ahead, and we'll add that. I'm actually in the toJavaScript.test.js. And what I'm gonna do is I'm just going to start with the test, and then we'll get it passing.

[00:00:25]
We'll just say it should support variables. That seems like a thing.
>> Steve Kinney: And, all right, so we just need to give it a kind of default ast. That's what we expect to come out like the one that effectively our transformation layer generates.
>> Steve Kinney: So it'll have the type of variableDeclaration.

[00:00:57]
>> Steve Kinney: The identifier
>> Steve Kinney: is the type identifier.
>> Steve Kinney: Let's get the name of whatever we passed over. In this case it will be x. And then the assignment. This is the Dropbear syntax. This is one we just decided to create in our own transformation layer. And then we've just decided to evaluate an ad.

[00:01:20]
We wanna be able to turn this into JavaScript, right? Which is more than just moving the keyword outside of the parentheses, right. This is turning it effectively into let x equal two instead of define x too. But this is the ast that we get out of Dropbear.
>> Speaker 2: You've got an indentifier in there.

[00:01:43]
>> Steve Kinney: Thank you.
>> Steve Kinney: It's only a matter of time. This is why you live code with your friends. We get a value of 2.
>> Steve Kinney: All right, that's also why using constants for these things, where it'll blow up if you spell it wrong rather than fail silently is good, right?

[00:02:12]
Cool, and then we'll expect that toJavaScript. For this dropper ast, and you can do more kind of end to end tests where you start with the syntax, run it through the parser. And then take that and just make sure it all works. But I feel like if you're testing each step of the way, you're probably better off, and your tests don't have know too much about each other.

[00:02:33]
So we'll toJavaScript it. We'll expect that to be, let x = 2. And you might think that this might be harder, but it's not cuz we're still letting the Babel generator do the heavy lifting, right? All we need to do is take this data structure and visit it and transform it into a data structure that we can leverage, right?

[00:02:58]
So it actually, not gonna be too bad. We can go back to this toJavaScript, land over here. Let's just verify that it does in fact fail, cuz it would be very worrisome if it didn't.
>> Steve Kinney: Cool, the failure is good. Let's go ahead and take a look.
>> Steve Kinney: Cuz right now it's getting an ast node that Babel literally doesn't know anything about.

[00:03:32]
So it blowing up is not unexpected. So we have this Babel visitor, and all that we really need to do is add one for our fancy new Dropbear based variable declarations.
>> Steve Kinney: Right, and that will take the enter in this case,
>> Steve Kinney: With the node.
>> Steve Kinney: And we'll say the node, we're just gonna assume they're all let's.

[00:04:04]
Cuz our language doesn't enforce constants, so we should make the compilatory language enforce constants.
>> Steve Kinney: Node.kind is let. Again, this is just conforming to what Babel expects. Declarations. Right. So there's the idea of. In JavaScript, it's not really used that often, but you can comma separate your variable declarations.

[00:04:35]
So you can define multiple in one. I don't see that that often. I remember back in the day, an early node, you'd see the comments before it down the side. But that's why you have a variable declaration, and then there's an array of declarations. JavaScript supports that. So we just need to kind of get that in place.

[00:04:57]
We will only have one declarator in there of the type of.
>> Steve Kinney: These are one of those words that I'm convinced that I'll misspell at one point. And that will take our nodes identifier as the id, which is what it uses and Init, which will be out node.assignment, right?

[00:05:21]
So, unlike some of the other ones, we're not totally off from the JavaScript implementation, but we are a lot further than we were with our call expressions. But it doesn't really matter, because at compile time we visit the nodes, we transform them into what we need to be, and we should see Babel work.

[00:05:40]
That was a lot of typing. So we'll find out together.
>> Steve Kinney: And it passes, right? We can now take all of our define x 2s, and they will transpile into let x = 2;. Right. So that is a JavaScript statement in and of itself. Now we can call functions, right.

[00:05:56]
We can begin to add more and more language with JavaScript as a compiled target. So we can ship our Dropbear apps to the web, and be on the front of Hacker News almost instantaneously. As you do, because it's a functional programming language, and that's how these things happen.