đź—ž News

React DevTools 4.14 released

React DevTools 4.14 release includes a much anticipated feature that displays the hooks names of components being checked.

Twitter: React DevTools 4.14

@ vuejs/composition – API 1.0.0 release

After more than a year of beta and RC, @vue/ Comcomposition API 1.0.0 has been released. You can use the VUE Composition API when you install it in your vUE 2 project. When you upgrade to VUE 3, Simply replace @vue/ comcomposition – API in import {ref} from ‘@vue/ comcomposition – API ‘with vue to achieve seamless migration.

Making Repo: vuejs/composition – API

The number of Next. Js stars exceeds 70,000

Next. Js already has over 70,000 stars on GitHub and is expected to surpass Node.js in the future at current growth trends.

Twitter：Next.js has passed 70,000 stars on GitHub.

Visual Studio Code 1.58 released

Terminals in the editor — Supports creating and moving terminals in the code editing area.

Automatic recording of the debug environment – Visual Studio Code now remembers the debugger selected for each file and will no longer be prompted to select the debugger the next time you start debugging.

Changelog: Version 1.58 is now available! Read about the new features and fixes from June.

📦 Open Source

CSS Layout Generator

A quick CSS layout generation tool that can easily and quickly generate your desired style layout in a visual way.

Playground: CSS Layout Generator

Node.js Application Monitoring

A tool for monitoring node.js applications. This tool allows you to view data such as memory usage, average response time, CPU usage, etc., which can be used to detect problems while the application is running. By analyzing the data for each network request, you can find performance bottlenecks and optimize your code.

@vue/web-component-wrapper

A library that allows you to develop Web Components using Vue. It supports most of the commonly used Vue apis.

Making Repo: vuejs/vue web – component – wrapper

There is, of course, a downside to this solution. Web Components built this way rely on Vue’s runtime, which means that at least 16KB of runtime code is introduced.

Nx Workspace

If Lerna and Yarn Workspace provide the Monorepo solution in the project directory, Nx gives you the Monorepo solution in the business project. You can develop Angular/React/NestJS applications simultaneously in an Nx Workspace. From project initialization to development and build, to Lint/Unit Test/E2E Test, the Nx Workspace has a clear schedule for you. If you wanted to define it, it would be Angular workflows + Monorepo + plug-in architecture + development tools + almost unlimited customization ability +…

Angular workflows (that is, schematic and Builder) are familiar if you’ve ever used Angular or NestJS. Schematic (also known as generator) not only helps you quickly generate template files, it also lets you quickly customize the generation capabilities to suit your business needs. The builder (also known as executor) is to help the team project unified dev/build/lint/test/e2e/commit a series of commands and perform the configuration.

In addition, Nx also implements a sophisticated plugin mechanism in terms of customization capabilities. You can easily implement Framework level plug-ins such as Vue/Electron, Compiler/Bundler level plug-ins such as ESBuild/Vite, and even cross-language plug-ins. Such as the Dart/Golang.

If you’re interested, use the nX-Todo-app starter project to get up to speed on Nx by following the documentation.

Home Page: Nx Workspace

require-ts

A library that allows you to use require to process TypeScript files is to register the.ts extension in require and then compile and cache it in real time using TSC.

This line of thinking is also reflected in vuepress/ vuepress-Next, with a few differences:

  • VuePress uses ES Build for compilation, which is significantly faster
  • Since compiling using ESBuild,externalsIs written to death, so make sure to berequire(Of course, the AST can also be parsed to collect all externals)

Making Repo: adonisjs/the require – ts

ts-transformer-keys

A library that gets Interface members (non-type information) from TypeScript interfaces.

import { keys } from 'ts-transformer-keys';
​
interface Props {
 id: string;
 name: string;
 age: number;
}
const keysOfProps = keys<Props>();
​
console.log(keysOfProps); // ['id', 'name', 'age']
Copy the code

The actual implementation is to use the TypeScript compiler to parse the code with the AST to get the member information. The authors also wrote a similar one to get Enum members from Enum: ts-Transformer -enumerate

Making Repo: kimamula/ts – transformer – keys

PouchDB

A lightweight, browser-friendly database that learns from Apache’s CouchDB (and is compatible with each other).

Its characteristic is that it does not need to write any SQL to get the data, just two words – “synchronization”.

const db = new PouchDB('dbname');
​
db.put({
 _id: '[email protected]',
 name: 'David',
 age: 69
});
​
db.changes().on('change', function() {
 console.log('Ch-Ch-Changes');
});
​
db.replicate.to('http://example.com/mydb');
Copy the code

It is suitable for synchronization of incremental data and atomized behavior data in online collaborative scenarios. It is recommended to use ot.js together.

Of course, it works best with UI frameworks such as React: ArnoSaine/ React-pouchdb

React-pouchdb provides several hooks/HOC/ components that are more comfortable to develop than traditional HTTP/SWR.

Making Repo: pouchdb/pouchdb

đź“‘ Article

React Fast Refresh principle analysis

From the point of view of source code, the React implementation of Fast Refresh method is analyzed in detail, providing a reference for Rax to achieve this capability.

React Fast Refresh Principle analysis