Ding~ You have a Vue.js challenge invitation, please check it

foreword

Hello everyone, my name is webfansplz . What I want to share with you today is vuejs-challenges , a Vue.js online challenge platform, which provides some question banks, developers can challenge online. Through these challenges, we can further Understand and be familiar with Vue.js , I hope it will be helpful to students who want to learn Vue.js .

background

It has been almost two years since the release of ---67603c7c7f4eba7a837cd69afd0f57e6 Vue 3.0 , Vue 2.0 also ushered in its last version last Friday Vue 2.7 , shouldn't there be a week on Friday? Wu's attitude... well, then I'll get up again on the weekend~
Vue3 It's been almost two years since the official version was released, and the author has been in contact with Vue3 and it's been almost two years (the reconstruction of a project two years ago took the first train of "One Piece"). This A period of practice has accumulated some experience. Some time ago, I was thinking, is it possible to have such a platform, where you can share some of the problems you have encountered in your work Vue.js problems, and you can share them through others Benefit from experience. When helping others, you can also gain something yourself, which is great. This is the origin of vuejs-challenges . I hope we can share with each other here and grow together.

introduce

Next, I will introduce vuejs-challenges to you:

Question bank

vuejs-challenges currently has more than 20 questions, and the question bank is mainly divided into two dimensions:

• difficulty

  Difficulty includes warm-up/easy/medium/hard/hell. Challengers can choose different levels of difficulty to practice in stages according to their own situation/needs.

• Tags cover the inspection of responsive system API, the application of composite API, the use of custom commands, the use of composable functions, etc. Challengers can choose their unfamiliar/unfamiliar modules for targeted exercises.

The question bank has just been established (it is still being supplemented), but a person's energy and usage scenarios are limited. I think I need to stand on the shoulders of giants and use everyone's help to improve it together. In order to So that everyone can quickly and easily contribute to the question bank, vuejs-challenges provides a set of automation capabilities. We will introduce it in detail later.

challenge way

vuejs-challenges uses Vue SFC Playground for online coding, the challenger can open the challenge without any installation and download, and debug and preview in real time.

Participate and contribute

As we all know, the growth of an open source project is inseparable from the contributions of community developers. The same is true for vuejs-challenges . You can contribute in the following ways:

• Improve test cases for existing topics
• Provide learning materials or methods for the topic
• Share Vue.js problems you encountered in real projects (whether you found the answer or not)
• Help others by leaving a message under Issue
• Share your answers or problem solving ideas
• Proposal to add a new topic

solution sharing

The project provides the corresponding Issue template, the sharer only needs to select the template and provide the solution, and other challengers can find it when retrieving the solution.

Proposal to add a new topic

The project also provides a Issue template for the new topic proposal. The developer only needs to fill in the information accurately according to the content provided by the Issue template, a new proposal PR will be It is automatically generated. This way, developers do not have to read the code of the project itself and are familiar with the collaboration process and specifications, which greatly reduces the cost of contributing new proposals.

Documentation

In addition to providing a list of question banks based on Github README , we also use VitePress and Netlify to deploy documents, providing challengers with one more choice.

By the way, the new version of VitePress is really handsome:

principle

After reading the introduction of the project, I believe some students will be interested in its implementation principle. Next, let's take a look. We mainly share the following three points:

How are online challenge links generated?

Earlier we mentioned that the online challenge is based on Vue SFC Playground , well, then let's take a look at its source code.

From the above figure, we can see that the core of Vue SFC Playground is actually implemented in vuejs/repl . Briefly introduce it in one sentence, vuejs/repl is a single file used to parse Vue3 Interactive interpreter for components.

We return to the demand itself. Our demand is actually to convert the topic into an online Playground link. This requirement can be disassembled into two functions:

• 1. read the topic

     This is simple, and I am naturally not a problem for those who are proficient in using Node.js File System API who come to CRUD 🐶.

• 2. Convert topic content into links

     After getting the file content, how do we pass it to Playground ? Let's look at a picture first:

From the above picture, we can see that the value of the link hash is changing with our input, which can confirm that the feasibility of our requirements is OK, and then we still need to look at vuejs/repl Source code, clarify the parameter format it receives. The source code logic of this block is a little scattered, so I won't take you to roam the source code. The link format that vuejs/repl needs to provide is roughly as follows:

 const content = {
 [文件名]: 文件内容
}
const url = `${SFC_HOST}#${编码(content)}`

After vuejs/repl receives the parameters, it decodes and creates the corresponding file, which is the principle of the whole process.

How does the issue of a new proposal submit a PR automatically?

这个功能的核心其实就是Github Actions ,它是Github 2018年10月CI/CD服务.简单来说就是Github you with some hooks and APIs that allow you to create your workflow, automate builds, tests, deployments, etc. Github Actions is very flexible, very easy to use, and its appearance is more It saves a lot of time and energy for the maintainers of many open source projects. Next, we briefly introduce this process:

• Create a workflow:

 # .github/workflows/issue-pr.yaml
# 工作流名称
name: Issue to Pull Request

# 钩子,监听到issue创建和修改,调用此工作流
on:
  issues:
    types: [opened, edited]

# 具体逻辑
jobs:
  start:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: cd scripts && npm i --only=production
      # 具体逻辑处理
      - run: cd scripts/actions && npx ...

• Parse Issue content and convert it to the content of the question bank

The principle of this block is actually to match the corresponding module content and convert it into the file content required to create the question bank through regularity. As everyone knows, it can be used JavaScript The final realization... you know of.

• Submit PR

This is actually a HTTP request, see Create a pull request for details.

The above is the working principle of Issue to PR .

How to build a question bank document?

Earlier we mentioned that the document uses VitePress and Netlify for construction, and they are mainly introduced here.

Introduction to VitePress

The implementation of the document mainly uses the characteristics of VitePress conventional routing and the ability of Markdown parsing.

Using these two capabilities naturally supported by VitePress , we can easily find the corresponding relationship between the question bank and the document and the presentation of the document.

Netlify

The fastest way to build the fastest sites (Build the fastest website the fastest way) is the slogan for Netlify . Yes, there is only one thing you need to do, is to put Github project is associated with it, authorized. After that, everything is automatic. Most importantly, it's free ! Harmful, so delicious! For a lazy person like me, Netlify is what builds the website Artifact.

Thanks

The inspiration and realization of this project mostly come from Anthony Fu 's type-challenges 🌹.

The great vuejs/repl makes this project possible ♥️.

Epilogue

The article ends here, but the challenge has just begun. vuejs-challenges looks forward to your challenges and contributions 🤝.

If my articles and projects inspire and help you, please give a star to support the author ✌.