Give the celebrity open source project Nuxt, submit the whole process of the first PR of life🎉

The whole process has gone through two and a half months. This is a very long process. Maybe you will give up because of this, but I still persist. Let me share my PR experience.

Background

issue：Decode function for useCookie called for every cookie present

You may ask: Why do you choose to solve this problem?Is there any special thing about this problem?Explain the reason:

1. Clear description of the problem
2. There is a comeback step
3. There is a minimum compound code reposition

tips: When you submit the ISSUE, you want your problem to solve it. You have to learn to think in other places. If you are a traveler, what key information do you want the Isue to provide?If you have the above 3 points, you may be interested in solving this problem. If you do n’t have it, you may take a look. If you understand this problem, you may solve it. If you do n’t understandIt will always be ignored.This is why many projects need to provide REPRODUCTION. If the REPRODUCTION is not provided, the issue is directly closed.

What do you think of the problem based on the isue and see what the problem is?

• code:

<script setup lang="ts">
  const fooCookie = useCookie('foo', {
    default: () => 'FOO'
  })
  const barCookie = useCookie('bar', {
    default: () => 'BAR',
    decode(value) {
      console.log({action: 'decode', baz: value, source: 'bar'})
      return value
    },
  })
  const bazCookie = useCookie('baz', {
    decode(value) {
      console.log({action: 'decode', baz: value, source: 'baz'})
      return value
    },
    encode(value) {
      console.log({action: 'encode', baz: value})
      return value
    },
  })
  onMounted(() => {
    console.log(`All cookies: ${document.cookie}`)
  })
</script>
<template>
  <div>
    <h1>Coookies</h1>
    <div>
      <p>Foo: "{{ fooCookie }}"</p>
      <p>Bar: "{{ barCookie }}"</p>
      <p>Baz: "{{ bazCookie}}"</p>
    </div>
  </div>
</template>

• Output results:

Why did it appear 4 times Decode?FOO and BAR's decode were called twice.Barcookie's Decode and BazCookie's decode should be called only once, that is, their own cookies will be called.

This is the description of the problem of submitting issues

After understanding the problem, let's see how to solve this problem

Debugging the problem, find the specific reasons

Add a Debugger directly to the Decode, and then see the calling stack to see who calls it

There is no problem at this time, we go back to the Readrawcookies, at this time it is the value of the document.cookie

See how PARSE analyzes

It can be seen that Cookie has key = value and then adds a section to stitch it. Then the analysis is analyzed in this way, and then see what Trydecode does

Finally, I arrived at BarCookie's Decode. At this time, we know why the cookie, which does not belong to its own cookie name, is also called, because the pressure is not filtered at all, so this problem will cause this problem.

Solve problem

The first PR (Closed：5-22)

The above question comes from the cookie-ES library. The first solution I think returns the key to the upper layer, and then let the upper layer decide whether to decode.

Related PR: feat: decode callback parameter adds key

Pi0 said it is more subtle, a little embarrassing 😅

I deliberately set his plan in this sentence, haha

He explicitly told me to add a judgment in line 52

Note: Filter is best to use industry standard writing, so that others know what it means at a glance, rather than when the user waits for the error to report that the condition is reversed.

The second PR (Merged: 5-22)

According to the first PR modification suggestion, this PR.

Related PR: feat(parse): support filter option for key filtering

The next step is a long waiting, waiting for PI0 to release a new package, so I can change the ISSUE corresponding to Nuxt before mentioning PR

Waiting for cookies to release a new package

Cookie-ES releases a new package (7-19)

At this point: Happy and depressed, hurry up and modify the code modification and pick PR

As a result, I found that my code was not at all. Look at the submitted record and found that PI0 lost my code. I finally mentioned a PR. The result was gone.

The third PR (Merged: 7-25)

Since the first mention of PR has been waiting for too long, the code was lost, so this time I finished the PR and left a message to let him release a new package, otherwise I do n’t know when to wait to fix the bug on Nuxt.

This time I quickly responded, and PI0 updated the new package.

Submit PR to NUXT

The first PR (7-22)

It was found that the test was passed, but the new Filter option was not tested, so it was a wave of modification test. In the end, the PR merged was merged

Related PR: perf(nuxt): call cookie decode function only for named cookie #28215

Related issue:

Problems along the way

1. The added test case is not tested in VITES
2. vscode vitest This is a very cheating stuff, it is unavoidable at all. I don’t know if everyone is the same as me.

• Question 1: Can't detect test cases, my new installation dependencies are useless
• Question 2: Always loading, don’t know what ghost is doing
• Question 3: The test case was detected in the middle, but the test case was not running.

No way to test, how can I test my code?This Vitest really can't use it, just write the test in Playground, and then submit the PR after the test passes.
After the code was submitted, I found that the CI test was not passed. At this time, I was inspired. Github Ci could run the test. I looked at the command it executed.You can test it.

tips: If you can't figure out what order to execute the command in a project, and then the page turning document is not figured out, you can see the yml file under the. Github/Workflows folder, which is the CI execution command. You can refer to this file.Let's execute your command.

Receive Nuxt post emails

I finally saw me, very happy. This is the first time I submitted PR for the star project. I was also released. I was very happy. It was also affirming my efforts during this time.

Summarize

• In the ISSUE, you must provide the minimum reciprocating code, which is convenient for the maintenance of the maintenance.
• It is not easy to mention PR for the star project, there will be a lot of restrictions, and the requirements will be higher, so be patient, don’t give up
• Ind the problem if you have a problem, find the root of the problem, and then solve the problem
• In the solution to a problem, think better and more reasonable solution, rather than solve the current problem
• At when the big project is unable to start, look at the execution process of the CI to understand the implementation command of the project (although the document is okay, sometimes there will be problems that are not updated in time)

More

Recently, I opened an article assistant artipub, which can help you publish MarkDown for multiple platforms for you to better spread knowledge and share your experience.
Official website Address: https://artipub.github.io/artipub/
(Tip: domestic visit may be a bit slow, and it will be quickly over the wall.)

Help to click Star ⭐ to let more people know this tool, thank you all 🙏. If you are interested, please join you to join and improve this tool together.