React DevTools 4.14 发布、Next.js Star 超 70,000 | 淘系前端架构周刊 210719期

🗞 News

React DevTools 4.14 发布

React DevTools 4.14 发布,其中包含一项备受期待的功能,即可以显示被检查组件的 hooks 名称。

Display Hook Names

Twitter:React DevTools 4.14

@vuejs/composition-api 1.0.0 发布

经历了一年多的 beta 和 rc,@vue/composition-api 1.0.0 正式发布,将其安装至 Vue 2 项目中即可使用 Vue Composition API,当项目升级至 Vue 3 后,仅需将 import { ref } from '@vue/composition-api' 中的 @vue/composition-api 替换为 vue 即可实现无缝迁移。

GitHub Repo:vuejs/composition-api

Next.js Star 数超 70,000

Next.js 在 GitHub 上已经超过 70,000 Star,按照目前的增长趋势,有望在未来超越 Node.js。

GitHub Stars

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

Visual Studio Code 1.58 发布

编辑器中的终端——支持在代码编辑区域中创建和移动终端(Terminal)。

Terminal In Editor

自动记录调试环境——Visual Studio Code 现在会记住每个文件所选择的调试器,在下次开始调试时,就不会再出现选择调试器的提示了。

Remember Debug Env

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

📦 Open Source

CSS Layout Generator

一个快速生成 CSS 布局的工具,能够以可视化的方式简单快速地生成你想要的样式布局。

Home Page

Header Main Footer Template

Playground:CSS Layout Generator

Node.js Application Monitoring

一个用于监控 Node.js 应用程序的工具,能够通过此工具查看内存使用情况、平均响应时间、CPU 使用情况等数据,可以用于发现应用运行时出现的问题。通过分析每个网络请求的得到相应的数据,能够帮助你找到性能瓶颈,以更好地优化代码。

Node.js Application Monitoring

@vue/web-component-wrapper

一个让你使用 Vue 来开发 Web Components 的库,支持大部分常用的 Vue API。

GitHub Repo:vuejs/vue-web-component-wrapper

当然,这个方案也有一定的缺陷,以这种方式构建的 Web Components 会依赖 Vue 的运行时,这意味着最少会有 16kb 的运行时代码被引入。

Nx Workspace

如果说 Lerna 和 Yarn Workspace 提供了工程目录中的 Monorepo 方案,那么 Nx 则为你带来了业务项目中的 Monorepo 方案。你可以在一个 Nx Workspace 中同时开发 Angular/React/NestJS 等应用,从项目初始化到开发构建,再到 Lint/Unit Test/E2E Test,Nx 都已经为你安排得明明白白。如果要给它一个定义,那么它应该是 Angular 的工作流 + Monorepo + 插件体系 + 开发工具 + 几乎无限的定制能力 + ……

对于Angular工作流(即 schematic 和 builder),如果你使用过 Angular 或者 NestJS,应该深有体会。schematic(又称 generator)不仅能帮助你快速生成模板文件,还能让你根据自己的业务需求快速定制生成能力。而 builder(又称executor)则帮助团队项目统一 dev/build/lint/test/e2e/commit 等一系列命令的执行配置。

另外,在定制能力上 Nx 也实现了精细的插件机制,你可以很容易的实现 Framework 层面的插件,如 Vue/Electron,或者是 Compiler/Bundler 层面的插件,如 ESBuild/Vite,甚至是跨语言层面的插件,如 Dart/Golang。

如果上面的介绍已经引起了你的兴趣,可以使用 Nx-Todo-App 这个入门项目,根据文档来快速上手 Nx。

Home Page:Nx Workspace

require-ts

一个允许使用 require 来处理 TypeScript 文件的库,原理其实是在 require 中注册了 .ts 的拓展名,然后使用 tsc 实时编译并缓存。

这一思路在 vuepress/vuepress-next 中也得到了体现,但有几点区别:

  • VuePress 中使用 ES Build 进行编译,速度明显更快
  • 由于使用 ESBuild 进行编译,externals 是被写死的,因此必须确保被 require 的文件中没有额外的 externals(当然,也可以对 AST 进行解析,收集所有的 external)

GitHub Repo:adonisjs/require-ts

ts-transformer-keys

一个能够从 TypeScript Interface 中获取到 Interface 成员(非类型信息)的库。

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

具体实现方法其实是使用 TypeScript 的 compiler 对代码进行 AST 解析,拿到成员信息。作者还写了一个类似的,从 Enum 中获得 Enum 成员:ts-transformer-enumerate

GitHub Repo:kimamula/ts-transformer-keys

PouchDB

一个轻量且能够在浏览器环境下运行的数据库,师从 Apache 的 CouchDB(并且可以互相兼容)。

Intro

它的特点是获取数据不需要写任何 SQL,只需要两个字——“同步”。

const db = new PouchDB('dbname');
​
db.put({
 _id: 'dave@gmail.com',
 name: 'David',
 age: 69
});
​
db.changes().on('change', function() {
 console.log('Ch-Ch-Changes');
});
​
db.replicate.to('http://example.com/mydb');
复制代码

很适合于在线协同场景下的增量数据和原子化的行为数据的同步,建议搭配 ot.js 使用。

当然,它最适合 UI Framework 使用,比如 React:ArnoSaine/react-pouchdb

react-pouchdb 提供了一些 hooks/HOC/组件,从开发体验上讲,相较传统 http/swr 更加舒适。

GitHub Repo:pouchdb/pouchdb

📑 Article

React Fast Refresh 原理剖析

从源码的角度,详细剖析了 React 实现 Fast Refresh 的方式,为 Rax 实现此能力提供了参考。

查看原文:React Fast Refresh 原理剖析

1