Challenge 6: Solution

[00:00:00]
>> Kent C. Dodds: So I'm gonna pull this into AST Explorer really quick. Gotta make sure that I am using VV6 with Babylon. And I'll just bring this code over. Oops.
>> Kent C. Dodds: Okay, Great, so now we can try it and manipulate this AST and bend it to our will. So the thing that I'm gonna be looking for is call expressions, because I don't care if I'm using console.log and not calling it.

[00:00:35]
I don't care about console just hanging out by itself. I'm interested in this whole call expression cuz I need to add arguments to it. So that's why I chose call expression for my visitor.
>> Kent C. Dodds: And my call expression is going to accept a path. And then for, let's expand this out a little bit.

[00:00:58]
>> Kent C. Dodds: With this path, I want to make sure that it is what I'm looking for. So isConsoleCall and I'm going to make that something that looks like this object. So really quickly inspect that.
>> Kent C. Dodds: Path console.log the path. One thing to note, this looks like thing will totally fall to pieces if you try to pass a path or a node as the second argument.

[00:01:35]
Don't do that because it's circular references and this doesn't handle circular references. So your, yeah, stack overflow. And I could write an ESLint plugin that makes sure that you only pass in object literals or an object that you created. So, isn't that awesome? Yes, that is awesome. The answer is yes.

[00:01:59]
Okay, great, so here I'm gonna look for, well, first off, I want to get the node off of the path.
>> Kent C. Dodds: And I want to verify the call expressions. Let's actually go down to the node and the callee. Looks like the callee needs to be a member expression.

[00:02:25]
And the object needs to have a name called console. I don't really care what the property is. If it's called expression, member expression, where the object is console, I'm gonna guess that it's gonna be logger info or something. I'm gonna wanna manipulate that, so yeah, let's go ahead and do that.

[00:02:45]
>> Kent C. Dodds: Yeah, so we'll say callee, we want it to be type MemberExpression. And we want the object of the member expression to have a name of console.
>> Kent C. Dodds: Cool, let's go ahead and say if it is a console call, or sorry if it's not let's exit return. Otherwise we'll log the path and we'll get rid of these other logs, great.

[00:03:19]
So we had a bunch of expressions, now we just have these three. So that's great, we'll just verify really quick that is what we are expecting, we want the node. Callee object, that's a console, and our arguments, okay cool. So if we want to change this into this.

[00:03:40]
We need to modify the arguments, and we need to put a string literal as the first argument, so let's do that first.
>> Kent C. Dodds: So we're gonna get the, actually I should never close this thing cuz I'm always reopening it. We'll get the path.node.arguments, and we get an array of arguments.

[00:04:12]
And that is just an array that we manipulate however we want. So I'm going to say, unshift. And you can't just unshift anything, I couldn't just unshift the string hide because that's going to actually evaluate too an identifier, high. And so I need to be explicit about what node I'm trying to unshift so I'm going too Use the babel's type thing, that's really handy to create a new string literal.

[00:04:43]
t.string literal, and I'll pass the string, and now I get hi in front of all my console logs. So we want it to actually be our line numbers. And so we can get that if we console.log (path.node.loc). It's gonna give us a start and end. We only care about the start.

[00:05:06]
The reason that it has a start and an end is because nodes can be on multiple lines. For example, this function declaration spans three lines. And so you have the very start of that node which would be, for this function that would be line 6 Column 0 or 1, I guess.

[00:05:28]
And then the n would be line 9, column, here, we can just look, ha. The end is line 9, column 1. But for us, I think we're good to just stick with the start and get the line in the column from that. So we'll do that cont start equals that.

[00:05:47]
And then we're going to turn this string literal into start.line:start.column.
>> Kent C. Dodds: Great I think that looks like it's supposed to. So let's copy this over back to our captain's log.js, paste that in and poof.
>> Kent C. Dodds: It works like magic.
>> Kent C. Dodds: And then we can go ahead and fill out our elaboration and feedback form.

[00:06:23]
Which I hope you've all done. And now I'm gonna ask you, well, let me first change this to true and unskip that, and now all of our tests are passing, which is great. So now I'm gonna ask you what is a takeaway from this exercise? What's something that you learned from this exercise?

[00:06:43]
>> Speaker 2: That you only want start. That took a minute to figure out, instead of getting start and then end, assuming that that was-
>> Kent C. Dodds: Yeah, for this particular exercise, just using start for the line numbers, yeah. What else, anything about Babel generally that was useful?
>> Speaker 2: Just pulled way too many methods.

[00:07:02]
>> Kent C. Dodds: Way too many methods. There are so many, did you look at the prototype? It's totally loaded, yeah, it's true. And like that babble types docs, it's enormous. Yeah, that actually is kind of a problem. It's part of the reason I'm doing this workshop, is because there's not a lot of material of learning how to do this.

[00:07:23]
And I feel like it's more approachable than people think. And part of the problem is not enough material, so. Yeah, so hopefully I'm showing you most of the useful things and giving you an idea of what you can find, answers to your questions.
>> Kent C. Dodds: Yeah lots of methods.

[00:07:44]
But yeah seriously like console logging path or console logging babel core even. And then just reading some of those methods will give you an idea of what's possible. Not all of it is super well documented, but it's all right. We can all improve that. Hey that's the cool thing, it's open source so you can go fix it, so cool.