Challenge 6: Captains Log

[00:00:00]
>> Kent C. Dodds: So go ahead and run npm-start exercise babel0. Now you're going to see a captains-log.js file. Shout out to my friend Kyle Welch who created an actual plugin called captains-log that does basically what we're gonna do here. And I think he's watching, so [SOUND]. So we have the captains log plugin file it's basically empty and except it has the looks like because that's pretty darn useful.

[00:00:38]
And we can that through our plugins and stuff and actually the, yeah, anyway. And then, yeah, it has the structure for you so you don't have to write all that out. And then our tests are a little bit different than before. So ESLint has a rule tester and it's really awesome, a really great abstraction for the common things you need to test with ESLint.

[00:01:05]
Babel doesn't quite have that. I think that they have some internal stuff that they use for their own plugins, but yeah, we don't quite have that. What we're doing is we provide our own source code and using template literal so that we don't have to do concatenation stuff.

[00:01:24]
And then we're stripping the indentation so it's nice and indented. But anyway, from there we trans pile using Babel.transform. We pass it along that source, and some configuration stuff which most of this is not totally relevant to what we're doing. The only piece that really is is this plugin.

[00:01:47]
So it's using the plugin that we are writing. And then, based off of that we get the code back. And we call this toMatchSnapshot thing. Does anybody know what this is? To match snapshot, this is gest snapshot testing. It's amazing and you don't need to understand and totally for our stuff.

[00:02:10]
But what you need to understand is that is going to create a new file next to our test in an underscore underscore snapshots directory. And it creates a .snap file that is basically the serialized version of what we passed it, so the transpiled code. And so this is what our stuff is supposed to look like when we're done.

[00:02:39]
So this is what the plugin does. We have some console logs inside of our functions, and a console log outside. And what we want to do for this first iteration of our plugin is we want to replace this with the column and the line except the actual column and line number.

[00:03:04]
And so that's where we get two, two or sorry that's line in column. I think it's mixed up, I don't know what it's normal in stack traces but that's what we're doing sorry. It's line in column, I think it's line in column normally. But yeah, the actual line in column.

[00:03:23]
And you can get that information from RAST, oops, where did it go? Yeah here, if you console.log the path.node, then you can see we have LOC object that has a start which has a column and a line. So that's where you're gonna be getting it, is from the LOC.

[00:03:50]
Yeah, and it just makes it so, when we like uglify this or whatever, we see those logs later, we can see where those were in the original source code which is kind of handy. So it's kind of handy. So it's kind of ironic that our last one was to talk about getting rid of console and now we're talking about like adding it in.

[00:04:08]
But yeah, now we're making it more useful. So now we don't need the no console really anymore, I don't know. So go ahead and have at it. When you run the test you'll do npm start and you're going to enter just watch mode here, and you'll see a failure.

[00:04:28]
And it's really nice, and we'll show you exactly what the differences are between what you have and what you should have. So you can base things off of that. Also most of this stuff you can develop in AST Explorer as well.