This is the fourth day of my participation in the August More text Challenge. For details, see:August is more challenging

The previous article has combed through the existing gameplay of the Github Profile Readme. Still have a short “create” list at the end of the article, so practice it today and review your goals:

  • Implement a Leetcode stats card based on the Github – ReadME-Stats project
  • Try to build a more extensible SVG generation system and explore whether the existing chart components can be directly applied.
  • Build a Profile Readme visual generator

The actual work load was more than I expected, so I had to finish it over several days. This article documents the implementation of LeetCode statistical cards.

Development goal: Implement a LeetCode statistics card on the Github – ReadME-Stats project

Technology involved: GraphQL, TypeScript, SVG programming

Create a file

Github-readme-stats runs on Vercel, and the internal core logic is actually very simple: the request triggers serverless function -> Fetcher -> Card handles the data and builds SVG.

A few cards in the project are almost copied and pasted duplicate code. Regardless of optimization, the API, Fetcher and card files are copied as usual.

Request Leetcode data

Leetcode does not have an open API, so you have to use a debugging tool to slowly find the request interface. Select a user page with sufficient data, such as leetcode-cn.com/u/int65536/, refresh, and check one by one in the Network panel. Leetcode uses GraphQL to query the data, filters the GraphQL path to narrow it down, and with a closer look, it won’t take long to determine the purpose of each request.

I’m also going to assemble the data with GraphQL. So here’s the question: How do I copy the Request Payload? Is there a postman-like API debugging tool?

Copy the Request content

Chrome Devtool uses the shortcut key to Copy the Request Payload to get a large string. The real method is to “click and select the replication target, right-click and select Copy Value”.

GraphQL debugging tool

Download a GraphiQL client – GraphiQL | Apps | Electron (electronjs.org), GraphiQL – app is an open source project, many years ago some small bugs but enough for the time being.

Leetcode’s domestic and international sites use two completely different sets of requests and different schema structures. You can only do two sets of logic and return a uniform data structure after processing. Writing code without TypeScript and ESLint is really inefficient, and it’s hard to predict errors during the coding phase. You can only run -> Check error messages -> Debug.

Vercel Debug

Repeated code + no syntax checking + no type checking. If there is no Debugger, and only console, then the development is simply too hard.

The Vercel local development environment runs through Vercel Dev, and there are several ways to start node.js in VSCode:

  1. Open the Auto Attach
  2. Use JavaScript Debug Terminal to execute in the specified Terminal windowvercel dev
  3. With a simple launch.json

I expect to be able to start debugging when I run Vercel Dev in this project. Auto Attach is attached only for this workspace

/ / set. Vscode/Settings. Json
{
    "debug.javascript.autoAttachFilter": "smart".// Command line scripts that match the AttachSmartPattern automatically start the debugger
    "debug.javascript.autoAttachSmartPattern": [ / / specified AttachSmartPattern
        "**/vercel/**"]}Copy the code

If you are interested in learning more about starting node.js debugging in VSCode, check out the following ways to start Node.js debugging in VSCode (juejin.cn).

Refactor the code

After solving this part, it is found that the current development assistance and code structure is ineffective, inefficient and may have undiscovered errors. I couldn’t take it anymore, so I decided to reconstruct.

TypeScript

Because the master of TS is not comprehensive, let alone skilled application. Can be said to be a novice while practice while lying pit process, lying pit process a little awkward, but also a method of learning.

Support the TypeScript

Let’s take a look at Vercel’s support for TypeScript:

Deploying a Node.js function with the .ts extension will automatically be recognized as a TypeScript file and compiled to a Serverless Function.

You can also define a tsconfig.json to configure the Vercel TypeScript compiler.

Vercel has built-in TypeScript compilation support to keep TS code working. Also, tsconfig.json works with the Vercel TypeScript compiler.

TS support is partly compilation support and partly IDE assistance (error alerts, coding advice and fixes, intelligent completion, jumps, and so on). What I’m curious about is how VSCode TypeScript language services stay in sync with Vercel’s default TS configuration without tsconfig.json.

Modules in TypeScript

Error Message: Cannot redeclare block-scoped variable ‘encodeHTML’.

Quick Fixes: Convert to ES6 module

How to select enum and key-value pairs?

Object-oriented programming

The generic

References

Vercel – Supported Languages for Serverless Functions – Vercel Documentation

TypeScript tutorial with Visual Studio Code

TypeScript Programming with Visual Studio Code

TypeScript: Documentation – What is a tsconfig.json (typescriptlang.org)

TypeScript: TSConfig Reference – Docs on every TSConfig option (typescriptlang.org)

TypeScript: Documentation – Modules (typescriptlang.org)