How to Add a Component and Update an AST
Introduce a shared Button component to replace all existing button elements
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Practical Abstract Syntax Trees course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Practical Abstract Syntax Trees, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:11] With the code audit completed and the necessary functionality determined, it's time to build the button component. Keep in mind that implementing this component isn't directly related to ASTs or doing a code audit.
[00:12 - 00:31] The button is being used as the example of how to apply different AST-based tooling to code-based maintenance and refactoring. In the Flashcards app, create a new directory in the source components directory named button, and in this new directory, create a file named button.js for the new React button component.
[00:32 - 00:44] Then, we can fill in a component implementation for the button component. We've already defined the props, and we can map this to the basic functionality .
[00:45 - 00:58] For the type prop, based on the usage, button is more common than submit, so it can be made optional with the default of button. The binary button will have the button class name, but there needs to be a way to control the different button variants.
[00:59 - 01:07] This can be three values, primary, danger, and secondary. Again, based on the usage, this can default to primary, since it's the most common.
[01:08 - 01:17] Block controls whether or not the button is block or full width. Onclick, which is a click handler, that will be passed directly to the button elements on click prop.
[01:18 - 01:24] The styles are then built up depending on the input. The variant is interpolated to create the button variant class name.
[01:25 - 01:34] And the button block class name is conditionally toggled, depending on a boolean. It's not necessary to remove the class name prop in favor of the variant and block props.
[01:35 - 01:55] However, using props to apply styles is a common pattern because it makes it easy to change the underlying style implementation at any point without breaking any e- sages, and prohibits inconsistent styling by injecting any potential styles via a class name prop. For the purpose of this course, it also helps demonstrate a more complex transformation in the next module.
[01:56 - 02:06] Now that we have a button component, we can update all the usages of the button elements to instead use the button component. In the current codebase, this would be manageable to do manually.
[02:07 - 02:18] However, continuing with the previous lesson and imagining there were hundreds of usages, manually updating all the usages would be impractical and take too long. The audit script is already finding all of the relevant button elements.
[02:19 - 02:30] But if it was possible to adapt this and also replace these elements, the next module will explore this concept of transforming code or code modding. But before that, we're going to quickly cover how to decide when to use AST- based tooling.