Hi everyone!! Welcome back to the fourth article in my series of articles as an Outreachy intern with Wagtail.
Overview
The goal of Introducing Stimulus into Wagtail is to refactor and maintain Wagtail's JavaScript utils, widgets and files. To achieve this purpose, my mentors and I have been working on converting Wagtail's major components to Stimulus. Aside from converting these components to Stimulus, we've also implemented some clean-ups in the JavaScript code by removing inline scripts, moving the codes to TypeScript and writing tests for them. We do these clean-ups because we want to improve the performance and refactorability of the JavaScript codes while at the same time ensuring that they are written in a consistent way. We've also cleaned up some ESLint rules and replaced some older methods used in the JavaScript with newer ones.
Stimulus Conversions
For the Stimulus conversion, I've converted four major components and the pull requests(PRs) have been merged. Two are still in progress, one by me and the other by my mentor LB.
Upgrade Notification
This was the first issue I worked on converting to Stimulus. The upgrade notification in stimulus shows up when the current version of Wagtail in your installation is behind the latest version.
When I just started working on it, it seemed so huge and unfamiliar. I had to read the Stimulus handbook plenty of times and practice it. Thankfully, LB already had a draft PR for the issue, mine was just to refine it, update the tests and make sure it worked. The upgrade notification uses the Stimulus controller attribute data-controller with value w-upgrade.
Here is a link to the PR for your perusal.
InitSkipLink
This is the second Stimulus issue I worked on. LB already had a draft PR for this so I just had to refine it a bit and write tests for it. Honestly, LB made everything easier for me because of his drafts, I had time to do my research and had his codes to fall back on whenever I got stuck.
The controller for this component is w-skip-link. This feature helps users to navigate to the main section of the web page without unnecessary keyboard navigation.
Here is a link to the PR for this issue.
Enable Workflow Button
I had to start this issue from scratch since there was no draft PR. This was a challenging one but it was exciting too. I had to convert from the previous implementation in JavaScript to TypeScript and then wrote tests for it with Jest.
The controller for this component is w-action. It's used when a page has been disabled and needs to be enabled. This makes it easier to use a common pattern in Django applications, where the user needs to just click a button but we want this to submit a form POST request.
Here is a link to the PR for this issue.
Lock Unlock Button
This issue uses the same logic as the previous implementation of the enable workflow button, though they were in separate files. The only difference was that the lockUnlock function takes in an extra parameter which is the next URL. Using Stimulus for this made it easier to get rid of the two JavaScript files and use a single Controller for both.
The controller for this is still the w-action. In the case of lock-unlock, it's used to lock pages, unlock pages and cancel scheduled publishing of pages.
This is the link to the PR for this issue.
Longrunning Button
This is the issue I'm currently working on and there's a draft PR already opened for this. The button-longrunning is used to show that the result of a button interaction is loading. It works in such a way that when a button is clicked, it adds a disabled attribute to it, adds a spinner icon to show progress, and also sets a time out for when all the added attributes would be removed and the button becomes active. In some cases, it changes the current text to the data-clicked-text attribute which could be something like Loading, saving, etc.
Since the button-longrunning is used in a lot of places, manually deleting the previous implementation data attribute and replacing them with Stimulus controller attributes would be a bug hassle. So LB discussed that we use the afterLoad feature of Stimulus where the Stimulus data attributes are set to those buttons inside of the Stimulus controller class. The controller for this is w-loader for now, we might decide to change it later.
Header Search
This issue, LB is currently working on it and he already has a draft PR open. This is an example of how complex the next series of Stimulus controllers I'll work on is going to be. We plan on holding a programming session where LB would review and walk through the implementation with me.
Fixed strictPropertyInitialization error in Stimulus
Setting the strictPropertyInitialization rule to true in the TypeScript configuration file always brings out a build error in the terminal when classes, values and targets are used in Stimulus.
Property 'hiddenClass' has no initializer and is not definitely assigned in the constructor.
My mentor, Thibaud and I had to research another way of fixing these errors instead of just turning the rule off. We found out that in Stumulus, we can set the properties of configured values, classes, targets to be defined using the declare keyword in TypeScript. So we did this and it worked perfectly.
This is the link to the PR.
Other Issues Not Stimulus Related
I worked on pulling out iniIconSprite function from an inline script to Typescript and I wrote tests for it. This function is meant to lead the icon sprite.
The next issue was removing some legacy rules that have been fixed as a result of other PRs.
Then I removed the getUrlParam function from the core.js file and replaced it with a newer API method called URLSearchParam. The previous method used a regex to get and set the search parameter. This is a link to the PR.
My Challenges
I had a lot of challenges at the start of the internship such as getting used to working on such a large project and convincing myself that I can do the job. The mentors were really helpful and encouraging, they always tell me to ask questions whenever I am stuck and if I don't understand it, they share helpful resources and explain again.
Another issue I had was testing with Jest. The first time I heard about Jest was when I was working on my major PR during the contribution phase. It was something that sounded really new to me and I had to watch lots of youtube videos in order to understand a little bit about how it works. I'm still learning more about it now.
My Wins
Working on such a large project has boosted my confidence in so many ways. I'm more fluent when it comes to communicating with other people and relating with them. It has also helped me to consolidate my tech skills and build on them. I used to be the very shy type and I rarely leave my comfort zone to relate with other people but now, I'm a lot more outgoing and confident.
I even hosted a Twitter space with more than 100 listeners and this is something I wouldn't have been able to do last year. It is such a huge deal to me and I'm happy that I'm improving every day!
Next Steps in the Internship
The next thing on our list is to improve the speed of implementing the Stimulus controller conversion. Not only that, but I also plan on learning Django and Python so I can contribute to other parts of the code, not just Stimulus.
Our next issues are;
Move the Gravatar function from Javascript and implement the same functionality with HTML/CSS.
Convert Breadcrumbs to Stimulus.
Convert Dismissible to Stimulus.
Convert the Slug Field to stimulus.
Conclusion
Thank you so much for reading to the end of this article and I hope you enjoyed it. Contributing to open source is fun and rewarding in so many ways. If you are hesitant on giving it a try, don't be! Just contribute to a small fix and see if it's something you would like to do long term, you don't lose anything. Bye!!!