? 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 實現此能力提供了參考。