淘系前端架构周刊：Node.js v17.0.0 发布、VS Code 发布浏览器版本
祝大家 1024 程序员节快乐！ 🗞 News Node.js v17.0.0 发布 重要更新： Node.js 现在包含了 OpenSSL 3.0，尤其是 quictls/openssl，它提供了 QUIC 支持 V8 JavaScript 引擎升级至 v8.9.5 readline 模块提供了一个接口用于一次从可读流（例如 process.stdin）中读取一行数据 &etc. Release Blog：Node v17.0.0 (Current) | Node.js (nodejs.org) VS Code 发布浏览器版本 随着 GitHub 推出 github.dev 在线浏览 GitHub Repo 的能力后，VS Code 也迎来了浏览器版本，只需要在浏览器访问 https://vscode.dev 即可在浏览器中使用 VS Code。 浏览器版本的 VS Code 与 Electron 客户端版本在基本能力上保持一致，可以打开本地项目进行开发。相信在不久的将来，在 iPad 上也能进行开发了。 Release Blog：https://code.visualstudio.com/blogs/2021/10/20/vscode-dev React 新文档上线 曾几何时，React 的官方文档一直被人诟病，一方面文档的结构不够清晰，另一方面较多示例还在使用 Class Components，因此 React 团队打算对文档做一次彻底的重构。 新文档采用 Next.js 构建，并且使用了 Tailwind 实现页面布局，引入了暗黑模式等，界面非常清晰简洁。 文档链接：React Docs Beta (reactjs.org) 📦 Open Source ts-morpher TypeScript 自身 提供的 AST 接口 过于复杂，并且稳定性较差（如它曾经在某一个版本将所有 AST 接口收敛到了 factory 命名空间下），因此 ts-morph 诞生了，相比于其他 AST 封装库，ts-morph 对 TypeScript 有着更好的支持（毕竟它本身就基于 TypeScript AST API 封装而来），并且在一定程度上简化了许多操作，屏蔽了 Node、TypeNode、Syntax、Statement、Declaration 等等一系列对于那些没有学习过或者是对其知之甚少编译原理的开发者算不上友好的概念。 Home Page：LinubuduLab: TSMorpher (ts-morpher.vercel.app) GitHub Repo：LinbuduLab/morpher: Higher wrapper of ts-morph for dead simple TypeScript AST operations, it's intuitive. (github.com) @swc/jest 一个去掉了类型检查的 Jest Transformer，非常快，用于替换 babel-jest 和 ts-jest。 配置基本与 babel-jest 和 ts-jest 一致： // jest.config.js module.exports = { transform: { '^.+\\\\.(t|j)sx?$': '@swc/jest', }, } 默认配置会读取仓库目录下的 .swcrc 文件，可以通过以下方式自定义配置： const fs = require('fs') const config = JSON.parse(fs.readFileSync(`${__dirname}/.swcrc`, 'utf-8')) module.exports = { transform: { '^.+\\\\.(t|j)sx?$': ['@swc/jest', { ...config, /* custom configuration in jest */ }], }, } GitHub Repo：swc-project/jest: Super-fast alternative for babel-jest or ts-jest without type checking (github.com) vscode-theme-generator 一个能够自定义 VS Code 主题的库，采用 TypeScript 开发，能够帮助你轻松自定义 VS Code 的主题。 import { generateTheme, IColorSet } from 'vscode-theme-generator'; const colorSet: IColorSet = { base: { background: '#12171F', foreground: '#EFEFEF', color1: '#399EF4', color2: '#DA6771', color3: '#4EB071', color4: '#FFF099', } }; generateTheme('My Theme', colorSet, path.join(__dirname, 'theme.json')); GitHub Repo：Tyriar/vscode-theme-generator: Easily generate themes for VS Code with only a few colors (github.com) Nginx Playground 一个能够快速验证 Nginx 配置的在线演示工具。 在线地址：nginx playground (wizardzines.com) Probot 一个用于构建 GitHub Apps 的框架，可以用它来实现工作流的自动化。 官方文档：probot GitHub Repo：probot/probot: 🤖 A framework for building GitHub Apps to automate and improve your workflow use-context-selector 一个基于 Context API 的封装，优化 Context 导致的 rerender 问题，虽然有一些限制，但可以通过这个设计实现更好了解 Context API。 使用方法： import React, { useState } from 'react'; import ReactDOM from 'react-dom'; import { createContext, useContextSelector } from 'use-context-selector'; const context = createContext(null); const Counter1 = () => { const count1 = useContextSelector(context, v => v[0].count1); const setState = useContextSelector(context, v => v[1]); const increment = () => setState(s => ({ ...s, count1: s.count1 + 1, })); return ( <div> <span>Count1: {count1} span> <button type="button" onClick={increment}>+1 button> {Math.random()} div> ); }; const Counter2 = () => { const count2 = useContextSelector(context, v => v[0].count2); const setState = useContextSelector(context, v => v[1]); const increment = () => setState(s => ({ ...s, count2: s.count2 + 1, })); return ( <div> <span>Count2: {count2} span> <button type="button" onClick={increment}>+1 button> {Math.random()} div> ); }; const StateProvider = ({ children }) => { const [state, setState] = useState({ count1: 0, count2: 0 }); return ( <context.Provider value={[state, setState]}> {children} context.Provider> ); }; const App = () => ( <StateProvider> <Counter1 /> <Counter2 /> StateProvider> ); ReactDOM.render(<App />, document.getElementById('app')); GitHub Repo：dai-shi/use-context-selector: React useContextSelector hook in userland (github.com) 📑 Article Naive UI 是如何开发出来的 文章从 Naive UI 的 Button 组件开始，以小见大，逐步介绍实现一个组件库需要经历的过程，窥探 Naive UI 的奥秘。 原文链接：尤大都推荐的组件库是如何开发出来的？ (qq.com)
