Welcome to join us and make progress together.

I will be the first to push the latest news and excellent articles.

Video on b standing video www.bilibili.com/video/BV1fa…

A wave of reference materials

Vue3.0 code structure

Vue3.0 Resource family bucket

Recently in the study of Vue3.0 source code, in order to achieve the purpose of deliberate practice. I decided to give Vue3.0 a PR boost to verify my understanding of the source code. After two days of hard work, an official Todo test case was added.

Github.com/vuejs/vue-n…

Let me summarize the general steps below.

The Fork the code

The first step is to make a copy of the vue code to your github via github’s fork

Github.com/vuejs/vue-n…

Copy the result github.com/su37josephx…

Clone to the local

git clone [email protected]:su37josephxia/vue-next.git
Copy the code

Install dependencies

# set domestic mirror
yarn config set registry https://registry.npm.taobao.org
# --ignore-scripts is used to ignore chrome downloads
yarn install --ignore-scripts  
Copy the code

Running unit tests

# Global installation is highly recommended
npm i jest -g 
jest --coverage
Copy the code

Synchronize the latest official code before development

The fork code needs to be pulled to keep up with the latest official code updates

Add a new remote branch

This only needs to be done once

git remote add upstream https://github.com/vuejs/vue-next
Copy the code

Pull merge remote branch to master branch

This needs to be done at all times to keep your master branch officially up to date.

Change the master branch of the repository
git fetch upstream master
# Switch branches
git checkout master
# merge remote branches
git merge upstream/master
Copy the code

Function point or test case development

Summary of the basics of Jest

Select function points

For example, the problem I want to solve is this particular legacy of this test TODO

Create a change branch from the master branch

git checkout -b comments
Copy the code

Develop code

The result is something like this

The servo runs a single test case

jest packages/compiler-core/__tests__/transforms/vIf.spec.ts --watc
Copy the code

How to run coverage

When you’re done, do a full coverage run to make sure your code has no global impact.

jest --coverage
Copy the code

Submit the commit

One of the issues involved is that the commit MSG must be submitted in the format required by the official. Otherwise, it will be automatically checked by hooks that deny you the commit. Github.com/conventiona…

git commit -am 'test(compiler-core): add vif with comments test case'
Copy the code

Put forward the PR

Push local branches to Github

git push --set-upstream origin comments
Copy the code

How do I merge extra Commits

There is also the problem of merging multiple commits if multiple referrals are involved.

TODO updated recently

Mention of PR

Finally, you can wait for the good news of your victory

The last

Deliberate practice is the only way to improve if you want to read the source code might as well give yourself a successful put forward a small goal PR.

The appendix

The code structure
Data response reactivity reactivity ref effect
The runtime runtime-core The core Inject Life cycle Watch Directive Component
runtime-dom Dom class style
runtime-test The simulation test
The compiler compiler-core The core Basic type parsing AST
compiler-dom Dom v-html v-text v-model v-clock
compiler-sfc Single file compilation
compiler-ssr Server side rendering compiles
Utility methods shared
vue vue
Template parser template

What is Jest’s coverage

Coverage let’s add a parameter to run the coverage out

npx jest --coverage 
Copy the code

In fact, there was a mistake in running coverage so let’s just leave that out of the way and let’s just go through the report a little bit, and if you’ve taken software engineering you know that coverage in general theoretically includes, right

Statement overwrite node overwrite path overwrite condition combination overwrite but in general it’s understood differently in different frameworks and it’s broken down like this in Jest
%stmts Statement Coverage Is every statement executed?
%Branch Branch coverage: Is every if block executed?
%Funcs Function coverage: Is every function called?
%Lines Line coverage: Is every line executed?