Happy 1024 Programmers Day to you all!

🗞 News

Node. Js v17.0.0 release

Important Updates:

  • Node.js now includes OpenSSL 3.0, specifically QuicTLS/OpenSSL, which provides QUIC support
  • V8 JavaScript engine upgraded to V8.9.5
  • readlineA module provides an interface for a single stream from a readable stream (e.gprocess.stdin) to read a row of data
  • &etc.

Release Blog: Node v17.0.0 (Current) | Node. Js (nodejs.org)

VS Code releases a browser version

With GitHub’s ability to browse GitHub repos online, VS Code is now available in the browser. Just visit VS Code. Dev in the browser to use VS Code in the browser.

The browser version of VS Code has the same basic capabilities as the Electron client version, allowing you to open local projects for development. In the near future, it will be possible to develop on the iPad.

Release Blog:code.visualstudio.com/blogs/2021/…

The React document is online

The React documentation has been criticized for its lack of clarity and the use of Class Components in many examples, so the React team plans to do a complete refactoring of the documentation.

The new document is built with Next. Js, and Tailwind is used for page layout, dark mode is introduced, etc. The interface is very clean and concise.

React Docs Beta (reactjs.org)

📦 Open Source

ts-morpher

TypeScript’s own AST interfaces are too complex and unstable (for example, it converges all AST interfaces into the Factory namespace in one version), so TS-MORph is born. Ts-morph has better support for TypeScript (it is, after all, wrapped around the TypeScript AST API itself) and simplifies many operations to a certain extent. It blocks Node, TypeNode, Syntax, Statement, Declaration, and other concepts that are not friendly to developers who have not studied them or know very little about how they compile.

Home Page：LinubuduLab: TSMorpher (ts-morpher.vercel.app)

Making Repo: LinbuduLab/morpher: Higher wrapper of ts-morph for dead simple TypeScript AST operations, it’s intuitive. (github.com)

@swc/jest

A Jest Transformer with type checking removed, very fast, for replacing Babel-Jest and TS-Jest.

The configuration is basically the same as babel-jest and TS-jest:

// jest.config.js
module.exports = {
  transform: {
    '^.+\\.(t|j)sx? $': '@swc/jest',}}Copy the code

The default configuration reads the.swcrc file in the repository directory. You can customize the configuration in the following ways:

const fs = require('fs')

const config = JSON.parse(fs.readFileSync(`${__dirname}/.swcrc`.'utf-8'))

module.exports = {
  transform: {
    '^.+\\.(t|j)sx? $': ['@swc/jest', { ...config, /* custom configuration in jest */}],}.}Copy the code

GitHub Repo: SWC-project/Jest: super-fast alternative for babel-jest or TS-jest without type checking (github.com)

vscode-theme-generator

A custom VS Code theme library, developed in TypeScript, that allows you to easily customize VS Code themes.

import { generateTheme, IColorSet } from 'vscode-theme-generator';
const colorSet: IColorSet = {
  base: {
    background: '#12171F'.foreground: '#EFEFEF'.color1: '#399EF4'.color2: '#DA6771'.color3: '#4EB071'.color4: '#FFF099',}}; generateTheme('My Theme', colorSet, path.join(__dirname, 'theme.json'));
Copy the code

GitHub Repo: Tyriar/ vscode-theme-Generator: Easily generate themes for VS Code with only a few colors (github.com)

Nginx Playground

An online demo tool that can quickly verify Nginx configurations.

Online: Nginx Playground (wizardzines.com)

Probot

A framework for building GitHub Apps that can be used to automate workflows.

Official document: Probot

GitHub Repo: Probot/Probot: 🤖 A framework for building GitHub Apps to Automate and improve your workflow

use-context-selector

A wrapper based on the Context API that optimizes rerender problems caused by the Context. Although there are some limitations, this design allows you to better understand the Context API.

Usage:

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

import { createContext, useContextSelector } from 'use-context-selector';

const context = createContext(null);

const Counter1 = () = > {
  const count1 = useContextSelector(context, v= > v[0].count1);
  const setState = useContextSelector(context, v= > v[1]);
  const increment = () = > setState(s= > ({
    ...s,
    count1: s.count1 + 1,}));return (
    <div>
      <span>Count1: {count1}</span>
      <button type="button" onClick={increment}>+ 1</button>
      {Math.random()}
    </div>
  );
};

const Counter2 = () = > {
  const count2 = useContextSelector(context, v= > v[0].count2);
  const setState = useContextSelector(context, v= > v[1]);
  const increment = () = > setState(s= > ({
    ...s,
    count2: s.count2 + 1,}));return (
    <div>
      <span>Count2: {count2}</span>
      <button type="button" onClick={increment}>+ 1</button>
      {Math.random()}
    </div>
  );
};

const StateProvider = ({ children }) = > {
  const [state, setState] = useState({ count1: 0.count2: 0 });
  return (
    <context.Provider value={[state, setState]} >
      {children}
    </context.Provider>
  );
};

const App = () = > (
  <StateProvider>
    <Counter1 />
    <Counter2 />
  </StateProvider>
);

ReactDOM.render(<App />.document.getElementById('app'));
Copy the code

GitHub Repo: dai-shi/use-context-selector: React useContextSelector hook in userland (github.com)

📑 Article

How was Naive UI developed

Starting from Naive UI Button components, this article introduces the process of realizing a component library step by step and probes into the mystery of Naive UI.

How was the component library recommended by Udad developed? (qq.com)