Code Transformation and Linting with ASTs

Challenge 11: Swap Out Utilities

Kent C. Dodds

Kent C. Dodds

Professional Trainer
Code Transformation and Linting with ASTs

Check out a free preview of the full Code Transformation and Linting with ASTs course

The "Challenge 11: Swap Out Utilities" Lesson is part of the full, Code Transformation and Linting with ASTs course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students continue to work to swap out more jQuery with vanilla JavaScript functions.


Transcript from the "Challenge 11: Swap Out Utilities" Lesson

>> Kent C. Dodds: We'll do the exercise Code Mod 3, I think.
>> Kent C. Dodds: Yeah. And we'll NPM Start.
>> Kent C. Dodds: Yeah, okay.
>> Kent C. Dodds: I hope this works, cuz this is a pretty big change, [LAUGH] and I haven't had a chance to review it very well. So let's just take a look at the way that things are now.

So we added a couple of features. So now add class will be code moded into the just regular rom dom api's. Show is the same and now we have this myEl.addClass thing where we want to be able to apply our changes to something that's been assigned. And honestly, I should say that probably this should live in a different plugin altogether.

These are not exactly quite the same, maybe you have some utilities that they share between them. But it was a little bit easier just to keep everything in one file for the workshop, so it's kind of trade offs and both work just fine. Depends on how modulated you want to be.

So we still have lots of the same stuff but one thing I changed for our exercises was it's not just hide anymore, it's hide show and add class are allowed to pass through our stuff. Because we can allow for multiple of those, we're going to get the jQuery function that's being called so hide or show or addClass.

If it's addClass, then we're gonna update that text to be an addClass call. Otherwise it'll be the update display which is similar to what we had before. We're now not only are we doing the element but we're also doing the display string literal between an empty string and nine.

And then for update at class, we take the ELEMENT.classlist.add and then the CLASS_NAME and we just use the arguments. Okay, so,
>> Kent C. Dodds: By adding in this little troublemaker here, we're gonna run into the same problems that we had with ESLint when, as we're traversing, we don't have all of the references relationships bound up together quite yet.

So we need to wait until the program has been traversed and than we run our stuff.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now