🗞 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 实现此能力提供了参考。