DPS909 Blog: External Pull Request
Tags: opensource
Published: 2022-11-19 06:18:58

As part of the Release 0.3 project for my open-source course (DPS909), I was asked to continue my learning progression from [Hacktoberfest](https://dev.to/alexsam29/hacktoberfest-recap-bj6) by making another pull request (PR) to an external project.

Ideally, I would have continued working on the project I had already contributed to during Hacktoberfest because I would already be familiar with. But these projects currently didn't have many open issues so it was difficult to find one that wasn't assigned already.

I was recommended to take a look at this project called the [Astro Reactive Library](https://github.com/alexsam29/astro-reactive-library). This repository builds components and architecture for projects that use the [Astro](https://astro.build/) framework for their reactive user interfaces.

The challenge with this project was that I never even heard of the Astro framework before this. I had no idea what it was and I would have to learn the very basics of the project before even thinking about solving an issue. Luckily, the learning process went smoothly and I was able to get a quick grasp of how the Astro framework works and how the components in the project build UI components.

## The Issue
So after this learning process I felt comfortable looking at issues and determining which one I could tackle. I took a look at [issue #140](https://github.com/ayoayco/astro-reactive-library/issues/140) which was related to the components used to create forms. To summarize, the way they assigned the `id` attribute of the `<input>` tag the same value as the `name`. However, the project owner believed that this would cause issues since they use IDs as selectors, so the `id` attribute needs to be unique. The ideal solution was to create an `id` attribute that is not the same as the `name` attribute by making a function that creates a Short Unique ID (UUID). The UUID should be prefixed with `arl` and assigned that as the `id` value for every `<input>` tag.

## The PR
PR: https://github.com/ayoayco/astro-reactive-library/pull/182

My idea to fix this issue was slightly different than the suggested solution. Instead of creating a new function to generate the UUIDs, I found an existing NPM library that does exactly what is needed for this issue. It's called the [Short Unique ID Generating Library](https://github.com/simplyhexagonal/short-unique-id). I added the library to the project. Now any time I need to generate a UUID, I just import the library to the file and assign a UUID like so:
```ts
const uid = new ShortUniqueId({ length: 9 });
const id = uid();
```

The next step was to add `id` properties to `form-control` and `form-group` and assign them with UUIDs so every time the component is created, it will have a unique ID. I added the property, assigned it a UUID in the constructor, and made a `get` function for the property.

I then found every instance where the `id` attribute in an HTML tag is assigned the same value as the `name` attribute. I also changed all `<label>` tags to use the associated `id` value for their `for` attribute.

The PR went well, the project owner only asked me to assign the `<FormGroups>` component a UUID since I had missed that originally.

## Conclusion
This was step above the PR requests I made during Hacktoberfest as I mainly stayed working with web frameworks I was already familiar with. With this PR, I had to teach myself the basics of Astro and figure out how individual components are made using this framework.