🗞 News
React DevTools 4.14 发布
React DevTools 4.14 发布，其中包含一项备受期待的功能，即可以显示被检查组件的 hooks 名称。
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。
Twitter：Next.js has passed 70,000 stars on GitHub.
Visual Studio Code 1.58 发布
编辑器中的终端——支持在代码编辑区域中创建和移动终端（Terminal）。
自动记录调试环境——Visual Studio Code 现在会记住每个文件所选择的调试器，在下次开始调试时，就不会再出现选择调试器的提示了。
Changelog：Version 1.58 is now available! Read about the new features and fixes from June.
📦 Open Source
CSS Layout Generator
一个快速生成 CSS 布局的工具，能够以可视化的方式简单快速地生成你想要的样式布局。
Playground：CSS Layout Generator
Node.js Application Monitoring
一个用于监控 Node.js 应用程序的工具，能够通过此工具查看内存使用情况、平均响应时间、CPU 使用情况等数据，可以用于发现应用运行时出现的问题。通过分析每个网络请求的得到相应的数据，能够帮助你找到性能瓶颈，以更好地优化代码。
@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（并且可以互相兼容）。
它的特点是获取数据不需要写任何 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 实现此能力提供了参考。
