My first journey with hotfix of Vietnamese flag on Xtranslation CHAP.2

22 Mar 2023 　・　3 min read

In the previous chapter I discussed how I discovered the hotfix, and in this final chapter, I will describe how I resolved it.

Fixing the hotfix

Firstly, I created a directory on my computer named . This is where I kept my forked repository.

Forking repository from the upstream repository

As the project belongs to the author, and to avoid making any changes to the original project, I created a of the project on GitHub.

About fork on github

After clicking, I created a new . By default, the repository name and description will be the same as the upstream repo. I kept the name of the repository the same as the upstream repository - . However, I provided a description that explained the content of the hotfix.

Next I copied the link of the repository.

and used to clone it to my local directory (where I stored the project).

Adding : to dictionary list

Then I used to open the code. Fortunately, I was using TypeScript for my own project, the same language used in the upstream project. I made the necessary changes related to the and the by adding in the and directories.

// https://github.com/acapela000/XTranslate/blob/master/src/components/select-language/select-language.tsx

export const langToFlagIconMap: Record<string, string> = {
  // Other countries's name...
  "yo": "ng", // Yoruba (Nigeria)
  "zu": "za", // Zulu (South Africa)
  "xh": "za", // Xhosa (South Africa)
  "vi": "vn", // Vietnamese
};

Update version at

At that moment, I had the understanding that any modification made to the open source code required a version upgrade. To gain more insight into versioning, I referred to this document on versioning. Consequently, I executed a version for a minor bug fix, as advised.

Returning to the codebase, I discovered that the webapp extension was defined in the file. I accessed this file to upgrade the version.

is a configuration file that defines the parameters of an extension. Further information: manifest.json? (use to find ).

{
  "name": "XTranslate",
  "description": "__MSG_description__",
  "version": "2.76.2",
  "manifest_version": 3,
  "default_locale": "en",
  // ...
}

I followed the instructions in the file to check the extension source directory with my .

README

To execute the build, I ran , but it failed due to a bug shown in the image below.

It seemed that the command was not present in . I deleted the command but still encountered the same error with , , and .

{
  // https://github.com/acapela000/XTranslate/blob/master/package.json

"dev": "rm -rf ./dist && webpack --watch",
"build": "rm -rf ./dist && NODE_ENV=production webpack --progress",
"test": "jest"
}

I then removed the commands one by one until only was left, and it worked. This reminded me of the command, which removes everything before building.

Upload package to Chrome Extension

I navigated to the Chrome extension by opening the following link:

After that, I proceeded to the manage extension option:

I then changed the default mode to by selecting it:

Next, I clicked on to access the directory where the hotfix project was stored:

This action opened the folder window, and I selected the folder:

Before enabling the , the extension versions were not visible:

However, upon enabling the , I could see all the versions of the extensions I had:

After completing all the steps, I observed that the version of the extension had been upgraded from to , which was indicated in the left corner of the extension:

Pull request to the author

Finally, I contacted the author through a to inform them about the changes made in the hotfix.

After sending the message, I anxiously awaited the author's response. To my delight, the author replied with appreciation for my work and suggested that I localize the strings in the file. The author also provided guidance on how to do this, which I followed and translated the from to .

vi/messages.json on github

I learned that it was not necessary to update the version with a version as I had initially thought. Therefore, I changed the version in the file from to . I also discovered that the Xtranslate extension had recently been updated to version .

Overall, contributing to open-source was a rewarding experience, and I aim to continue learning and growing in the wide (and wild🌊 :D🫠) and ever-changing tech world.

Thank you for taking the time to read my post😊. I look forward to discussing other topics with you soon.

#github#coding#hotfix#My-first-journey-with-hotfix