``2021'' This year I contributed code to the Vue.js ecosystem

Preface

This article mainly shares my own experience of contributing code to the Vue community ecology in the past year.

I hope my experience can give help and reference to friends who want to try/learn how to participate in open source contributions.

power of the team

Before I start to introduce the experience, I want to talk to you about my views on open source contributions.

There may be many reasons for an open source project to become popular, such as solving a certain pain point and improving a certain degree of efficiency.

But to survive, it must be inseparable from continuous maintenance and iteration, and continuously solve problems and pain points for your users and downstream. Give me a 🌰:

Suppose we open source a certain UI library (based on Vue2), which has been loved by many users. Then, Vue2 released Vue3 along with the development, but we did not have it for various reasons (busy online dating, unable to scroll, no more love) Compatible with Vue3, it can't meet the needs of some users at the beginning, resulting in user loss.In fact, this library is not far from retirement (we know everything that has used some KPI products).

A person's energy is limited, and a project needs the participation and contribution of many outstanding open source people to go further. Take Vite an example. While someone is still investigating whether it is suitable for production, in fact, it already has a good ecosystem:

a member of the Vite core team, wrote an introduction about the 161ad599f623a8 Vite ecosystem . I also thank many big guys for their contributions, so a good project cannot be separated from everyone’s contributions~

Contribution experience

About my contribution experience, I briefly summarized it into three stages. The PR contribution is relatively fragmented and trivial, so at each stage I only choose a relatively representative one to share~

Typo Killer

that hot summer. When I was investigating 161ad599f624b8 vuejs/composition-api , I found a document format error in the official document. My eyes cannot tolerate sand. "Fork -> Fixed -> PR" Sanlian my distinguished Vue Contributor (161ad599f624d2 mixed PR ) career.

Why do I call this stage a "typo killer"?
From the above PR, we can see that it is not difficult to contribute code to open source projects, and it can even be said to be very simple. It is also because of this that we are easy to get lost and participate for the sake of utilitarianism. "Contribute for the sake of contribution". This is very Obviously it is wrong, we need to have the right attitude.

In this way, I started the first step of open source contribution.

Issue Fixed

Everyone knows that Vue3 has a script setup syntactic sugar. After several months of proposals, it was finally finalized in V3.2. After the release of V3.2, I am also observing its stability and whether it can be applied to production. In the process of observation, I saw a Bug Report in the issue:

This Bug means that the defineProps grammar generated an incorrect PropType . At that time, I was thinking, is it script setup grammar? An idea came out in my mind: (Confirm the problem and fix it ), but at this time there is another little devil in my heart saying: (No, you haven't read the proficient Vue source code escape:)). I want to contribute code ( mixed PR ) of course I will not let this time go Chance~

How to debug?

Before confirming the problem, we must know how to debug the code. We can't rely solely on love and thought to generate electricity. Here I share my ideas (perhaps there is a better way) and debug through test cases:

• Open the Jest (Vue3 single test tool) configuration file, and change the testMatch configuration to the corresponding file you want to debug
• Comment out all test cases and write test cases (the use case here is the application scenario above)
• OK, now you only need to find the relevant code location (Vue3 uses the Mono Repo directory structure, it is quite easy to find the relevant function function), you can breakpoint or print debugging, and verify your repair results according to the test case assertion.

Test case

To submit PR for some projects that integrate automated test tools, you must bring the corresponding test cases:

• Ensure that your PR can be quickly verified
• Improve code coverage and code robustness

Feature Request

Everyone knows that Vue3 introduced Composition API to improve logic reuse capabilities. Here is the vueuse , which provides a lot of easy-to-use and high-frequency application scenarios hook , such as useLocalStorage , useDebounce etc.

When I was doing demand, there was a scrolling function that needed to be implemented. I found that vueuse did not provide a corresponding hook. I think this function is universal and high-frequency. It would be cool vueuse I read the contribution guide and started my implementation useScroll

1. Create a new issue to confirm the feasibility

2. Functional design

3. Function realization

It's not the focus of this article, so I won't post the code. who

4. Submit PR

Use feedback

I am quite happy to see that some people use the functions I have implemented and submit PR supplementary features😛

Project Activity

Although there is no gold content, I still send it out to install ~ escape :)

Contribute to the north

Here, I share a few considerations for contributing code to open source projects:

communicate in English

Some people may have questions. The author is obviously Chinese, why should he use English? Here I take Vue an example to explain my views:

• The project members come from all corners of the world, and the people who help you solve the problem may not understand Chinese. (After all, English is the global language)
• Vue has a certain user base at home and abroad. There may be crooked fruit friends who have the same problem as you or are interested in your solutions. It is convenient for you to search issue and PR in English.

Some big guys will say: "No, I don't know English". In fact, the author is also a "translator". Youdao, Google, there is always a translation software for you. (To be honest, after a long time, you will Find your English is improving)

So, bring your english when you issue , PR or even git commit msg

Follow official regulations

As the saying goes, "There is no rule and no circle", in order for the official to locate, reproduce and solve your problem more clearly, quickly and accurately, please:

• When mentioning issue , follow the official template and accurately describe the information.
• When mentioning issue , try to provide the smallest reproducible demo (mini repo), here can be the CodeSandbox、Github link, etc.
• Read the contribution guidelines (if any) before mentioning PR
• Elegantly submit your Git Commit Message , the easiest way is to directly view the Commit History warehouse you want to contribute, and copy it!

CI/CD process

Generally, open source projects have a Github Action , which is used to verify and standardize the code format and robustness of contributors. The more common one is the lint and automated testing. So we had better first before PR Run this process again to confirm that there is no problem, this can usually be package.json in the scripts command in the 061ad599f62c6a file.

Here is a little trick that you can add [skip ci], [ci skip], [no ci], [skip actions],[actions skip] such as commit message CI , which is often used to repair documents and typos.

Harvest and grow

Sense of accomplishment

When we stand on the shoulders of giants and use open source libraries to efficiently empower our business, we can do our part to feed back the community, give the community some positive feedback, and we can also gain a sense of accomplishment.

Technology growth

When we tried to repair issue and PR being reviewed, in fact, in the process, we were also exercising our ability to solve problems and code.

Concluding remarks

Finally, I want to thank the big Anthony Fu , a very powerful full-time open source. I sigh that you can produce multiple Awesome projects while maintaining the maintenance and contributions of multiple projects. Learn and benefit from you A lot!

Regarding open source contributions, I am also a novice. The purpose of this article is to review and summarize myself in this area on the one hand, and the other is to give a reference to partners who want to participate in open source.

Life is endless, open source is more than just. Risby!

If my article is helpful to you, welcome follow me to play together~