Hello everyone, I am quick-frozen fish 🐟, a front end of water system 💦, like colorful whistle 💐, continuous sand sculpture 🌲, I am a good brother of the next door Cold grass Whale, I just started to write an article. If you like my article, you can follow ➕ to like it, inject energy into me, and grow with me

Read this article 🦀

1. You will learn about discoveryThe open source projectWhat can we do about bugs that appear

2. You will learn how to locate quicklyOpen Source Project BugsThe problem

3. What will you learn about participating in open source projectsBug fixAnd submitPRBecome aContributes

NaiveUI Warehouse Address:NaiveUI🎄

If you are learning about vue3+TS, then I suggest you take a look at NaiveUI, a great vue3 component library ^_^, which the open source project refers to 🐬.

Preface 🌵

According to the requirements, we need to write a chatroom Web application based on vue3+TS, which found open source project bugs and submitted PR to successfully merge 🕶

Find bugs 🐳

The cause of 🌾

Because they’re working onvue3+TSI was thinking of goinggithubCheck to see if you can find it.vue3+TSThe component library, which comes to mind before Utah 🐱 recommendedNaiveUI.star🌟 has5.8 k.So I downloaded the project and played with it.

After 🍂

I was playing NaiveUI’s Avatar component, which was originally designed to support adaptive zooming of input text at ☃

But I found that when usingv-showandv-ifWhen it behaves differently,v-showCase enter text after component textNo auto zoom centerSo I wascodesandboxWe did some tests inside, and we confirmed thisBUGThere is 🔥, hence the following text.

Results 🌵

Because I don’t know if I wrote the code problem, with a speculative mood to figure out what is going on 🐷, I went to the Issues above search, but did not find a partner to raise similar questions, so I will raise a Issues🌍

Locate the Bug 🐘

Step1 🍏

So I downloaded the NaiveUI project to my local, debugged a wave, debugged for a long time to the problem location, there are a lot of questions, how to do ❓

Step2 🍎

How to quickly learn about this projectcomponentThe code ❓ the first must be to see their ownThe source codeThe second is to findThe authorAsk directly na, ha ha ha 😂, then I went looking for an author to ask, how to find an author ❓ is there commonly in their official documentsCommunity

With this you can start your sand sculpting questions 🤡 HHHH ~ ~ ~

To solve the Bug 🐿

Step1 🌴

Now we already know the problem, that is about to turn your little head start crazy 🌝 to think about how to get to coding to solve the BUG, we need to in local mode, encounter problems, inquire, to ask is a good boy 😜, of course, you will encounter all sorts of problems, don’t be afraid of, one by one to solve, don’t ask, just check information, Trial and error is progress, and here is my core code for fixing this BUG

/ /,,,,
export default defineComponent({
  name: 'Avatar'.props: avatarProps,
  setup (props) {
    const { mergedClsPrefixRef } = useConfig(props)

    let memoedTextHtml: string | null = null
    const textRef = ref<HTMLElement | null> (null)
    const selfRef = ref<HTMLElement | null> (null)
    const fitTextTransform = (): void= > {
      const { value: textEl } = textRef
      // The core code for fixing the BUG is here
      if (textEl) {
        if (memoedTextHtml === null|| memoedTextHtml ! == textEl.innerHTML) { memoedTextHtml = textEl.innerHTMLconst { value: selfEl } = selfRef
          if (selfEl) {
            const { offsetWidth: elWidth, offsetHeight: elHeight } = selfEl
            const { offsetWidth: textWidth, offsetHeight: textHeight } = textEl
            const radix = 0.9
            const ratio = Math.min(
              (elWidth / textWidth) * radix,
              (elHeight / textHeight) * radix,
              1
            )
            textEl.style.transform = `translateX(-50%) translateY(-50%) scale(${ratio}) `}}}}Copy the code

Step2 🌱

We will submit PR👨 and let the open source author 👨💻 check whether your code is qualified and whether it can be incorporated into their project. This process is also a very valuable process. You can communicate with the open source author 🙎 👨 and learn a lot. Of course, it is not a pass, you have to revise repeatedly, of course, the author will help you, give you his opinion. Of course, this process will be difficult, you just have to be patient slowly change.

Look how many times I submitted 😢PR

Discuss with contributors 🤓(o^^o)

Step3 🌿

Finally, through your efforts and the help of open source authors, you solve this BUG, pass the review, and finally your PR will appear Merged, and you will be contributing to the open source project

Harvest 🍁

Here we can finally relieved, full of a sense of achievement and satisfaction 🍉, everything is worth it, perhaps this is the charm of the open source, you became one of the contributors of NaiveUI, can also with my idol antfu (vuejs core members | vueuse author) with the box’s lucky ~

Now you’re part of the open source projectContributersOne of the ~ 💫

With idol box 😬

Once successfulPRIt gives you more than just beingContributerJoy, is you break through difficulties, overcome difficulties, and excellent people thinking together, together to solve problems broughtcomfortableIt will bring youconfidenceandpowerTo contribute more, to be a realCreator“So I hope everyone can join usOpen sourceFeel open sourcecharm. 💦

Conclusion 🌞

So my second article is over, the purpose of the article is actually very simple, is the summary and output of daily work, output something useful to everyone, dishes are not important, but love 🔥, like everyone can also participate in open source, take the first step, At the same time, I am very grateful to NaiveUI team (their speed of solving problems is really very fast), and I hope to meet more like-minded friends through this article. If you like to do things, please add my friend, and we can make progress together.

Making 🤖 : sudongyu

Personal blog 👨💻: Frozen fish blog

Vx 👦 : sudongyuer

Write in the last

Guys, if you like my words, give 🐟🐟 a thumbs up 👍 or follow ➕ to support me the most.