Challenge 1: Making a Plugin

[00:00:00]
>> Kent C Dodds: And hopefully by now, your setup is all fresh, and clean, and recent. I've got a fresh, and clean, and recent setup on my computer. Sorry, I didn't check the font sizes, that all right? Hopefully, everybody can see that?
>> Audience: Yeah.
>> Kent C Dodds: Okay, cool, so yeah, let's just explore the project really quick.

[00:00:22]
I drastically simplified it last night so that it would be better for you all. And that's part of the reason you had to update this morning. So, sorry about that, but not really sorry. So, we've got some exercises. And part of your setup script initialized some of these exercises, but I'm going to show you how to jump to each exercise, because you're gonna be doing this the whole workshop.

[00:00:50]
And so there's a script you run. It's npm start exercise.eslint.0. So, the pattern is npm start exercise dot, the technology we're using or the thing we're doing dot the exercise number. And you hit that, and what that's going to do is copy the exercise code into this exercises directory.

[00:01:16]
And so you'll be starting fresh with your exercise.
>> Kent C Dodds: Couple of things, important pieces to this. So, for all the exercises, you'll have both the plugin source code and the test code. And your job is to make the test pass. And so to run the test, you run npm start, and that will start up the test.

[00:01:48]
We're using JS testing frame work because it's the best, and it, you'll start out with like a bunch of failing tests that your suppose to make pass. Rats, I made a mistake. So at the bottom of every exercise your gonna have this elaboration and feedback. And the bottom of like the plug-in source code and yeah, that's that's not supposed to be there.

[00:02:11]
So, go ahead and delete that. And while you're doing the exercise, I'll update it so it doesn't do that, and I'll, and you can pull. So that's just in the source file and the test file it's supposed to be there. Rats. So, yeah, you start out with a barebones plug in, it has all of this stuff that I left in there for you because that isn't useful to your learning really.

[00:02:39]
This is just read the docs kind of stuff. And then I left your visitor empty. And that's the visitor, excuse me, that's the visitor that you're gonna be filling out. The console test here, the no console test are using ESLint Rule Tester which is super cool. And yeah, it runs those.

[00:03:01]
At the bottom of each one of these workshop exercises is elaboration and feedback. And this is actually a really important part of the work shop for your learning. Feedback is great for me, I really appreciate feedback but the elaboration is for you. And it's important for you to elaborate on what you've learned.

[00:03:20]
So, when you run the script that included the auto-fill email script, what it did is it should have automatically filled your email address right here. And if it didn't, that's fine, that's not a big deal. But what this does is, if you copy this link into your browser, then it's going to take you to a form with a couple of things pre-filled.

[00:03:43]
And then this is the piece that matters to you. You need to write in your words a few of the core concepts that you've learned from the exercise. And that is going to solidify and help you retained what we've learned. And then I'll ask you about some of those things when we finish the exercises.

[00:04:03]
Once you're finished with that, then remove the .skip and change false to true so that all of your tests are passing.
>> Kent C Dodds: So, let me, and you shouldn't be needing to change any of the test file contents at all. You can reference it for sure, but most of your changes should happen in the actual plug-in source.

[00:04:28]
So, let me explain what this plugin is supposed to do. This plugin is called the no-console plugin, and this thing actually exists. Actually, when I was preparing these demos and exercises, [COUGH] all right, I was really struggling because I thought when I want something that's really practical, but once I write it then nobody needs to write it anymore.

[00:04:52]
So it's not practical once it's been written. Some of these examples, they already exist, so this is more just for your experience and learning. So, what this no-console plug in should do is, it should validate that, calling info is just fine, but anytime you call console or use console then that is not okay.

[00:05:21]
And we're gonna approach this at a TDD or test driven development stand point, so we have some tests. And just do the minimal amount of stuff that you need to do to make these tests pass. Because we are gonna handle more edge cases and stuff. You can do all of those things if you want to, but through the exercises we're gonna be adding more edge cases to our tests.

[00:05:43]
Do the minimal amount of stuff you need to do to make these tests pass.
>> Kent C Dodds: And what I would recommend is taking these invalid and valid test cases, and pulling them up in ASTexplorer, and sticking them inside of here. And then copy and paste your plugin source. Here I'll do that right now.

[00:06:03]
We'll put the plugin source right here. And we'll take some of these cases and put it right here. So console.info and console.warn, console dot anything, and then we'll put valid up here, log is fine, invalid.
>> Kent C Dodds: Okay. And then from there you can just go ahead and write out your plugin.

[00:06:32]
By the way, if you're really are totally stuck and you just want to reference something, all the solutions are in other/final. And we're in no-console, what you're seeing as no-console.0. The solution is no-console.1. So if you're really totally stuck, you can go reference that.