Code Transformation and Linting with ASTs

Challenge 7: Prefixing

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 7: Prefixing" 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 build out the plugin by attaching a prefix to a function.

Preview
Close

Transcript from the "Challenge 7: Prefixing" Lesson

[00:00:00]
>> Speaker 1: Now, our next exercise, let's jump ahead. So we'll say npm start exercise babel 1.
>> Speaker 1: And now, we should see our tests failing, snapshot is failing. Now, things look slightly different. So we have three console logs. One of them's in the root at the very bottom, that one wasn't changed.

[00:00:27]
But the other two that are inside of functions did change. So now, we want to also include the name of the function here.
>> Speaker 1: And I think that you can get that. Wait, if we just look here. Here we are at our MemberExpression, our CallExpression. This is what we're visiting.

[00:00:55]
If we look at the parent and do a findParent to find a function declaration, then we can find the function declaration that this thing belongs in. And get the name from that function declaration. Yeah, it's pretty much, if you remember from my little demo before, where we were looking for the program, I said path.findParent.

[00:01:21]
And then t.isProgram. You'll be doing something very similar to that, just not program, cuz you're not looking for a program. Okay, and then based off of the function declaration, if it exists, then you'll add a little prefix.

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